当サイトはプロモーションを含む場合があります。

WordPress カスタマイズ

目次の上にアドセンス広告を自動で表示する方法(function php)

今回はブログの記事へ自動でアドセンスを表示させる方法を紹介していきます。

H2タグなどの見出しや記事の冒頭・終わりなど様々な場所へ自動で表示させる方法がありますが、今回は目次の上へ表示させたいという方に向けた内容です。

方法としてはPHPへコードを記載するという簡単な方法なので、注意点も目を通した上で試してみてください。

注意点

目次の上へ表示させるために「functions.php」へコードを入力します。

functions.phpは誤ったコードを入れてしまうとブログ全体が表示できなくなるといったエラーが起こってしまう場合があるため、下の注意点を確認しておきましょう。

・子テーマで編集を行う
・バックアップを取っておく

基本的にPHPを編集する場合は子テーマを使用するので、あらかじめ用意してそちらで編集するようにしてください。

バックアップに関しては今回はfunctions.phpを触るため、functions.php内のコードを元に戻せるようコピーしておくとよいです。

編集する場所はWordPressのダッシュボードにある「外観」→「テーマファイルエディタ(もしくはテーマ編集)」から行えますが、自身が使用しているサーバーのファイルマネージャーから行うのが一般的でおすすめです。

WordPressのダッシュボードで編集を行っても問題はありませんが、エラーが起きた場合ダッシュボードにすら入れなくなる場合があるので注意しておきましょう。

万が一ダッシュボードにも入れなくなってしまった場合は、落ち着いて使用しているサーバーから子テーマにある「functions.php」をバックアップしておいた内容に戻してください。

私はエックスサーバーを使用しているため、この記事ではエックスサーバーで行う手順を紹介します。

【初心者でも安心】たった10分で出来るWordPressブログの始め方

ほかのサーバーを使用している方でも流れ自体はわかると思うので参考に!

目次の上にアドセンス広告を自動で表示する手順

functions.phpにアドセンスコードを入力します。

アドセンスのコードは、目次の上へ表示させたい自分のコードを用意してください。

functions.phpへ貼り付けるコード

function add_ad_before_h2_for_3times($the_content) {
//AdSenseコードを記入
$ad = <<< EOF
//アドセンスコードを挿入//
EOF;

if ( is_single() ) {//投稿ページ
 $h2 = '/^<h2.*?>.+?<\/h2>$/im';
 if ( preg_match_all( $h2, $the_content, $h2s )) {
 if ( $h2s[0] ) {
 if ( $h2s[0][0] ) {
 $the_content = str_replace($h2s[0][0], $ad.$h2s[0][0], $the_content);
 }
 }
 }
 }
 return $the_content;
}
add_filter('the_content','add_ad_before_h2_for_3times', 10);

上のコードをfunctions.php内へ記述します。

「//ここにアドセンスコード挿入//」という部分を丸ごと消し、自身が表示したいアドセンスコードと差し替えてください。

差し替えた全体コードは下のようになります。

function add_ad_before_h2_for_3times($the_content) {
//AdSenseコードを記入
$ad = <<< EOF
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxx"
     crossorigin="anonymous"></script>
<!-- CF/H2上レスポンシブ -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="rectangle"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOF;

if ( is_single() ) {//投稿ページ
 $h2 = '/^<h2.*?>.+?<\/h2>$/im';//H2見出しのパターン
 if ( preg_match_all( $h2, $the_content, $h2s )) {
 if ( $h2s[0] ) {
 if ( $h2s[0][0] ) {
 $the_content = str_replace($h2s[0][0], $ad.$h2s[0][0], $the_content);
 }
 }
 }
 }
 return $the_content;
}
add_filter('the_content','add_ad_before_h2_for_3times', 10);

https://shu-sait.com/adsense-mokujimae-hyouji/
※こちらの記事を参考にさせて頂きました。

こちらのコードをfunction.phpへ記述します。

function.phpへコードを記述

ここではエックスサーバーでの手順です。

自身が使用しているサーバーの子テーマにあるfunction.phpを開きます。

function.phpを選択し「編集」を選択。

こちらへ先ほど用意したコードをそのまま貼り付けてください。

貼り付けた後、保存文字コードを「UTF-8」で更新します。

function.phpへのコード記述は以上です。

目次の上にアドセンスを表示させる方法として行う事もここまでなので、非常に簡単な手順ではないでしょうか。

上手く表示されると上のように自動で目次の上へ表示されているので、自身のブログ記事でも確認してみてください。

コードの記述が間違っていなければここまで終了となります。

是非自分のブログで目次の上へアドセンスを表示したい場合は試してみてください。

-WordPress, カスタマイズ