Cocoonで関連記事にインフィード広告を表示させる

こんにちは。

WordPress無料テーマで人気の高いCocoonを使っているサイトをよく見かけます。

私もリリースされた直後から利用している一人ですが、無料でこれだけのクオリティは素晴らしいのひと言です。

さて、Google AdSenseの各種広告を配置するのもラクに設定できるCocoonなのですが、ひとつ難問がありました。

それは投稿記事に関連記事を表示させるとき、記事の中にアドセンス広告をはさむという方法です。

ネットで調べてみると、TOPページの記事一覧に広告をはさむ方法はいくらでも紹介されていますが、投稿記事内にある関連記事内に広告をはさむ方法はほとんど見当たりませんでした。

Google AdSenseには一定の要件をクリアしたユーザには関連コンテンツが解放されます。

私は関連コンテンツに似たような表示を考えていたので、それに近いものを再現できたらという思いで取り組んでみました。

作成作業において以下のサイトを参考にしました。

インフィード広告作成から完成までの手順

作成から完成までの流れです。

①ウィジェットエリアの追加と作成
②親テーマからtmpにあるrelated-list.phpをダウンロードし、コードを書き換え
③インフィード広告の作成
④関連記事の表示スタイルと表示数の設定
⑤必要に応じて記事幅の調整と目視確認
⑥完成

下準備として、関連記事エリアへのウィジェットを作成します。

functions.phpにコードを書きます。

Cocoonの親テーマからtmpフォルダにあるrelated-list.phpをダウンロードして子テーマにアップロードします。

この時に元のコードの一部を書き換えるわけですが、表示させたい広告数によって適宜変更することになります。
(もし広告を1つでよいならそのままで)

記入するコードなどの解説はこちらのサイトを参照なさってください。

作成した広告ウィジェットエリアにウィジェットを設定します。

この時に使用するウィジェットが広告用かカスタムHTMLかで意見が分かれていますが、どちらでも可能でした。

アドセンス管理画面の広告→サマリー→広告ユニットごとに移動。

新しい広告ユニットの作成でインフィード広告を選択します。

作成方法は2種類で、「自分で広告スタイルを作成する(推奨)」と「手動で広告スタイルを作成する」があります。

今回私は手動で広告スタイルを作成しました。

作成する広告は、画像の下にテキストを配置したいので「上部の画像」を選びました。

以下、私が作成した設定の一覧です。(今後、変更することもあります)

グローバルオプション	選択したディスプレイ広告を許可する＝オンフォント＝Helvetica,Arial,sans-serif 背景＝#ffffff 枠線＝オフパディング＝9,15,5,5
イメージ	画像の縦横比＝1.91:1 幅＝100% パディング＝5,5,5,5
見出し	見出し＝短いスタイルフォントサイズ＝15px 左寄せ,太字,#333333 パディング＝1,1,5,1
説明	説明を表示＝オフ
URL	スタイルフォントサイズ＝11px 左寄せ,#3e3e3e パディング＝1,0,0,1
ボタン	フォントの色＝#777 枠線の色＝#777