【WordPressで特定の固定ページや記事の内容をトップページなど別の場所に表示させる方法】「apply_filters」もちゃんと使います

WordPressのカスタマイズのお仕事が最近ほんとに増えてきてまして、ここのところ「他のサイトで作ったものをWordPressに移行したいんだ~」というお話が多いです。

で、まだまだやったことがない技術を求められることが、とてもよくありますね・・・日々勉強だな~、と感じています。

ところでWordPressで以下のような事をしたいと思ったことはありませんでしょうか。

  • このページや記事の内容を、あのページのあの箇所にも表示させたいな~
  • トップページとかに、表示できないのかな~

私個人的には、よくお客さんに「これできないの?」って聞かれますので、この際メモっておこうと思います。似たような事をされたい方は、ご参考ください。

まずは前提を決めます

例えばトップページに「特定のページや記事の内容を表示したい」とします。ですので、WordPressのテーマファイル「index.php」または「home.php」などをテキストエディターなどを使って編集することになります。

これからご紹介するコードを、追加することになります。

固定ページの内容をトップページに読み込んで表示

「index.php」内の、任意の場所に下のPHPコードを書きます。

2013/07/25 追記

get_pageの使用は非推奨のようです。将来的になくなるかもってやつですかね(参考リンク「Function Reference/get page」)。「get_post」を利用するように促されてますので、修正しました。

あと、get_postの第3引数の値についてもう少し理解が必要なことがわかりました。こちらも随時理解したら追記していきます。(ちなみにデフォルトの値は’raw’です。特別な事をしない限り’raw’でいいみたいです)

<?php
$page_id = 29;//数字はページのIDを入れてください
$page = get_post($page_id, 'OBJECT', 'raw'); //指定したページのIDの情報を取得
$page_include = apply_filters( 'the_content',$page->post_content); //ページの本文をフィルターフックで整形してます
echo $page_include; //出力します
?>

これでできます。次は、特定の記事を読み込んで表示する場合。

記事の内容をトップページに読み込んで表示

「index.php」内の、任意の場所に下のPHPコードを書きます。

<?php
$post_id = 319; //数字は記事のIDを入れてください
$post = get_post($post_id, 'OBJECT', 'raw'); //指定した記事のIDの情報を取得
$post_include = apply_filters( 'the_content',$post->post_content); //記事の本文をフィルターフックで整形してます
echo $post_include; //出力します
?>

という感じでできます。と、ここで「apply_filters」にご注目下さい。

「apply_filters」が実はとても大事

読み込みから出力の際に、「apply_filters」を使って、フィルターフック名「the_content」をフックさせています。「get_page」または、「get_post」で読み込んだ本文を、「the_content」の形に整形しているイメージでしょうかね。

画像で見てもらえますと、なんとなくピンとくるかもしれない。ちなみに、「apply_filters」が「ある」と「ない」とでは、具体的にはこう違います。

apply_filtersが「ない」場合

画像にキャプションをつけたんですが、いらない文字というか設定した値などがそのまんま表示されていますね。かっこ悪いですね。

apply_filtersが「ある」場合

ちゃんと画像の下部にきている。すっきり。

表示させるからには、しっかりと本来の形で表示させましょう。

まとめ

この方法は、特にトップページなどで使う場面が私は多いです。WordPressで特定のページや記事を任意の場所に表示させたい場合に重宝します。

例えば表示させていたとしても「apply_filters」の記述がないパターンで、キャプションなどが崩れて表示されてしまって困った!という方に、ぜひとも参考いただければ幸いです。

ちなみに、本文以外のデータも取得・表示できます。

追記:

古いAndroidのバージョン(2.1)などでこの方法を試すと、imgタグがそのまま出力されていることを教えて頂きまして、私もその現象を確認しました。対処方法を今まとめていますので、また追記しますね。

ひとまずの参考となるのはこちらです。

なにかと交流させていただいております石川さんから教えて頂きました。とても助かります。ただ、このコードはやりたいことによっては、もうちょっと工夫しないといけないので、それこそ技術力必要ですね。

著者:bouya Imamura