インフィード広告を関連記事や新着記事に設置する方法【ルクセリタス】

google AdSense の広告の設定、今回は インフィード広告の設置のしかたについてです。

インフィード広告は 関連記事やサイドバーの新着記事に設置する広告で
サイトの記事に同化するように設置することが出来るのです。

関連記事下にインフィード広告を設置したイメージ画像
一見、関連記事と間違えてしまう広告。このように 同化させることで
サイト全体のイメージを壊すことなく 広告を表示することができるのです。

ルクセリタスでの このインフィード広告 の設定は
FTPファイルの編集作業が 必要となりますが、分かりやすく解説していきます。

インフィード広告を掲載するためにやっておくこと

このインフィード広告、無料テーマの ルクセリタスでは
phpファイルの編集作業が必要になりますので 順に設定していきます。

編集内容  FTPファイルでの作業は この4点になります。

  1. ルクセリタス 親テーマの related.php ファイル をコピー
  2. ルクセリタス 子テーマに related.php ファイルを作成
  3. コピーした related.php ファイルを ペースト(貼り付ける)
  4. インフィード広告のための 追加コードの記述

この4番目の作業は AdSenseでインフィード広告を作成した後の設定になります。

FTPファイル – Luxeritas 編集画面

こちらは Xserver の FTPファイルの画面での解説になります。
他の場合も 編集は同じですので参考にしてみてください。

 エックスサーバーFTPファイル - related.phpの編集画面への移動説明
右上にパスが表示されています。 分かりやすく左に書き出していますので
フォルダを順にクリックしていき ルクセリタスのフォルダ画面まで 進んでください。

Luxeritasのフォルダにたどり着いたら、まず 親テーマ Luxeritas フォルダを開きます。
検索ボックス(キーボード)を使った ファイルの検索のしかた
ルクセリタスの 親テーマには多くの ファイルが存在します。
アルファベット順なので、順番に下の方を探していただいてもいいのですが
検索ボックスを利用すると とても簡単です。

Ctrl + Fキー これは どの場面でも利用できる機能なので
覚えておくと とても便利です!!

related.php ファイルの コピーと作成

related.php ファイルは 関連記事のファイルになります。

子テーマには この related.php ファイル がないので このファイルを
丸ごとコピーし、related.phpファイルを子テーマに 作成・中身をペースト
(貼り付け)する。という作業をしていきます。

related.phpファイルの 横のチェックボックスにチェックを入れ 編集をクリックすると
このような編集画面が表示されます。
親テーマから related.phpファイルのコピーのしかた
コピーができたら  子テーマ(Luxech)のフォルダへ移動します。

子テーマでファイルを新規作成
綴りを間違えないように related.php ファイルを新たに作成します。

そして 作成されたファイルにチェックを入れ 編集画面から開き
コピーした related.phpファイルを ペースト・保存します。
related.phpファイルの 文字コードが親テーマと同じになっているように確認しましょう。

これで 子テーマに related.phpファイル を作成することができました。
あとは これから作成する インフィード広告の コードを書き込むだけです。

コードを作成し、作業を完成させましょう。

インフィード広告を作成する

AdSense-インフィード広告の選択画面
それでは、インフィード広告の作成をしていきましょう。
広告ユニットごとの インフィード広告 をクリックします。

インフィード広告の設置場所イメージ - 関連記事-新着記事欄
関連記事・新着記事 の 設置場所はこんな感じ。

自動で広告スタイルを作成する - URLの入力
自動でスタイルを作成する を選択します。URLを入力しますが、
この URLは 関連記事 や 新着記事が表示される画面であれば どのページでも O.K.です。

あと、デスクトップ か モバイルを選択します。
私は パソコンがメインなので デスクトップを選択します。

フィードの検索中の画面
ページをスキャン をクリックすると サイトの検索・解析が始まります。

インフィード広告-プレビュー画面の見方
検索が終了しましたら サイト画面内で設置できる広告枠が表示されます。

プレビュー画面がうまく表示されない場合は 他のページで試してみてください。
左下のバーから URLと 画面のタイプの変更し、再スキャン できます。

これで O.K. なら 次へ をクリック します。

インフィード広告の最終設定 - 詳細設定
ここで広告ユニット名を設定します。
自分が管理するための ネーミングですので 覚えやすく設定しましょう。

詳細設定は お好みで設定しますが 選択したディスプレイ広告を許可する
チェックは外しておきます。保存してコードを取得 をクリックします。

取得したコードを設定

作成したインフィード広告のコードをコピー
取得したコードを 実際にサイトに掲載してバランスなどを 確認してみましょう。

詳細設定などが必要な場合は、もう一度 戻る を選択し設定しなおすこともできますし
後から、編集することもできます。

このコードで良ければ、作業完了です。FTPファイル へ書き込みましょう。

ウィジェットを使って バランスチェック

ウィジェットを利用すれば かんたんにサイト画面でイメージを確認することができます。

画像などの 微調整なども ウィジェットに設置することで すぐにサイト画面から
画像を確認することができるので とても 便利な方法として使っています。

設置のしかたは ウィジェットの 関連記事の下 を選択し 作成したコードを書き込みます。
ウィジェットでの Adsenseの使いかたについてはこちらを参考にお願いします。
AdSense ディスプレイ広告の作成のしかたと Luxeritas ウィジェットでの設置方法

詳細設定について

詳細設定は 6項目
インフィード広告 - 詳細設定項目
自動で広告スタイルを作成 で作成した場合、 見出しの色やフォントサイズも
サイトのイメージに合わせてくれていますので ほぼ 必要はないかと思いますが
微調整する場合は お好みでカスタマイズしてみてください。

related.phpファイルへ コードを追加

それでは、もう一度 related.php ファイル の編集作業に戻ります。

先ほど作成した インフィード広告のコードを related.php ファイルに書き込むのです。
このコードを書き込むことで 関連記事にインフィード広告を表示させることができます。

この作業は 先ほどの FTPファイルからと WordPressサイトの テーマエディタからも編集できます。

どちらも 同じ Luxeritas 子テーマの related.php ファイルを 表示・編集することができますが
テーマエディタの編集画面では  編集エラーになってしまうという ケースがあるようですので
その場合は、FTPファイル の方から 編集をしてください。

サイト画面では 外観 → テーマエディター → テーマの編集( 子テーマ )
テーマエディタから related.phpファイルの編集画面の開き方

エックスサーバー FTPファイル  先ほどの 子テーマで作成した related.php ファイルです。
インフィード広告のコードをrelated.phpファイルへ書き込み

インフィード広告の 関連記事への 設定箇所は上部か下部の 2か所に限られています。
ですので、上部に表示させるには <div id “related”> の下か
下部に設置する場合の </div> の上に記述 もしくは両方になります。

追加するコードはこちら

この <div class=”toc clearfix”> ~  </div> の間の
作成したインフィード広告のコードをここに貼り付ける の部分に
AdSenseで作成した インフィード広告のコードを 入力して完成になります。

ウィジェットで かんたん設置のしかた

ここでは ウィジェットを利用した 簡易的な設置方法について ご紹介していきます。

インフィード広告プレビュー - 新着記事のプレビュー画面
作成の手順は関連記事と同じです。

新着記事 - インフィード広告の設置場所
サイドバーの 新着記事の直下にアドセンスを設置します。

設置イメージ
インフィード広告-新着記事下のイメージ
どうでしょうか?若干のスペースは空いてしまいますが、違和感は さほど感じられませんよね?

ファイルなどの編集ナシで かんたんに広告を設置する方法として ごあんないさせて頂きました!

おわりに

今回は、簡単にインフィード広告を設置する方法として この方法をご案内させて頂きました。

こちらの記事を作成するにあたって こちらのサイトを参考にさせて頂きました。
ありがとうございました。

参考にさせて頂いたサイト:
Luxeritasの関連記事リストにインフィード広告を表示(プラグイン不要) | えいさら

また、FTPファイルの作成のしかたについて 内容を省略させて頂きましたので
分かりにくい場合はこちらの記事を参考にしてみてください。
FTPファイルの作成のしかたの参考記事:
【Google AdSense 】ads.txt ファイル作成とアップロードのしかた

Google