WordPress

[WP] AdSense をブログ本文の手前に自力で差し込むためにテーマをカスタマイズ

前回のエントリでサムネイル設定をすることでブログのコンテンツを直す羽目になったことをご報告した @azur256 です。

前回予告しましたが、コンテンツの構成を変えたことによって AdSense の位置が気に入らなくなってしまったので、今回、この位置を変更することにしました。

今までのレイアウト

いままでは Maseter Post Advert というプラグインを使って シングルページの時に 「続きを読む」 という表示をする <–!more> タグの部分に指定した AdSense コードを挿入してくれるプラグインを使っていました
WordPress › Master Post Advert « WordPress Plugins

ところがコンテンツのレイアウトを前回紹介した以下の構成にすると
EyeCatch 004


シングルページで見た時の AdSense の位置がいま一つになるわけです。
Adsense 001 1


AdSense の挿入位置を変えてみる

<!–more–>タグの位置に入れるわけにもいかず、一つ目の画像のしたいに入れる、というコードにすると画像の場所によって影響を受けてしまう。といっても AdSense のコードを毎回記事に埋め込むのも大変(忘れそう)なので、思いきってレイアウトを変えることにしました。

AdSense のコードを忍者おまとめボタンの直後に持ってくるように変更します。具体的には以下のようなイメージに。
Adsense 002 1


タイトルから本文までの距離が長くなってしまうのが、まだ調整の余地があるところですが、ひとまずはこの構成でいってみようと思います。

レイアウト変更の方法

ここに持ってくるためのプラグインを探すのも面倒ですし、先日、 忍者おまとめボタンをコードで追加した こともあるので、同じようにコードで差し込むことにします。

コードはいつものように子テーマの functons.php にフィルターフックで実装します。 AdSense のコードを変数に突っ込んでコンテンツの前に入れるだけ。
ちょっとだけ注意しなければならないのは、忍者おまとめボタンのコードとの順序です。忍者おまとめボタン → AdSense の順に表示したいので、AdSense のフィルターフックを忍者おまとめボタンのフィルターフックよりも前に実行されるように、先に記載します。逆にすると、AdSense が先に表示されます。

functions.php に記載したコードはこれ。


まぁ、いつものように AdSense コードを変数に設定する部分がちょっと面倒ですが、これだけの事でレイアウトの自由度を手に入れられるのであれば、私としては御の字です。

全ての人にオススメ出来る方法ではありませんが、興味のある方は是非やってみてはいかがでしょうか。
functions.php を触るのは WordPress の画面が全く表示されなくなるなどのリスクがありますので、バックアップは必ず取っておくことと、子テーマで実施することをオススメします。

WordPress で子テーマを作る方法は以下のエントリでご紹介していますので、宜しかったらどうぞ。

WordPress では、テーマとは違うスタイルを設定するためには、子テーマを作るのが正しいアプローチのようです。
今回は BirdTIPS の CSS の変更と ShareHTML 用のスタイルなどを定義するために子テーマを作ります。



WordPress 関連のエントリ


インストールや設定変更とデータ移行




プラグイン




バージョンアップ




カスタマイズ





Stinger 3関連





チューニング





MAMPを使ったバックアップサイトの構築





開発関連







最後まで読んでいただきありがとうございます。

follow us in feedly 左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいです


Facebook ページでも情報を発信していますのでよろしかったら「いいね!」をお願いします

RSSリーダへの登録は こちら からどうぞ。

URL
TBURL

コメントとトラックバック

  • Comments ( 0 )
  • Trackbacks ( 1 )

No commented yet.

  1. […] #12531;グルページの時に 「続… >>[WP] AdSense をブログ本文の手前に自力で差し込むためにテーマをカスタマイズ « 最近,気になったこと… Author: […]

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

フェイスブックでのコメント

Return Top