以前、本文中の「moreタグ」に広告を表示するカスタマイズ方法を紹介しました。
今回は、上記方法で「広告を表示させていた代わりにウィジェットを表示させて、好きなものを手軽に表示させる」カスタマイズ方法の紹介です。
目次
moreタグとは
とその前に、moreタグの簡単な説明をしておきます。
WordPressには、一覧ページなどで「続きを読む」を表示させる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にコードをコピペした後は、Wordpress管理画面の「ウィジェット」を開きます。
ウィジェットの設定
すると以下のように、新しく追加したウィジェットエリアが表示されています。
あとは、好きなウィジェットを放り込めばOKです。
試しに「テキストウィジェットで広告を表示させる」ならば、こんな感じになります。
テキストウィジェット等を挿入して、広告コードを書き込んでください。
moreタグを用いて本文を書く
あとは、投稿画面からmoreタグを用いて本文を書きます。
今回はテスト的に、以下のように書き込んでみました。
ソースコードだとこんな感じ。
moreタグをウィジェットエリアに置換するテストです。 この↓部分にmoreタグが入っています。 <!--more--> この↑部分にmoreタグが入っています。 果たしてうまくいくかどうか。
投稿画面を確認
こんな感じでポストして、公開された投稿を見ると、以下のようにウィジェットで挿入した広告が入っています。
もちろん、広告(テキストウィジェット)以外にも、好きなウィジェットを放り込めば、自由に表示させることが可能です(※CSSの調整とかは必要になるかも)。
まとめ
こんな感じで、「投稿本文のmoreタグの代わりに好きなウィジェットを表示させる」ことができました。
今回の方法は、そこまで利用するカスタマイズ方法ではないかもしれませんが、「moreタグの部分に広告を表示させて手軽に管理したい」とか「普段挿入しているmoreタグを有効活用したい」なんて場合には良いかもしれません。