WordPressテーマ 「WING（AFFINGER5）」の、関連コンテンツユニット挿入方法について解説します。
いくつか運営するサイトの一つが、関連コンテンツユニット設置条件をクリアしたらしくアドセンスで選択できるようになっていました。
そのサイトの利用しているWordPressテーマは「WING（AFFINGER5）」。
簡単にカスタマイズできるテーマとして人気の高いAffinger5ですが、どこに貼ればいいのかわからず悩みました。
自分の備忘録として記事にしようと思いました。
設置に迷っている方、悩んでいる方がいればぜひ参考にしてください。
関連コンテンツユニットとは？
グーグルアドセンスを使用している人である程度の条件をクリアすると『関連コンテンツユニット』という新たな広告をブログに貼り付け、表示させることができます。
条件についての詳細はこちらの記事をご覧ください。
それでは設置方法について書いていきますね。
関連コンテンツユニットのコートを取得
グーグルアドセンスにログインします。
広告
↓
広告ユニット
↓
新しい広告ユニット
上記の手順で選択。
現在使用できる広告ユニット一覧が表示されます。
この中から「関連コンテンツ」を選びます。
「対象サイト」を選択、「広告ユニット名」を入力。
対象サイトは、広告表示させるサイトを選択します。
ユニット名は自分がわかりやすい名称を入力。
青い棒をドロップ＆ドラッグすると表示方法が変わります。
自分が好きなような大きさにできるんです。
できるだけスマートフォンでキレイに表示されるように選択します。
そして「保存してコードを取得」をクリック。
以下の画像のようにコードが表示されます。
「コードスニペットをコピー」をクリック。
とりあえずこのページを残しておきます。
WING（AFFINGER5）の子テーマでの作業
SNSボタン下に関連コンテンツユニットを表示させる方法について解説します。
- single-type1.php
- single.php
この2つのファイルをアフィンガー5の子テーマにコピー（アップロード）。
そして「single.php」ファイルの以下の部分を書き換えます。
- 編集前
|
1 2 3 |
include(TEMPLATEPATH . '/single-type2.php'); }else{ include(TEMPLATEPATH . '/single-type1.php'); |
- 編集後
|
1 2 3 |
include(STYLESHEETPATH . '/single-type2.php'); }else{ include(STYLESHEETPATH . '/single-type1.php'); |
グーグルアドセンスコードの貼り付け
SNSボタン下に関連コンテンツユニットを挿入。
「single-type1.php」ファイルの以下の部分を探します。
|
1 2 3 4 5 6 7 8 |
<p class="tagst"> <i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/> <?php the_tags( '<i class="fa fa-tags"></i>-', ', ' ); ?> </p> <?php endif; ?> /*ここにアドセンスコード*/ <aside> <?php st_author(); //著者リンク ?> |
|
1 |
<aside> |
の前にアドセンス広告のコードを貼り付けます。
これで関連コンテンツユニットの貼り付けが完了。
まとめ
無事に問題なく完了したかなと思ったのですが、スマートフォンで関連コンテンツを確認してみるとトップページに不具合がありました。
トップページのフッターの下に関連コンテンツユニットが表示されてしまいます。
なんかカッコ悪いorz。
トップページだけなんです。
誰かわかる人いたら教えてください。
お願いします。
カスタマイズを行う場合は必ずバックアップを取ってください。
カスタマイズは自己責任。
十二分に気をつけてください。
