AdSenseインフィード広告のための related.phpファイルの編集|ルクセリタス
“related.php" は関連記事の表示に関する設定を書きこむ phpファイルになります。
Webページの各スペースに広告を表示することができるのですが
インフィード広告は 関連記事のスペースに記事と同化させて表示することができる広告なのです。
ルクセリタスでは アドセンスのインフィード広告の簡単な設置方法として
ウィジェットを使い 関連記事の上下に設置するという方法もあるのですが
より本格的に関連記事に設置したいという場合、 FTPファイルの “related.php” へ直接編集する必要があります。
FTPファイルの編集は レンタルサーバー、または ブラウザに設置している FTPサーバーから行います。
今回、Xserverの FTPファイル画面での related.php の編集操作になりますが
他のサーバーでも 編集箇所は同じですので参考にしてみてください。
インフィード広告を準備する
ファイル編集の前に インフィード広告を作成しておきます。
作成がまだの場合、こちらをご参考に作成をしておいてください。
Googleアドセンス – 関連記事や新着記事欄に広告を設置する方法【ルクセリタス】
FTPファイル の編集
FTPファイルは レンタルサーバー Xserver の場合、
ログイン後にファイル管理画面を開き 編集するWebサイトURLから順にワードプレステーマまで進みます。
直接編集する場合も同じく サーバーを起動させファイル画面まで進みます。
① FTPファイルから 設定したいサイトのURLを選択し、設定画面まで順に進んでいきます。
右上にパスが表示されています。 分かりやすく左に書き出していますので
フォルダを順にクリックしていき ルクセリタスのフォルダ画面まで進みます。
ルクセリタス 親テーマからファイル をコピー
Luxeritasのフォルダにたどり着いたら、まず 親テーマ Luxeritas フォルダを開きます。
ルクセリタスの 親テーマには多くの ファイルが存在します。アルファベット順なので、
順番に下の方を探していただいてもいいのですが 検索ボックスを利用すると とても簡単です。
Ctrl + Fキー これは どの場面でも利用できる機能なので 覚えておくと便利です!!
related.php ファイルの コピーと作成
③ related.php ファイルは 関連記事のファイルになりますが、子テーマには存在しません。
子テーマに このファイルを作成するための作業を行います。
ルクセリタス 子テーマに related.php ファイルを作成
④ related.phpファイルの 横のチェックボックスにチェックを入れ
編集をクリックすると このような編集画面が表示されます。
⑤ このファイルを 丸ごとコピーします。
⑥ 次に related.php ファイルを 子テーマに 作成しますので 子テーマ(Luxech)のフォルダへ移動します。
⑦ ファイル作成から related.php ファイルを作成します。綴りを間違えないように 気を付けます。
コピーした related.php ファイルをペースト(貼り付ける)
⑧ 作成したファイルに コピーした related.phpファイルを ペースト・保存します。
親テーマと文字コードが違っていると表示エラーになってしまいますので注意して作成していきます。
これで 子テーマの related.phpファイル作成完了です。
インフィード広告を設置する
もう一度 先ほど子テーマに作成した related.php ファイルに戻り
準備しておいたインフィード広告のコードを related.php ファイルに書き込み 広告を完成させます。
この作業は WordPressサイトの テーマエディタからも編集できます。
サイト画面では 外観 → テーマエディター → テーマの編集( 子テーマ )
まれに テーマエディタからは エラーになってしまうという ケースがあるようで
その場合は、FTPファイル の方から 編集をしてください。
エックスサーバー FTPファイル 先ほどの 子テーマで作成した related.php ファイルです。
インフィード広告を挿入できる箇所は 関連記事の上部か下部の 2か所です。
relatedファイルの18行目くらいに <div id “related"> とあります。
関連記事上部に表示する場合
この <div id “related"> と <?php の間にコードを書き込みます。
1 2 3 4 |
<div class="toc clearfix"> 作成したインフィード広告のコードをここに貼り付ける </div> |
関連記事下部に表示する場合
relatedファイルの一番最後の </div> の上に同じように書き込みます。
上下、両方に記述し 広告を表示させることもできます。
追加するコード
追加するコードはこちらの <div class="toc clearfix"> ~ </div> の間の
作成したインフィード広告のコードをここに貼り付ける の部分に
AdSenseで作成した インフィード広告のコードを 入力して完成になります。