JQuery before でJetpackで表示している共有の上にバナーを表示

このblogにはGoogle Adsenseのバナーを表示しているのですが、その位置が良くないという指摘を受けました。blogの記事の直下に出すようにという指示です。コンテンツにはJetpackのパブリサイズ機能で共有ボタンを表示しています。単純にはできなかったのでJQueryのbeforeを使って表示とコンテンツの間にバナーを移動したカスタマイズしました。その方法について書きます。

カスタマイズ前の状態を確認する

今、Google Adsenseのコードは使っている子テーマのcontent.php本文を表示した後に貼り付けてあります。それで表示すると、

こんな感じになります。

青色の文字で書いてあるところにバナーを移動したいのですが、content.php の the_content で本文を出している直下に書いても間にJetpackのパブリサイズ共有が入っているため、ここでは追加することができそうにありません。

JQueryを使って要素の前に文字列を入れる

そこで、JQueryのbeforeを使って、要素の前にGoogle Adsenseのコードを貼り付けようと思いました。Jetpackで表示している 共有 divsharedaddyというClassを指定してあります。この divでsharedaddyというClassの前にGoogle Adsenseのコードを挿入したいと思います。

before(content) jQuery日本語リファレンス

こちらを参考にコードを書いてみます。JQuery

こんな感じに書いて、子テーマのjsフォルダに adsenseInsert.js という名前で保存しました。

ここでかなり引っかかったのが before(“ここにコード”) で、コードを貼り付ける方法です。

Google Adsenseからコードをコピーしてきて、ダブルコーテーションは \ でエスケープします。しかしそれだけではエラーになってしまいました。結局は改行があるのがいけなかったので改行を削除して、保存しました。これでうまくうごきました。

WordPressでheaderにjsを読み込む方法は 「カテゴリー ドロップダウンをカスタマイズ テーマ以外のhtmlの修正」で行ったのと同じようにしました。使っている子テーマのfunctions.phpに書きます。

こんな感じです。もし、headerに複数のjsを読み込みたければ wp_enqueue_script を複数書きます。
* 2015/09/07 カテゴリーページなどの一覧にも複数のアドセンス広告が表示されてしまうため、is_single()とis_page()の条件を追加しました

カスタマイズした結果を見てみる

これでカスタマイズは終了したので表示してみました。

このように思った位置に移動しました。

おまけ:他の方法もありますね!

よく考えてみると the_content で既に共有の部分が入っているコードになっているのならば

を使って、「twentyfifteenの子テーマを作る フォント指定と固定メニュー」でやったように本文の中身をPHPで文字列置き換えとかができたなぁ、と思いました。

今回はちょっとJQueryのbeforeを使ってみたい気分でしたので(^_^;、このようにしましたが色々な方法でカスタマイズはできますね!

[Amazon sponsored link] jquery 関連本
兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る