フィルターフック the_content の具体的な使用例を紹介します。
フィルターフックについては、
apply_filters と add_filter の使用方法。
で、紹介しておりますので、併せてご覧ください。
今回の例では、記事上部に季節に合わせた画像を貼り付けます。
どんな感じかというと、今ご覧の記事(PC表示のみ)のようになります。この記事上部の画像が、季節によって変わるようになります。
では、コードをご覧ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
add_filter('the_content', 'change_content'); // フィルターフックthe_contentに、関数change_contentをフック function change_content($content){ if(is_single()){ // 単一記事の時だけ $time = time(); // 現在のunixタイムスタンプ取得 $content_plus = ''; switch(date('n', $time)){ // 現在の月を取得し、その値によって分岐 case '3': case '4': case '5': $content_plus = '<img src="' . get_stylesheet_directory_uri() . '/img/spring.jpg" alt="春" />'; $content_plus .= $content; break; case '6': case '7': case '8': $content_plus = '<img src="' . get_stylesheet_directory_uri() . '/img/summer.jpg" alt="夏" />'; $content_plus .= $content; break; case '9': case '10': case '11': $content_plus = '<img src="' . get_stylesheet_directory_uri() . '/img/autumn.jpg" alt="秋" />'; $content_plus .= $content; break; case '12': case '1': case '2': $content_plus = '<img src="' . get_stylesheet_directory_uri() . '/img/winter.jpg" alt="冬" />'; $content_plus .= $content; break; } return $content_plus; //imgタグを追加した文字列を返す } else{ return $content; //何もせずに返す } } |
1行目で、フィルターフック the_content に、関数 change_content() をフックします。
2行目で、関数定義し、フィルターフック the_content から記事本文の文字列を、関数の引数($content)として受け取ります。
この時、フックから渡される文字列は、単一記事ページの時は、記事本文全文で、アーカイブページなどの時は、記事本文の冒頭からの既定の文字数、及び、morelinkです。
既定の文字数とは、110字で、
<!--more-->タグを入れたときはそこまでになります。
また、morelink とは、抜粋された本文の後の 続きを読む の事です。
あとは、関数内で3,4,5月の時、6,7,8月の時、9,10,11月の時、12,1,2月の時で振り分け、
<img>タグのリンク画像を変えています。
その、
<img>タグを、$content_plus に代入したあと、そのタグの後に、フックから受け取った $content を足し算ています。
最後に、32行目で、もともとの記事本文の前に
<img>タグを追加した文字列 $content_plus をフックに返してます。
また、単一記事ページ以外の時は、フックから受け取った $content を加工せずに返してます。
以上、使用例ですが、当ブログの記事、
WordPress 記事の上下に ウィジェットエリア を追加する方法
でも、アクションフック the_content を使用した例がありますので、そちらも、参考にしてください。
※ 今回は、WordPress 4.9.5 、テーマ twentyseventeen の 子テーマ を使用し、functions.phpに追記しております。季節ごとの画像は、子テーマのディレクトリに img ディレクトリを作って、そこに入れてください。子テーマについては、下記リンクをご参照ください。
ちなみに、季節による画像の切り替えをテストするときは、下のコードを4行目と5行目の間に入れてください。
$time = strtotime('2014-12-24'); //ここの月を変えてテスト
