旧ストークの記事下に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ファイル」を編集して非表示にすることができます(子テーマで編集することをおすすめします)。
参考:関連記事(こちらの記事も人気です)を非表示にする方法 | OPENCAGE

関連記事を非表示にする
テーマファイル「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ファイルを編集しなければいけません。編集する時は事前に必ずバックアップを取って、不具合が起きた時は元に戻せる様にしておいて下さい。
最近のコメント