【WordPress】the_content()で表示した本文の直後にウィジェットエリアを追加する方法

menu

Home
ＷＥＢ制作 , ＴＩＰＳ
【WordPress】the_content()で表示した本文の直後にウィジェットエリアを追加する方法

記事の詳細

WordPressにはブログなどの投稿の本文を表示する時に使う関数としてthe_contentという関数が用意されています。

ウィジェットエリアをthe_contentで表示した本文の直後に表示したいなぁ・・って思ってテンプレートを編集しようとしたところ、ちょっと一工夫必要だったので紹介いたします。

今回のブログの見出しはコチラです！

1 the_contentの使い方
2 the_contentの直後にウィジェットエリアを追加したのにプラグインのほうが先に表示される
3 ウィジェットエリアよりも上にプラグインが表示されてしまう理由
4 function.phpにオリジナルの関数を追加して、フィルターでセット
5 追加したコードの解説
6 コピペして使ってOK！変更するのは表示順の数字とウィジェット名だけ

the_contentの使い方

WordPress Codexを参照すると、the_contentの説明は次のように書いています。

説明

現在の投稿の本文を出力します。このテンプレートタグはループの中で使わなければなりません。

このループの中で使わなければならないというのがポイントでして、the_contentを呼んでも本文が表示されないというトラブルもネットで多く見かけました。

ということで、デザインとか何も考えずにただタイトルと本文を表示するだけなら次のように書けばいいことになります。

<?php if(have_posts()): ?>
    <?php while(have_posts()): the_post(); ?>
        <?php the_title(); ?>
        <?php the_content(); ?>
    <?php endwhile; ?>
<?php else: ?>
    <p>お探しの記事は見つかりませんでした。<br />
<?php endif; ?>

1

2

3

4

5

6

7

8

<?php if(have_posts()): ?>

<?php while(have_posts()): the_post(); ?>

<?php the_title(); ?>

<?php the_content(); ?>

<?php endwhile; ?>

<?php else: ?>

<p>お探しの記事は見つかりませんでした。<br />

<?php endif; ?>

the_contentの直後にウィジェットエリアを追加したのにプラグインのほうが先に表示される

本文を表示する関数はthe_contentということなので、<?php the_content(); ?>の直後にウィジェットエリアを追加すれば確かにウィジェットエリアは表示されます。

ですが！！

今回はそんなわけにもいかないケースだったのです。

インクループで使ってるテンプレートのsingle.phpの抜粋ですが、このようにthe_contentの前後にウィジェットを追加してみました。本文のすぐ下にウィジェットを設置しているので、本文が終わった次にウィジェットが表示されると思いきや・・・

<div class="post clearfix">
    <!-- ブログヘッダーウィジェットの表示 -->
    <?php dynamic_sidebar(blogheader_widget); ?>

    <!-- コンテンツ本体 -->
    <?php the_content(); ?>

    <!-- ブログフッターウィジェットの表示 -->
    <?php dynamic_sidebar(blogfooter_widget); ?>
</div>

1

2

3

4

5

6

7

8

9

10

<?php dynamic_sidebar(blogheader_widget); ?>

<?php the_content(); ?>

<?php dynamic_sidebar(blogfooter_widget); ?>

</div>

著作者を表示するために入れている

プラグインFancier Author Boxのほうが追加したウィジェットエリアよりも上に表示

されてしまっています。

本当はFancier Author Boxの上にウィジェットを表示したいのですが・・・、

ウィジェットエリアよりも上にプラグインが表示されてしまう理由

the_contentを実行した直後にウィジェットエリアを追加しているのにも関わらず、なんでプラグインのほうが先に表示されてしまうのでしょうか？

その理由は、このプラグインがthe_contentをフィルターでフックして動作いるからです！！

もう何のことやらサッパリ分かりませんよね。簡単に言うと、the_contentを実行したタイミングを検出してプラグインも動作するようになっているので、the_contentの後に書いているウィジェットエリアの追加よりも先に実行されてしまうということです。

the_content → プラグイン実行 → ウィジェットの表示

こういう順番で動作しているということです。

ということは、ウィジェットエリアをプラグインよりも先に表示するためには、同じようにフィルターでフックして、プラグインよりも先に表示してしまえばいいということですね。

function.phpにオリジナルの関数を追加して、フィルターでセット

というわけで、まずは実際のコードです。これはfuntion.phpに追加します。

// the_contentの直後にウィジェットを挿入
add_filter( 'the_content', 'add_under_content_widget', '10' );
function add_under_content_widget($content){
	$addText = get_dynamic_sidebar('under_content_widget');
	return $content.$addText;
}
// ウィジェットの出力を返す関数
function get_dynamic_sidebar($index = 1){
    $contents = "";
    ob_start();
    dynamic_sidebar($index);
    $contents = ob_get_clean();
    return $contents;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

// the_contentの直後にウィジェットを挿入

add_filter( 'the_content', 'add_under_content_widget', '10' );

function add_under_content_widget($content){

$addText = get_dynamic_sidebar('under_content_widget');

return $content.$addText;

}

// ウィジェットの出力を返す関数

function get_dynamic_sidebar($index = 1){

$contents = "";

ob_start();

dynamic_sidebar($index);

$contents = ob_get_clean();

return $contents;

}

これを追加することで本文の直後にウィジェットを表示できるようになりました！

目的達成です！

追加したコードの解説

今回追加したコードの解説です。

add_filter( ‘the_content’, ‘add_under_content_widget’, ’10’ );

オリジナルで追加した関数add_under_content_widgetをthe_contentが動作したことをフックして実行されるようにするためのフィルタをセットしています。第3引数の「10」は表示順みたいなもので、数字が小さいほど早く実行されることになります。今回は10にしていますが、プラグイン次第でもっと小さな数値にする必要があります。

$addText = get_dynamic_sidebar(‘under_content_widget’);

細かく書くと長くなってしまうので、要約で書きます。dynamic_sidebarという関数は用意されているのですが、この関数をここでは呼ぶことはできないので、get_dynamic_sidebarという関数をオリジナルで作って実行することで、ウィジェットエリアを構成するコードを取得して変数に代入しています。

under_content_widgetはオリジナルで追加しているウィジェットエリアの名称です。ウィジェットの追加方法に関しては「WordPress ウィジェット追加」で検索しましょう！

get_dynamic_sidebarは何をしているのか？

dynamic_sidebarは実行すると実際に表示しようとしてしまうので、ob_startで表示をバッファリングするようにして、ob_get_cleanで現在のバッファの内容を取得して、戻り値として返す関数です。

ざっくりいうと、表示しようとした内容を表示せずに取得しますよということです。ざっくり説明できてませんね・・説明するのって難しいです。。。

return $content.$addText;

add_filterで the_content にフックをすると、オリジナルで作った関数の中で the_contentで表示する内容を変数$contentで受け取れるようになるので、get_dynamic_sidebarで取得していたウィジェットエリアのコードとピリオドを使って連結したものを返しています。

もう誰でも分かるように書くのは無理だと悟ったので諦めましたｗ