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


この記事の所要時間: 241

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;
?>

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

投稿者紹介

疋田駿
Unicast Inc. ソフトウェアエンジニアRuby,Rails,React,Redux,ReactNative,Android,Elasticsearch,Dockerとか触りながら生計を立ててる。Thinkpad×fedora。ErgoDox愛好家な一児の父。

人気の記事

コメント

  1. […] WordPressで一部のAndroid端末やiPhone端末で表示がおかしくなった原因 | ユニキャストラボ […]

  2. […] 参考:WordPressで一部のAndroid端末やiPhone端末で表示がおかしくなった原因 | ユニキャストラボ […]

コメントを残す

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

PAGE TOP