以前2度にわたり、投稿本文中のH2見出し手前に手軽にアドセンス(広告)を表示する方法を書きました。
ただ、これらの方法だと、PHPの編集に慣れていない人は、Wordpressのテンプレートファイルにコードを組み込むときなどの編集に苦戦してしまうようです。
ならば、コピペ一発でテンプレートファイルの編集を終えることができ、広告などのコードを普段使い慣れたテキストウィジェットなどで貼り付けられるようにしてしまえば、特に難しいことをする必要はなく簡単にカスタマイズできるのではないかと思います。
今回は、その手軽なカスタマイズ方法を考えてみたので紹介します。
photo by Daniel Sempértegui
目次
カスタマイズの主な手順
今回の主な手順は以下になります。
- functions.phpにコードを貼り付ける
- テキストウィジェットから広告コードを貼り付ける
やることは、たったこれだけで済みます。特に、テーマファイルの編集はコードを1回だけコピペするだけで済むので、「編集に失敗してサイトが真っ白になる率」はかなり低くなると思います。
functions.phpにコードを貼り付ける
まずは、functions.phpの1番下あたりに、以下のコードを貼り付けます。
/////////////////////////////////////// // 投稿本文中ウィジェットの追加 /////////////////////////////////////// register_sidebars(1, array( 'name'=>'投稿本文中', 'id' => 'widget-in-article', 'description' => '投稿本文中に表示されるウィジェット。文中最初のH2タグの手前に表示されます。', 'before_widget' => '<div id="%1$s" class="widget-in-article %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-in-article-title">', 'after_title' => '</div>', )); /////////////////////////////////////// //H2見出しを判別する正規表現を定数にする /////////////////////////////////////// define('H2_REG', '/<h2.*?>/i');//H2見出しのパターン /////////////////////////////////////// //本文中にH2見出しが最初に含まれている箇所を返す(含まれない場合はnullを返す) //H3-H6しか使っていない場合は、h2部分を変更してください /////////////////////////////////////// function get_h2_included_in_body( $the_content ){ if ( preg_match( H2_REG, $the_content, $h2results )) {//H2見出しが本文中にあるかどうか return $h2results[0]; } } /////////////////////////////////////// // 投稿本文中の最初のH2見出し手前にウィジェットを追加する処理 /////////////////////////////////////// function add_widget_before_1st_h2($the_content) { if ( is_single() && //投稿ページのとき、固定ページも表示する場合はis_singular()にする is_active_sidebar( 'widget-in-article' ) //ウィジェットが設定されているとき ) { //広告(AdSense)タグを記入 ob_start();//バッファリング dynamic_sidebar( 'widget-in-article' );//本文中ウィジェットの表示 $ad_template = ob_get_clean(); $h2result = get_h2_included_in_body( $the_content );//本文にH2タグが含まれていれば取得 if ( $h2result ) {//H2見出しが本文中にある場合のみ //最初のH2の手前に広告を挿入(最初のH2を置換) $count = 1; $the_content = preg_replace(H2_REG, $ad_template.$h2result, $the_content, 1); } } return $the_content; } add_filter('the_content','add_widget_before_1st_h2');
大まかな説明は、コメントに書いてあるので参照してください。
上記のコードは、親テーマ、子テーマどちらに貼り付けても動作しますが、なるべく子テーマでカスタマイズした方が無難かと思います。
上記のコードを貼り付けると、Wordpress管理画面の「外観→ウィジェット」に以下のようなウィジェットエリアが作成されます。
テキストウィジェットから広告コードを貼り付ける
先程作成されたウィジェットエリアに、今度はテキストウィジェットを利用してアドセンス等の広告コードを貼り付けます。
作成された「投稿本文中」ウィジェットに、ドラッグ&ドロップでテキストウィジェットを放り込みます。
あとは、テキストウィジェットに「ラベルとなるタイトル」と「広告用のコード」を記入し保存します。
ウィジェットの設定を終えると、以下のように広告が表示されるようになります。
上記の、表示例は、Wordpressにデフォルトで入っているTwenty Fifteenをカスタマイズしてみた例です。
まとめ
今回のカスタマイズ方法の利点は、以下になります。
- テンプレートファイルの編集はfunctions.phpに1回コピペするだけと簡単
- 広告を貼るのにテンプレートを編集する必要がない
- 普段使い慣れたテキストウィジェットから手軽に広告を入れ替えることができる
- 広告に限らずとも、H2見出し手前に表示したいものを、自由に入れることができる
反面、難点を挙げるとすれば以下でしょうか。
- ウィジェットに無作為に入れると本文とウィジェットが混在し本文の意味がぼやける
あまりむやみやたらに、ウィジェットを放り込みさえしなければ、広告のメンテナンスもしやすくなって、結構管理が楽になるのではないかと思います。
わいひらさん、こんにちは。
WordPressの記事を参考にさせて頂いています、イクメン S と申します。
いつも良質な記事、ありがとうございます。
大変勉強になっております。
さて、本記事でご案内頂いたコードをh3へ置き換えて、私のブログも本文に広告を追加しようとしています。が・・・。
最後までしっかりできたと思っておりますが、うまくいきません。
http://ayubihs.com/baby-food-must-item3/
もしよろしければ、お助けいただけますと幸いです。
どうぞよろしくお願いいたします。
イクメン S