<>

Googleアドセンス – 関連記事や新着記事欄に広告を設置する方法【ルクセリタス】

Google AdSenseの一般的な広告 ディスプレイ広告の設定ができたら
次は インフィード広告を設置してみたいと思います。

インフィード広告は 関連記事や サイドバーの新着記事用の広告で
画像の大きさや文字など サイトの記事と同化するように設置することが出来ます。

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

関連記事へのインフィード広告|準備と設定

ディスプレイ広告では ウィジェットから簡単にサイドバーに設置することができましたが
このインフィード広告を関連記事に設置する場合は、FTPファイルを編集しなければいけません。

FTPファイルは レンタルサーバーからか FTPサーバーから操作する形になります。

編集内容  FTPファイルでの作業工程は 1~3
4は AdSenseで インフィード広告を作成した後の設定になります。

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

FTPファイル – Luxeritas 編集画面

Xserver の FTPファイルの画面を使って編集作業を行います。
他のサーバーでの作業も 編集箇所は同じですので参考にしてみてください。

① FTPファイルから 設定したいサイトのURLを選択し、設定画面まで順に進んでいきます。

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

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

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

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

③ related.php ファイルは 関連記事のファイルになりますが、子テーマには存在しません。
子テーマに このファイルを作成するための作業を行います。

④ related.phpファイルの 横のチェックボックスにチェックを入れ 編集をクリックすると
このような編集画面が表示されます。
親テーマから related.phpファイルのコピーのしかた

⑤ このファイルを 丸ごとコピーします。

⑥ 次に related.php ファイルを 子テーマに 作成しますので 子テーマ(Luxech)のフォルダへ移動します。

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

⑧ 作成したファイルに コピーした related.phpファイルを ペースト・保存します。

注意

親テーマと文字コードが違っていると 表示エラーになってしまいますので
確認お願いします。

これで 子テーマに related.phpファイル を作成完了です。

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

AdSense-インフィード広告の選択画面
Google AdSense ホーム画面から 広告をクリックし 広告ユニットごとインフィード広告 を選択します。

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

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

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

インフィード広告-プレビュー画面の見方
④ 検索が終了しましたら サイト画面内で設置できる広告枠が表示されます。
これで O.K. なら 次へ をクリック します。

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

インフィード広告の最終設定 - 詳細設定
広告ユニット名を設定します。
自分が管理するためのネーミングですが、どの場所に設置する広告なのかがわかる方が
分析などの際には役に立ちそうです。

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

取得したコードを設定

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

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

このコードで良ければ 作業は完了です。あとは FTPファイルへ書き込んで完了です。

ウィジェットでかんたん広告設置

ファイルなどの編集ナシで ウィジェットを使って 関連記事新着記事と同化した広告を表示することもできます。

私の場合、関連記事は related.phpファイルを編集していますが 新着記事に関しては
このウィジェットを利用しています。

今回は サイト画面を見ながら 広告の 画像や文字サイズの微調整をするために こちらの機能を使っていきます。

インフィード広告プレビュー - 新着記事のプレビュー画面
① こちらは サイドバーの新着記事に合わせた場合の例です。

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

③ 関連記事の場合は 関連記事、上下の設置ボックスがありますので 設置場所を
どちらか選択し、広告用のウィジェットを追加します。

④ あとは サイト画面で画像や文字のサイズを確認してみて 調整が必要であれば
広告の編集の 詳細設定から再調整します。

詳細設定について

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

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

もう一度 先ほど子テーマに作成した related.php ファイルに戻ります。

作成したインフィード広告のコードを related.php ファイルに書き込み 広告を完成させます。

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

まれに テーマエディタからは エラーになってしまうという ケースがあるようで
その場合は、FTPファイル の方から 編集をしてください。

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

インフィード広告を挿入できる箇所は 関連記事の上部か下部の 2か所です。
relatedファイルの18行目くらいに <div id “related"> とあります。

関連記事上部に表示する場合
この <div id “related"><?php の間にコードを書き込みます。

関連記事下部に表示する場合
relatedファイルの一番最後の </div> の上に同じように書き込みます。
上下、両方に記述し 広告を表示させることもできます。

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


こちらの記事を作成するにあたって こちらのサイトを参考にさせて頂きました。
ありがとうございました。
参考にさせて頂いたサイト:
Luxeritasの関連記事リストにインフィード広告を表示(プラグイン不要) | えいさら

GoogleFTP,Google AdSense,Luxeritas

Posted by 45