ストークの記事下に関連コンテンツユニットを設置する方法

ストークの記事下にGoogle AdSenseの「関連コンテンツユニット」を設置する方法

ストークの記事下にGoogle AdSenseの「関連コンテンツユニット」を設置する方法を紹介します。

関連コンテンツユニットを設置する

関連コンテンツユニットは、Google AdSenseの一定基準を満たした一部のサイトでしか使うことができません。自分のサイトで使えるかどうかは、AdSense ヘルプを参考に確認して下さい。

基本的に「新しい広告ユニット」の作成画面で表示されていない場合は使えません。

新しい広告ユニットの作成画面

新しい広告ユニットの作成画面

SNS共有ボタンの上に設置

SNS共有ボタンの上に表示させたい場合は、「ウィジェット」で設置します。

関連コンテンツユニットをSNS共有ボタンの上に設置

関連コンテンツユニットをSNS共有ボタンの上に設置

カスタムHTMウィジェットを「PC:[広告]記事下コンテンツ」と「SP:[広告]記事下コンテンツ」に配置して、内容に関連コンテンツユニットのコードを貼り付けるだけです。

カスタムHTMLにコードを貼り付けて設置する

カスタムHTMLにコードを貼り付けて設置する

必要ならラベルも付けて下さい(ポリシー違反にならない様に注意)。

SNS共有ボタンの下に設置

SNS共有ボタンの下に表示させたい場合は、「phpファイル」を編集する必要があります。

関連コンテンツユニットをSNS共有ボタンの舌に設置

関連コンテンツユニットをSNS共有ボタンの舌に設置

編集する前に必ずバックアップを取って下さい。また、僕は親テーマのファイルを直接編集していますが、子テーマで編集したい方は、対象ファイルを子テーマにコピーしてから編集して下さい。

今回は親テーマを編集する方法です。

ダッシュボードの外観「テーマエディター(テーマの編集)」から、画面右上の「stork」のリンクをクリックする及び編集するテーマを選択で「stork」を選択して、親テーマの編集画面を開きます。

storkの親テーマ編集画面を開く

storkの親テーマ編集画面を開く

テーマファイル「個別投稿(single.php)」を開き、「132行目の後」に関連コンテンツユニットのコードを貼り付けます(SNSパーツとCTAパーツの間)。

個別投稿(single.php)に関連コンテンツユニットのコードを貼り付ける

個別投稿(single.php)に関連コンテンツユニットのコードを貼り付ける

1カラムも使っている場合は、テーマファイル「singleparts_full.php」を開き、「167行目の後」にも関連コンテンツユニットのコードを貼り付けます(SNSパーツとCTAパーツの間)。

singleparts_full.phpに関連コンテンツユニットのコードを貼り付ける

singleparts_full.phpに関連コンテンツユニットのコードを貼り付ける

これで関連コンテンツユニットの設置は完了です。

余白が気になる方は、関連コンテンツユニットのコードをdivタグで囲い、クラス属性を指定して調整して下さい。僕はスタイルシートに下記のクラス属性を追加して下の余白を調整しています。

クラス属性を指定したduvタグでレイアウトを調整

クラス属性を指定したduvタグでレイアウトを調整

ストークの関連記事を非表示にする

ストークの関連記事が必要ない場合は、「phpファイル」を編集して非表示にすることができます。

関連記事を非表示にする

関連記事を非表示にする

テーマファイル「parts_singlefoot.php」を開き、「31~35行目まで」を削除します。

parts_singlefoot.phpのコードを削除

parts_singlefoot.phpのコードを削除

関連コンテンツユニットと関連記事の内容が被って気になる方は、関連記事を非表示にして下さい。

最後に

関連コンテンツをSNS共有ボタンの上に設置したい時は、ウィジェットで簡単に設置できます。

ただ、それ以外の場所に設置する時は、基本的にphpファイルを編集しなければいけません。編集する時は事前に必ずバックアップを取って、不具合が起きた時は元に戻せる様にしておいて下さい。

functions.phpを編集したら画面が真っ白!WordPress管理画面にログインできない時の戻し方

2014.01.17
スポンサーリンク
スポンサーリンク