AFFINGER3 Wordpress

【AFFINGER3】子テーマを使って、トップの記事一覧に広告(Adsense)を入れてみる。設定方法を画像で解説!

投稿日:

wp_logo

STINGER5を使ってた時もやってた事だけど、テーマ変更に伴いこのへんの設定はやり直し。

AFFINGER3はリリースからまだ日が経ってないので当然情報も少ない。

ベース部分は変わってないだろうってことで、AFFINGER2で情報を探してみるとそれらしいのが見付かった。

参考にさせて頂いたのはこちら

AFFINGER2でトップ記事一覧に広告を入れる方法♪

~サクセスクエスト様~

とりあえずAFFINGER2のカスタム方法をそのまま試したらいけた。

ただ僕の場合は子テーマでカスタムしてみたので、そっちの方法を少し説明してみます。

 

子テーマに、itiran.thumbnail-on.phpのファイルをそのままコピー

親テーマAFFINFER3から、itiran.thumbnail-on.phpファイルを子テーマにそのままコピーします。

2016-02-24 (1)

やり方は人によって違うと思いますが、まずFFTPを使って[自身のページ>public_html>wp-content>themes>sffinger3]の中にあるitiran.thumbnail-on.phpをダウンロード

どこにダウンロードしてもいいですが、わかりやすいのでデスクトップがいいでしょう。

2016-02-24 (3)

次に[自身のページ>public_html>wp-content>themes>sffingerchild3]を開いて、さきほどダウンロードしたitiran.thumbnail-on.phpをアップロード

これでitiran.thumbnail-on.phpを子テーマの中に設置完了。

 

子テーマを編集する

 icon-check-square-o itiran.thumbnail-on.phpの編集

2016-02-24 (5)

WORDPRESS画面を開いて[外観>テーマの編集]を開き、右上の編集するテーマを選択からaffingerchild3を選択します。

その中にitiran.thumbnail-on.phpがあるのを確認してください。
なければファイル移行がうまくいってないので、上の項目を見直しです。

itiran.thumbnail-on.phpを開くと、上から2段目にある

の部分を

に書き換えます。

2016-02-24 (7)

次に同itiran.thumbnail-on.phpファイルのまま下方へ移動し、上図赤線部分にコードを挿入します。

とりあえず< /dl >のうしろにカーソルを合わせて、エンターキーで改行しスペースを空けると良いでしょう。

2016-02-24 (8)

こんな感じ。

その空けたスペースに

このコードを挿入します。

2016-02-24 (9)

挿入した後の画像がこちら。

ここまでできたら、『ここに広告のコードを挿入』の部分にAdsenseコードを入れてやればオッケーです。

広告はレスポンシブが良いみたいです。
レスポンシブ広告ってなんぞ?って方はコチラ

左下の【ファイルを更新】を押すのを忘れずに。

 

icon-check-square-o style.cssの編集

2016-02-24 (10)

右側からstyle.cssを選択し、以下のコードを追記します。

2016-02-24 (11)

追記するとこのようになると思います。

今後子テーマでカスタムしていくに当たって、何のコードだったかわからなくなるといけないので『/* ○○の設定 */』のように買いておくと良いでしょう。

『/* */』は注記を意味するコードで、この中にある文字列はページに反映されません。

ここでも忘れずに【ファイルを更新】を押して作業終了です。

2016-02-24 (12)

記事一覧の3行目、7行目に広告が挿入されます。

この挿入位置にはAdsenseの規約的な意味(同時表示時にいくつまでしか表示しちゃダメ的なやつ)があるので、触らないほうが良いでしょう。

そして、上の画像でわかるように広告の表示がおかしくなってます。

広告ユニットを作ったばかりだと、設定から表示まで最大60分ほどかかる場合があるようです

今回新しく広告ユニットを作ってみましたが、設定から反映までには5分ほどでした。

なのでこんな風に表示されても、少し時間がたてば

2016-02-24 (13)

この通り。

特にほかの部分をいじらなくても、綺麗に中央に配置されたのでこれで作業完了です!

 

336px

スポンサーリンク

336px

スポンサーリンク

-AFFINGER3, Wordpress

Copyright© なおろぐ , 2016 AllRights Reserved.