スポンサーリンク

STINGER・AFFINGERカスタマイズ

【AFFINGER4】関連コンテンツを通常ページとAMPページに設置する方法

投稿日:2017年10月24日 更新日:



こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。

WordPressテーマ「AFFINGER4」の通常ページとAMPページにアドセンスの関連コンテンツユニットを設置する方法をご紹介します。

最近になって、新たに「インフィード広告」や「記事内広告」などのネイティブ広告が追加されたことで、どこにどんな風に広告を置けばいいんだろう?と戸惑っている方も多いのではないでしょうか。

私自身も例外でななく、アドセンス、WordPressテーマ、AMP、SSL...

時代の流れについていくのは大変だなぁ。と常々感じる溜息混じりの毎日です(笑)

アドセンスの「関連コンテンツユニット」とは、記事下やサイドバーに設置することができる関連記事にアドセンス広告を挟んだもの。

他のアドセンス広告との大きな違いは、「承認済みのサイトのみ設置することができる」という点です。

関連コンテンツを利用できるのは特定のサイト運営者様だけです。ご利用いただくには、サイトのトラフィック量とページ数の最低要件を満たしている必要があります。関連コンテンツによってユーザーに優れたエクスペリエンスを提供していただくために、この要件を設定しています。関連コンテンツ ユニットを作成できるかどうかは、AdSense アカウントの [広告の設定] ページでご確認いただけます。

以前は、雲の上の存在のような「すごい人が使える広告」というイメージでしたが、最近は導入基準が随分と下がって、投稿記事数100記事前後で承認されるケースが増えてきている印象です。

アドセンスからのメールや管理画面に最適化案が表示されて気付く方が多いと思いますが、広告の設定→+新しい広告ユニット→「関連コンテンツ」の画面でも承認済みの所有サイトを確認することができます。

また、関連コンテンツユニットは承認済みのサイトのサブドメイン(サブディレクトリ)でも設置することが可能ですが、トップレベルドメインの記事(反対にサブドメインの記事)も関連記事として表示されることがあります。

WordPressのマルチサイトやサブドメインでサイト運営をされている方は、下記ページにて関連コンテンツの表示制御設定を行うことが可能です。

参考関連コンテンツの表示制御設定方法 サブドメインをを非表示にできます-ブロギングライフ

スポンサーリンク

広告コードの取得

承認済みのサイトがある場合は、下記のようにプレビュー画面が表示されます。

赤枠部分の「▼」をクリックすると、承認済みの他の所有サイトに切り替わります。

青枠部分の「広告で収益化」をONにすることで関連コンテンツユニットに広告が掲載されるようになりますが、初期段階ではONにできないサイトもあります。
その場合は、関連コンテンツユニットを設置後、1週間~2週間ほど時間を置いて再度確認してみてください。

当ブログはデフォルトをそのまま設置していますが、「スタイル」をクリックすると、フォントやサイズ、背景色などの変更ができます。

また、関連コンテンツはお好みに応じて表示形式をカスタマイズすることも可能です。

参考AdSense 関連コンテンツの表示カスタマイズ設定方法-ブロギングライフ

最後に「保存してコードを取得」→「コードスニペットをコピー」をクリック→メモ帳にコードをペーストしておいてくださいね。

子テーマファイルの作成

通常ページに関連コンテンツユニットを設置する場合→single-type1.phpsingle.php

AMPページに関連コンテンツユニットを設置する場合→single-amp.php

今回のカスタマイズは、上記ファイルを編集します。

親テーマのアップデートによってカスタマイズ内容が消えてしまわないように、必ず該当ファイルの子テーマを作成してください。
「single.php」は、初回カスタマイズのみ編集が必要になります。

いずれの子テーマファイルも、他のカスタマイズで既に作成済みの場合は、新たに作成する必要はありません。

AFFINGER4で初めて「single-type1.php」の編集をされる方はこちらの項目をご確認の上、必ず「single.php」の「TEMPLATEPATH」を「STYLESHEETPATH」に修正してください。
5,204view
WordPressのカスタマイズ ~子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法~ - ゼロからのWordPress入門【18】

前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。 もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。 ご自身 ...

通常ページへの関連コンテンツユニット設置方法

AFFINGER4の通常ページの「関連記事」の上に関連コンテンツユニットを設置する方法です。

WordPressダッシュボード→外観→テーマ→テーマの編集→「single-type1.php」(子テーマ)を開きます。

パソコンの「Ctrlキー」+「F」で表示される検索欄に 関連記事 と入力してマークされる下記コードを探してくださいね。

上記コードのすぐ上に、下記コードを追加します。

※【関連コンテンツコード】の部分は、あらかじめメモ帳にコピーしておいた広告コードに書き換えてください。
「おすすめ記事と広告」という見出しはお好きな文字に変更可能です。(見出しが必要ない場合は広告コードのみペースト)

関連コンテンツユニットの見出し(ラベル表記)について

関連コンテンツユニットの見出しには、「広告」(当ブログの場合は「Ad」)という文字を含ませるかラベル表記なしのいずれかが好ましいようです。

「おすすめ記事」「関連コンテンツ」など、広告の表記がない場合はポリシー違反となる可能性があるので注意が必要です。

参考関連コンテンツ 広告のラベル ポリシー違反にご注意下さい-ブロギングライフ

AMPページへの関連コンテンツユニット設置方法

AFFINGER4のAMPページの「関連記事」の上に関連コンテンツユニットを設置する方法です。

表示確認
Google Chromeで「F12」キーを押すとパソコンからスマホやタブレット各端末での表示確認ができます。(切り替え後は「F5」キーでリロードしてください)
AMPページhttps://kanamii.jp/1514/amp/

WordPressダッシュボード→外観→テーマ→テーマの編集→「single-amp.php」(子テーマ)を開きます。

パソコンの「Ctrlキー」+「F」で表示される検索欄に 関連記事 と入力してマークされる下記コードを探してください。

上記コードのすぐ上に下記コードを追加します。

※「***」の部分(2か所)は、あらかじめメモ帳にコピーしておいたご自身のコードの番号に書き換えます。
見出しの部分は、通常ページと同様に変更可能です。
height="1000"の部分は、関連コンテンツユニットの長さを指定するコードです。表示したい広告件数に応じて変更可能です。

参考AMP用ページにアドセンスの「関連コンテンツ」広告を設置する方法-iscle

以上、AFFINGER4の通常ページとAMPページにアドセンスの関連コンテンツユニットを設置する方法をご紹介しました。

最後までお付き合いくださりありがとうございます。

2,098view
【AFFINGER4】AMPページも自分色♪カスタマイズまとめ

当ページでご紹介しているカスタマイズは、AFFINGER5「WING」でも応用できます。 当ブログの開設当初に利用していたWordPressテーマは「STINGER PLUS」。 まだ1年の月日も経っ ...

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

スポンサーリンク

-STINGER・AFFINGERカスタマイズ

Copyright© Kanamii , 2024 All Rights Reserved Powered by AFFINGER5.