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にはデフォルトでフィルターフックというものが存在して
- ブラウザから投稿や固定ページを更新した時に、DBにデータを記録するとき
- 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;
?>
これでうまく表示されました。
投稿者紹介
-
私たちは、テクノロジに魅せられた個性あふれるメンバーによって構成された茨城県日立市に本社を構えるベンチャー企業です。
”テクノロジを通して「驚き」と「感動」を創造し、人々の「夢」と「笑顔」を支えます。” の経営理念をモットーに明るい未来を描き、ワクワクする企画提案を続けて参ります。
最近のエントリ
レポート2019.10.28ユニキャストレストランを開催しました🍳
レポート2019.08.29社内研修ワークショップ～マシュマロ・チャレンジ～
レポート2019.08.06Computex/InnoVEX 出展者・通訳として参加してきました。
レポート2018.06.12Computex 2018 レポート
2件のコメント