クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

【WordPress】記事の2つ目の見だし前に広告を表示する方法!

f:id:clrmemory:20171120081320j:plain

こんにちはクリアメモリです!

先日、WordPressのカスタマイズをしていたところ、広告の表示場所を見だしの直前にしようと思いました。

 

今までは「QuickAdSense」というWordPressのプラグインを使っていたのですが、このプラグインでは2つ目や3つ目などの見だし前に広告を表示させるという設定がなかったので、プラグインを使わずに設定してみることにしました。

 

 

はじめに

 

今回の方法では「function.php」などのコードを編集します。誤って変更を加えてしまうと、サイトが壊れてしまう可能性があります。

ですので、今回の作業は全て自己責任でお願いします。

 

「QuickAdSense」というプラグインを使えば

 

記事の最初

最後

途中

<! –more– >タグの後

 

などに広告を表示することができるのですが、幾つか目の見だしの前に表示するというような設定はありませんでした。

私は、QuickAdSenseの途中に表示する設定をしていたのですが、このようにしてしまうと、文の間に差し込まれてしまって見栄えが悪くなってしまっていました。

 

そこで今回紹介する方法を使って「○○番目の見だしの直前に広告を表示」してみましょう。

実際に広告を見だしの前に表示するとこのようになります。

 

スクリーンショット 2016-04-18 3.16.471

 

 

function.phpを編集

 

以下のコードをfunction.phpに追加してください。

 

function my_insert_after( $my_content , $my_ikutume, $my_kugiri, $my_insert ) {
   $kugirare_parts = explode( $my_kugiri, $my_content );
   foreach ($kugirare_parts as $index => $kugirare_part) {
   if ( trim( $kugirare_part )) {
      $kugirare_parts[$index] .= $my_kugiri;
   }
   if ( $my_ikutume == $index+1) {
      $kugirare_parts[$index] .= $my_insert;
   }
}
return implode( '', $kugirare_parts );
}
function my_insert_before( $my_content , $my_ikutume, $my_kugiri, $my_insert ) {
   $kugirare_parts = explode( $my_kugiri, $my_content );
   foreach ($kugirare_parts as $index => $kugirare_part) {
   if ( trim( $kugirare_part )&& $index!=0) {
   $kugirare_parts[$index] = $my_kugiri.$kugirare_parts[$index];
   }
   if ( $my_ikutume == $index && count($kugirare_parts)>$my_ikutume+1) {
   $kugirare_parts[$index] = $my_insert.$kugirare_parts[$index];
   }
}
return implode( '', $kugirare_parts );
}
add_filter( 'the_content', 'my_insert_ads_into_posts' );
function my_insert_ads_into_posts( $content ) {
   if(is_single()){
      $my_ad_code = 'アドセンスなどの広告コード';
   }else{
      $my_ad_code = '';
   }
   if (!is_admin() ) {
      //何番目の見だしの直前に表示するかの設定
      $content= my_insert_before( $content,2, '<h2' , $my_ad_code );
   }
   return $content;
}

 

このようなコードをfunction.phpに追加したら、広告コードなどを編集していきましょう。

$my_ad_code = ‘ アドセンスなどのコード’; というように書かれた「 ‘ '」の間に表示したい広告のコードを貼り付けてください。

 

また、ここで表示した広告のスタイルを編集したいときは「<div class=“xxx”></div>」で囲んであげることによって編集できるようになります。

例:$my_ad_code = ‘<div class=“ad”>広告コード</div>’;

 

広告の表示位置を変える

 

先ほどのコードでは「2番目の見だしの前に広告を表示」するコードだったのですが、3番目の見だしに変更したり、○行目に変更したりすることもできます。

 

見だしの数を変更

 

先ほどのコードの中にある以下のコードを探してください。

if (!is_admin() ) {
      //何番目の見だしの直前に表示するかの設定
      $content= my_insert_before( $content,2, '<h2' , $my_ad_code );
   }

 

$content= my_insert_before( $content,2, ‘<h2’ , $my_adcode ); を見てみると、「$content, 2」と書かれているのが見つかると思います。

この部分が○個目のXの前に表示するという意味になっています。このコードを例にとると、○が2、Xが<h2になっているので「2個目の<h2の前に広告を表示」ということになります。

 

この2を3に変更したりすることで、3番目の見だしの前に広告を表示するというような変更を加えることができます。

 

○行目に変更

 

広告を表示する場所を「○行目の前」というように変更することもできます。

先ほどのコードにあった「<h2」を「<p>」に変更してください。「<h2」というのは見だし2を表すもので、「<p>」は段落なので、改行をしたタイミングで追加されるものです。

 

<p>はWordPressの記事編集画面から「ビジュアル」を「テキスト」に変更すると確認できると思います。

記事のテキストを「<p> </p>」で囲んであるので、この<p>の前に広告を表示することもできます。

その際は先ほどと同じように「○番目」の部分も変更するのを忘れないようにしてくださいね。

 

まとめ

 

今回の方法を使えば、記事内の好きな位置に広告を表示することができるようになりました。

このコードを応用すれば任意の画像やリンクなども、記事ごとに編集する必要がなくなるかもしれませんね。

 

ぜひ活用してみてください。ではまた。

 

参考サイト:

WordPressで記事中の見だし直前にアドセンスを挿入する方法

新着記事