WordPress投稿本文に挿入した「moreタグ」にウィジェットを表示させる方法

以前、本文中の「moreタグ」に広告を表示するカスタマイズ方法を紹介しました。

サブサイトのフォーラムで以下のような質問がありました。 実は、moreタグ部分にプラグインなしでアドセンスを表示したく、色々探して...

今回は、上記方法で「広告を表示させていた代わりにウィジェットを表示させて、好きなものを手軽に表示させる」カスタマイズ方法の紹介です。

フォーラムにて「moreタグにウィジェットを表示したい」という趣旨のカスタマイズ方法の質問を受けたのでコードを書いてみました。
スポンサーリンク
レクタングル(大)広告

moreタグとは

とその前に、moreタグの簡単な説明をしておきます。

WordPressには、一覧ページなどで「続きを読む」を表示させるmoreタグという機能があります。

投稿管理画面のテキストエディターでは、「more」ボタンを押すと<!–more–>と入ります。

moreタグボタンを押すとタグが入る

ビジュアルエディターだとビジュアルエディターのmoreタグボタンボタンのやつです。

ビジュアルエディターんのmoreタグボタンをクリック

これにより、インデックス(一覧)リストなどで投稿が表示された際には、「続きを読む」と出てmoreタグ以降が表示されなくなる仕様です。

moreタグを挿入したリスト画面

それで、個別の投稿ページを表示させると、moreタグ以降も全文が表示されます。

moreタグ以降の本部も表示される

投稿ページには、当然ながらmoreタグらしきものは表示されていませんが、moreタグがあった部分には、以下のようなHTML要素が挿入されています。

<p>WordPressの投稿本文の前文です。</p>

<p><span id="more-87"></span></p>

<p>ここから投稿内容の本題に入ります。</p>

moreタグがあった部分には「<p><span id=”more-[投稿ID]”></span></p>」といったようなHTML要素が挿入されます。

今回は、この本文内のタグを置換することで「moreタグ」を「新しく追加したウィジェットエリア」に変更する方法を紹介したいと思います。

moreタグをウィジェットエリアに置換する方法

moreタグをウィジェットに置換するには、以下のコードをfunctions.phpにコピペするだけです。

///////////////////////////////////////
// moreタグ変換用ウィジェットの追加
///////////////////////////////////////
register_sidebars(1,
  array(
    'name'=>'moreタグ変換用',
    'id' => 'widget-more',
    'description' => 'moreタグを挿入した部分に置換して表示させたいウィジェットを挿入してください。',
    'before_widget' => '<div id="%1$s" class="widget-more %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<div class="widget-more-title">',
    'after_title' => '</div>',
  )
);

///////////////////////////////////////
//本文中の<!--more-->タグをアドセンスに置換
///////////////////////////////////////
function replace_more_tag_to_widget($the_content){
  if ( is_single() && //投稿ページのとき、固定ページも表示する場合はis_singular()にする
       is_active_sidebar( 'widget-more' ) //ウィジェットが設定されているとき
  ) {
    //ウィジェットエリアタグを記入
    ob_start();//バッファリング
    dynamic_sidebar( 'widget-more' );//moreウィジェットの表示
    $more_widget_area = ob_get_clean();
    $the_content = preg_replace( '/(<p>)?<span id="more-([0-9]+?)"><\/span>(.*?)(<\/p>)?/i', $more_widget_area, $the_content );
  }
  return $the_content;
}
add_filter('the_content', 'replace_more_tag_to_widget');

カスタマイズ手順としては、たったこれだけです。

functions.phpを編集する前は、ファイルのバックアップを行ってください。

動作確認

functions.phpにコードをコピペした後は、Wordpress管理画面の「ウィジェット」を開きます。

ウィジェットの設定

すると以下のように、新しく追加したウィジェットエリアが表示されています。

ウィジェット画面に「moreタグ変換用」ウィジェットエリア

子テーマのfunctions.phpにコードをコピペすると、親テーマのfunctions.phpよりも先に呼び出されてしまうため、ウィジェットエリアの先頭に追加されます。

あとは、好きなウィジェットを放り込めばOKです。

試しに「テキストウィジェットで広告を表示させる」ならば、こんな感じになります。

moreタグ変換用ウィジェットにテキストウィジェットを挿入

テキストウィジェット等を挿入して、広告コードを書き込んでください。

moreタグを用いて本文を書く

あとは、投稿画面からmoreタグを用いて本文を書きます。

今回はテスト的に、以下のように書き込んでみました。

moreタグを用いてテスト文章を挿入

ソースコードだとこんな感じ。

moreタグをウィジェットエリアに置換するテストです。

この↓部分にmoreタグが入っています。

<!--more-->

この↑部分にmoreタグが入っています。

果たしてうまくいくかどうか。

投稿画面を確認

こんな感じでポストして、公開された投稿を見ると、以下のようにウィジェットで挿入した広告が入っています。

moreタグ変換用ウィジェットに挿入した広告が表示される

もちろん、広告(テキストウィジェット)以外にも、好きなウィジェットを放り込めば、自由に表示させることが可能です(※CSSの調整とかは必要になるかも)。

まとめ

こんな感じで、「投稿本文のmoreタグの代わりに好きなウィジェットを表示させる」ことができました。

今回の方法は、そこまで利用するカスタマイズ方法ではないかもしれませんが、「moreタグの部分に広告を表示させて手軽に管理したい」とか「普段挿入しているmoreタグを有効活用したい」なんて場合には良いかもしれません。