このblogにはGoogle Adsenseのバナーを表示しているのですが、その位置が良くないという指摘を受けました。blogの記事の直下に出すようにという指示です。コンテンツにはJetpackのパブリサイズ機能で共有ボタンを表示しています。単純にはできなかったのでJQueryのbeforeを使って表示とコンテンツの間にバナーを移動したカスタマイズしました。その方法について書きます。
カスタマイズ前の状態を確認する
今、Google Adsenseのコードは使っている子テーマのcontent.phpで本文を表示した後に貼り付けてあります。それで表示すると、
こんな感じになります。
青色の文字で書いてあるところにバナーを移動したいのですが、content.php の the_content で本文を出している直下に書いても間にJetpackのパブリサイズ共有が入っているため、ここでは追加することができそうにありません。
JQueryを使って要素の前に文字列を入れる
そこで、JQueryのbeforeを使って、要素の前にGoogle Adsenseのコードを貼り付けようと思いました。Jetpackで表示している 共有 は divにsharedaddyというClassを指定してあります。この divでsharedaddyというClassの前にGoogle Adsenseのコードを挿入したいと思います。
before(content) jQuery日本語リファレンス
こちらを参考にコードを書いてみます。JQueryは
jQuery(function($){
$("div.sharedaddy").before("<p style=\"margin-top:1em; margin-bottom:1em;\">【スポンサードリンク】</p><script async src=\"//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script><!-- ryusblog_レスポンシブ --><ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-2520241393280261\" data-ad-slot=\"1135556397\" data-ad-format=\"auto\"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>");
});
こんな感じに書いて、子テーマのjsフォルダに adsenseInsert.js という名前で保存しました。
ここでかなり引っかかったのが before(“ここにコード”) で、コードを貼り付ける方法です。
Google Adsenseからコードをコピーしてきて、ダブルコーテーションは \ でエスケープします。しかしそれだけではエラーになってしまいました。結局は改行があるのがいけなかったので改行を削除して、保存しました。これでうまくうごきました。
WordPressでheaderにjsを読み込む方法は 「カテゴリー ドロップダウンをカスタマイズ テーマ以外のhtmlの修正」で行ったのと同じようにしました。使っている子テーマのfunctions.phpに書きます。
// wp-config/theme/[子テーマ名]/functions.php
function my_scripts() {
if (is_single() or is_page()){//投稿記事か固定ページ
wp_enqueue_script( 'adsenseInsert', get_bloginfo( 'stylesheet_directory') . '/js/adsenseInsert.js', array(), false, true );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts');
こんな感じです。もし、headerに複数のjsを読み込みたければ wp_enqueue_script を複数書きます。
* 2015/09/07 カテゴリーページなどの一覧にも複数のアドセンス広告が表示されてしまうため、is_single()とis_page()の条件を追加しました
カスタマイズした結果を見てみる
これでカスタマイズは終了したので表示してみました。
このように思った位置に移動しました。
おまけ:他の方法もありますね！
よく考えてみると the_content で既に共有の部分が入っているコードになっているのならば
add_filter( 'the_content', 'contentの中身をPHPで編集するfunction' );
を使って、「twentyfifteenの子テーマを作る フォント指定と固定メニュー」でやったように本文の中身をPHPで文字列置き換えとかができたなぁ、と思いました。
今回はちょっとJQueryのbeforeを使ってみたい気分でしたので(^_^;、このようにしましたが色々な方法でカスタマイズはできますね！
[amazon_searchlink search=”jquery”]
コメント