WordPressで一部のAndroid端末やiPhone端末で表示がおかしくなった原因

Pocket

wordpressでWebサイトを構築する際、固定ページで誰でも編集できるようにWebサイトを構築する場面は多いと思います。
今回はTOPページに固定ページからとってきたコンテンツを表示させた際に、一部のスマートフォン端末で表示がおかしくなった原因をまとめました。

最初はindex.phpにこのように書いていました。

<?php
$page_id = xxx; //固定ページID
$page = get_page($page_id, 'OBJECT' , edit); 
$page_include = apply_filters( 'the_content',$page->post_content); 
echo $page_include; 
?>

これでもchromeやFirefox等のブラウザなら普通に表示されます。
しかし、一部の端末でソースコードがそのまま表示されてしまします。chromeのDeveloper Toolsを使ってソースコードを確認してみました。

すると全部にpタグがついてることが判明!
どうやらそれが原因でソースコードがそのまま表示されていたようです。

固定ページからコンテンツを表示させる際に使った

apply_filters( 'the_content',$page->post_content); 

が原因でした。
ここでフィルターフックを呼び出してたんです。
wordpressにはデフォルトでフィルターフックというものが存在して

  1. ブラウザから投稿や固定ページを更新した時に、DBにデータを記録するとき
  2. DBからブラウザに呼び出すとき

この時にフィルターを通る仕組みになっていてるそうです。
フィルターフックの振る舞いは
wp-include/default-filters.phpに書かれていて、the_contetに6つの関数が付いています。
そのなかの1つに

<?php add_filter( 'the_content', 'wpautop' ); ?>

という関数があって、フィルターを通るときにpタグをつけるという命令です。

今回はこれのせいで全部にpタグがついていたんですね。

対処法としては

<?php remove_filter('the_content', 'wpautoup'); ?>
<?php the_content(); ?>

をindex.phpに書いてもいけるみたいなんですが
固定ページの呼び出し方を変えてみました。

<?php
$page_id = xxx; //固定ページID
$content = get_page($page_id);
echo $content->post_content;
?>

これでうまく表示されました。

投稿者紹介

株式会社ユニキャスト
私たちは、テクノロジに魅せられた個性あふれるメンバーによって構成された茨城県日立市に本社を構えるベンチャー企業です。
”テクノロジを通して「驚き」と「感動」を創造し、人々の「夢」と「笑顔」を支えます。” の経営理念をモットーに明るい未来を描き、ワクワクする企画提案を続けて参ります。

2件のコメント

  1. ピンバック: daily 07/23/2013 | zinmu660

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください