【SANGO】記事下に関連コンテンツっぽく広告を表示する方法

「Googleアドセンスの『関連コンテンツ』がいつまでたっても解放されない・・・」

 

「自分で『関連コンテンツ』っぽく広告を貼る方法って無いの？」

Googleアドセンスでブログやサイトに広告を貼っている人がひとつの目標としているのが「関連コンテンツ」の解放ですよね。

この関連コンテンツ、アクセスやページ数が少なくても開放されたという人もいれば、100記事・月間数万PVあっても解放されないという人も。

残念ながら解放の基準はGoogleのみぞ知る。

解放されない人はひたすらサイトの質を上げてGoogleが認めてくれるのを待つしかないわけですが・・・。

この記事では、

「関連コンテンツがなかなか解放されない」

「でも関連コンテンツっぽいことがやりたい！」

という人のために、テーマをカスタマイズして簡易的に関連コンテンツっぽく広告を貼る方法をお話します。

なお、この記事で紹介するのは、WordPressの有料テーマ「SANGO」を使ったものとなります。

【SANGOで関連コンテンツっぽく広告】カスタマイズの概要

最初に、WordPressの有料テーマ「SANGO」で関連コンテンツっぽく広告を貼るカスタマイズの概要です。

この記事のカスタマイズの完成形は下の画像のようになります。

記事下の「関連記事」を関連コンテンツ風に

この画像は、SANGOの標準機能「関連記事」の部分のスクリーンショットです。

最初と最後が広告になっているのがお分かりいただけると思います。

「関連記事」は、各記事の下に、その記事と関連性の高い他の記事へのリンクを自動的に表示してくれる便利な機能。

これでサイト内の回遊率を上げるというヤツですね。

ちなみにPCで表示すると以下のようになります。

これは、

SANGOをカスタマイズして「関連記事」の最初と最後にGoogleアドセンスのインフィード広告を挿入する

という方法を使っています。

カスタマイズの手順は、

  1. SANGO標準装備の「関連記事」をオンに
  2. Googleアドセンスのインフィード広告を作成
  3. SANGO親テーマのphpをカスタマイズ

となります。

この関連コンテンツっぽい広告はクリックされるのか？

この記事で紹介する関連コンテンツっぽい広告は、ユーザーにクリックされるのか？

広告設置から1週間のGoogleアドセンスの実績を見てみました。

すると、広告クリック数全体の約2%がこの「なんちゃって関連コンテンツ」の広告でした！

まあ、テスト期間がたった1週間と短いので、データの信頼性という点では正直なんとも言えませんけどね・・・。

いずれにしてもクリックはされていますので、この広告を設置することで少なからずクリック数・収益の増加が見込めるではないでしょうか。

カスタマイズする前の3つの注意点

実際にカスタマイズ作業に入る前に、この記事で紹介する方法の注意点をお話します。

注意点は以下の3つです。

  1. 広告が表示される場所は「関連記事」の最初と最後に固定
  2. サーバ上のファイルをカスタマイズするので初心者にはハードルが高い
  3. テーマSANGOがバージョンアップされたらカスタマイズ内容が消えてしまう

【注意点1】広告が表示される場所は関連記事の最初と最後に固定

まず注意点の一つ目ですが、

この記事で紹介する方法では、関連記事の途中に広告を表示することはできません。

広告が表示される場所は、関連記事の最初と最後の2か所に固定されます。

ご存知のとおり、本家Googleアドセンスの関連コンテンツでは、別記事へのリンクと広告が自動的にうまいぐあいに混じってレイアウトされます。

しかし、この記事で紹介するカスタマイズは、あくまで関連コンテンツ「風」の簡易的な方法ですので、あらかじめご了承ください。

【注意点2】サーバ上のファイルをカスタマイズする

このカスタマイズでは、サーバ上のファイルを直接カスタマイズします。

そのため、ftpソフトやテキストエディタと聞いて何のことかわからない人にはちょっとハードルが高いです。

サーバ上のファイルをおかしくしてしまうと、サイトが真っ白になって何も表示されなくなったり、最悪サイトが飛んでしまう可能性もあります。

この記事で紹介するカスタマイズによって発生した損害について、当方では責任を負いかねます。

自信が無い人はやめておいた方が良いでしょう。

なお、ftpソフトとテキストエディタが使えれば、カスタマイズするファイルは1つだけなので難しくありませんので、これを機会にぜひそういったソフトの使い方を覚えてみてはいかがでしょうか。

私が使っているソフトは、

  1. WinSCP（ftpソフト）
  2. Mery（テキストエディタ）

です。

どちらも無料で使えます。

【注意点3】テーマSANGOがバージョンアップされたらカスタマイズ内容が消える

このカスタマイズは、SANGOの親テーマのファイルをカスタマイズします。

そのため、テーマのバージョンアップがあると、それによってカスタマイズした内容が上書きされてしまいます。

つまり、SANGOがバージョンアップされる度に、また同じカスタマイズをしなければなりません。

ただその場合は、これからお話する手順1～3の3つめだけやればいいので、1回やってしまえばテーマのバージョンアップ時の作業量は多くありません。

【手順1】SANGO標準装備の「関連記事」をオンに

まずは、SANGOに標準装備されている「関連記事」をオンにします。

1)「関連記事」の設定画面を開く

WordPressの管理画面（ダッシュボード）の左側のメニューから、

  1. 外観
  2. カスタマイズ
  3. SANGOオリジナル機能の管理
  4. 関連記事（記事下）

という順序でクリックし、「関連記事」をセッティングする画面を開きます。

2) 関連記事の各項目を設定をする

関連記事の設定画面が開いたら、以下のように設定します。

  • 「記事下に関連記事を表示しない」のチェックを外す
  • 「関連記事のタイトル」はデフォルトの「関連記事」のままで可。お好みで「あなたにオススメの記事」などに変更しても良い
  • 「関連記事のデザイン」はタイプC（横長）
  • 「モバイル表示で関連記事をスライダー表示にしない」のチェックを入れる

 

デザインはタイプC
SANGOでは、関連記事のデザインをタイプA・B・Cの3種類から選ぶことができますが、

この記事のカスタマイズではタイプC（横長）を選んでください。

タイプA・Bの方が、デザイン面では本家Googleアドセンスの関連コンテンツっぽくなりますよね。

でも、A・Bだと各ボックスの横幅が小さすぎるためか、広告が表示されず空白になってしまいます。

デザインはタイプCを選ぶこと（画像出典:SANGO公式サイト）

以下、設定画面の後半です。

以降は基本的にデフォルトのままで構いません。

なお、関連記事の表示数は4～6ぐらいが良いかなと思います。

（これを8にすると、広告と関連記事あわせて10枠も表示されることになり、ちょっと多いかな・・・という感じです）

全ての項目の設定が終わったら、設定画面の上部にある「公開」ボタンをクリックして完了です。

どれか記事を開くと、記事の下に「関連記事」が表示されているはずです。

【手順2】Googleアドセンスのインフィード広告を作成

次に、Googleアドセンスのインフィード広告を作成します。

手順1
アドセンスのホーム画面を開く

まずは、Googleアドセンスのホーム画面にアクセス。

左側メニューの「広告」をクリックします。

手順2
新しい広告ユニット作成

「広告ユニットごと」のタブをクリック。

「新しい広告ユニットの作成」から「インフィード広告」をクリックします。

手順3
ページをスキャン

「インフィード広告の作成方法」というボックスが表示されます。

まず「自動で広告スタイルを作成する」にチェック。

次に、どれでも良いので個別記事ページ（記事下にSANGOの関連記事が表示されているページ）のURLを入力し「ページをスキャン」クリック。

なお、ここではスキャンするページをPC・モバイルの2つから選択できます。

サイトにもよりますが、現状アクセスの7割ぐらいはスマホからだと思いますので、モバイルを選ぶことをおすすめします。

手順4
プレビューから関連記事を選択

先ほど入力したURLの個別記事ページと、インフィード広告のデザイン・プレビューが左右に表示されます。

まずは右側の個別記事ページのプレビューを、記事下の関連記事が表示されるまで下にスクロール。

関連記事が表示されたら、そのどれか1つをクリックします。

すると、クリックした部分がオレンジの点線で囲まれて選択された状態になります。

右側の広告デザインが、左に表示されている「関連記事」のデザインと似た感じになっていることを確認したら、右下の「次へ」をクリック。

手順5
広告を編集

「インフィード広告の編集」画面が表示されます。

画面右の「広告ユニット名」に適当な名前を入れ、「保存してコードを取得」をクリックします。

なお、その他にも編集可能な項目がありますが、とりあえずデフォルトのままで良いかと思います。

手順6
広告コードをコピー

最後になります。

広告のコードが表示されますので、その全部を選択・コピーして、テキストエディタか何かに貼り付けて保存しておきます。

「作業完了」ボタンをクリックすれば、インフィード広告の作成は完了です。

【手順3】SANGO親テーマのphpをカスタマイズ

いよいよ最後の作業、SANGO親テーマのphpファイルをカスタマイズします。

手順1
ファイルをダウンロード
最初に、カスタマイズするphpファイルをダウンロードします。

カスタマイズするファイルは、SANGO親テーマの「functions」という名前のフォルダに入っています。

ftpソフトを使って、フォルダを以下の順番でたどっていけば見つかるはずです。

/wp-content/themes/sango-theme/library/functions

funtionsフォルダの中に「entry-functions.php」というファイルがあります。

この記事では、このファイルをカスタマイズすることになります。

まずはこのファイルをPCのデスクトップなどにダウンロードします。

手順2
バックアップの作成
次に、今ダウンロードした「entry-functions.php」ファイルのバックアップを作成します。

これは、もしカスタマイズがうまくいかなかった時にすぐ元に戻せるようにするため。

例えば「entry-functions_backup.php」などの名前を付けて、必ずバックアップ（コピー）を取っておきましょう。

手順3
phpファイルの編集
バックアップが済んだら、始めにダウンロードした「entry-functions.php」ファイルをテキストエディタで開きます。

下にスクロールしていくと「//関連記事の出力」と書かれている部分が見つかるはずです。

コード
// 関連記事の出力
if (!function_exists('output_sng_related_posts')) {
function output_sng_related_posts()・・・・

ここが、この記事でカスタマイズする部分になります。

「//関連記事の出力」のコードの途中2か所に、先ほど取得したGoogleアドセンスのインフィード広告のコードを貼り付けます。

なお、広告コードには、先頭に<li>、最後に</li>を付けてください。

ちょっと長いですが、広告コードを貼り付ける場所、貼り付けた後の完成形は以下のようになります。

青地が貼り付けた広告コード、赤字が付け加えた<li>、</li>です。

// 関連記事の出力
if (!function_exists(‘output_sng_related_posts’)) {
function output_sng_related_posts()
{
$related_posts = sng_get_related_posts_array();
if(!$related_posts) return;

$design = get_theme_mod(‘related_posts_type’) ? esc_attr(get_theme_mod(‘related_posts_type’)) : ‘type_a’;
$design .= get_option(‘related_no_slider’) || ($design == ‘type_c’) ? ‘ no_slide’ : ‘ slide’;

if (get_option(‘related_post_title’)) echo ‘<h3 class=”h-undeline related_title”>’ . get_option(‘related_post_title’) . ‘</h3>’;
echo ‘<div class=”related-posts ‘ . $design . ‘” ontouchstart =””><ul><li><script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-format=”fluid”
data-ad-layout-key=”XXXXXXXXX”
data-ad-client=”ca-pub-XXXXXXXXXXXXXXXX”
data-ad-slot=”XXXXXXXXXX”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</li>‘;
foreach ($related_posts as $related_post) :
$src = featured_image_src(‘thumb-520’, $related_post->ID);
$title = $related_post->post_title;
?>
<li>
<a href=”<?php echo get_permalink($related_post->ID); ?>”>
<figure class=”rlmg”>
<img src=”<?php echo $src; ?>” alt=”<?php echo $title; ?>”>
</figure>
<div class=”rep”><p><?php echo $title ?></p></div>
</a>
</li>
<?php
endforeach;
wp_reset_postdata();
echo ‘<li><script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-format=”fluid”
data-ad-layout-key=”XXXXXXXXX”
data-ad-client=”ca-pub-XXXXXXXXXXXXXXXX”
data-ad-slot=”XXXXXXXXXX”></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></li></ul></div>’;
} /* end related posts function */
}

 

広告コードが上のとおり正しく挿入されていることを確認したら、ファイルを上書き保存します。

手順4
ファイルをアップロード
先ほど広告コードを挿入した「entry-functions.php」ファイルを、ftpソフトを使ってアップロードします。

アップロードする場所は、最初に「entry-functions.php」ファイルがあった、SANGO親テーマの「functions」フォルダです。

/wp-content/themes/sango-theme/library/functions

なお、この手順では、元々あったentry-functions.phpを上書きする形になります。

「上書きして良いですか？」といったメッセージが表示されるかもしれませんが、そのまま上書きして構いません。

これで全てのカスタマイズ作業は終わりです。

広告が正しく表示されるまでには時間がかかる

正しくカスタマイズが完了しても、広告が正しく表示されるまでには時間がかかります。

カスタマイズ直後に個別記事ページを表示すると、

  • 広告が表示されるはずの場所が空白になっている
  • バナー広告など、関連記事とデザインが合わない広告が表示されている

といったことが起こります。

下の画像は、カスタマイズが終わってまもない時点で個別記事を表示した時のスクリーンショット。

関連記事の最初に表示された広告が、バナー広告になっちゃってますよね。

このような場合は、数時間後にもう一度ページを開いてみてください。

以上、WordPressの有料テーマ「SANGO」を使った、簡易的にGoogleアドセンスの関連コンテンツっぽく広告を貼るカスタマイズでした。

コメントを残す

メールアドレスが公開されることはありません。