ストークの記事下にGoogle AdSenseの「関連コンテンツユニット」を設置する方法を紹介します。
関連コンテンツユニットを設置する
関連コンテンツユニットは、Google AdSenseの一定基準を満たした一部のサイトでしか使うことができません。自分のサイトで使えるかどうかは、AdSense ヘルプを参考に確認して下さい。
基本的に「新しい広告ユニット」の作成画面で表示されていない場合は使えません。
新しい広告ユニットの作成画面
SNS共有ボタンの上に設置
SNS共有ボタンの上に表示させたい場合は、「ウィジェット」で設置します。
関連コンテンツユニットをSNS共有ボタンの上に設置
カスタムHTMウィジェットを「PC：[広告]記事下コンテンツ」と「SP：[広告]記事下コンテンツ」に配置して、内容に関連コンテンツユニットのコードを貼り付けるだけです。
カスタムHTMLにコードを貼り付けて設置する
必要ならラベルも付けて下さい（ポリシー違反にならない様に注意）。
SNS共有ボタンの下に設置
SNS共有ボタンの下に表示させたい場合は、「phpファイル」を編集する必要があります。
関連コンテンツユニットをSNS共有ボタンの舌に設置
編集する前に必ずバックアップを取って下さい。また、僕は親テーマのファイルを直接編集していますが、子テーマで編集したい方は、対象ファイルを子テーマにコピーしてから編集して下さい。
今回は親テーマを編集する方法です。
ダッシュボードの外観「テーマエディター（テーマの編集）」から、画面右上の「stork」のリンクをクリックする及び編集するテーマを選択で「stork」を選択して、親テーマの編集画面を開きます。
storkの親テーマ編集画面を開く
テーマファイル「個別投稿（single.php）」を開き、「132行目の後」に関連コンテンツユニットのコードを貼り付けます（SNSパーツとCTAパーツの間）。
個別投稿（single.php）に関連コンテンツユニットのコードを貼り付ける
1カラムも使っている場合は、テーマファイル「singleparts_full.php」を開き、「167行目の後」にも関連コンテンツユニットのコードを貼り付けます（SNSパーツとCTAパーツの間）。
singleparts_full.phpに関連コンテンツユニットのコードを貼り付ける
これで関連コンテンツユニットの設置は完了です。
余白が気になる方は、関連コンテンツユニットのコードをdivタグで囲い、クラス属性を指定して調整して下さい。僕はスタイルシートに下記のクラス属性を追加して下の余白を調整しています。
|
1 2 3 |
div.relation { margin-bottom: 1.5em; } |
クラス属性を指定したduvタグでレイアウトを調整
ストークの関連記事を非表示にする
ストークの関連記事が必要ない場合は、「phpファイル」を編集して非表示にすることができます。
関連記事を非表示にする
テーマファイル「parts_singlefoot.php」を開き、「31～35行目まで」を削除します。
parts_singlefoot.phpのコードを削除
|
1 2 3 4 5 |
<?php if(function_exists('related_posts')): ?> <?php related_posts(); ?> <?php else :?> <?php get_template_part( 'related-entries' ); ?> <?php endif;?> |
関連コンテンツユニットと関連記事の内容が被って気になる方は、関連記事を非表示にして下さい。
最後に
関連コンテンツをSNS共有ボタンの上に設置したい時は、ウィジェットで簡単に設置できます。
ただ、それ以外の場所に設置する時は、基本的にphpファイルを編集しなければいけません。編集する時は事前に必ずバックアップを取って、不具合が起きた時は元に戻せる様にしておいて下さい。
最近のコメント