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

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

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

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

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

moreタグとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

動作確認

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

ウィジェットの設定

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

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

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

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

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

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

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

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

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

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

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

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

投稿画面を確認

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

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

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

まとめ

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

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