[jquery]WordPressで任意の場所にGoogleAdsenseを表示させる方法

    WordPressでブログを本格的に始めて以来ずっと思っていたことがあります。

    jquery

    それは”アドセンスの位置を自由に調整したい”ということです。

    これを聞くと”好きな位置に貼れるじゃないか”という意見が出てくると思います。

    確かに表示させたい場所にコードを貼ればいいだけなのですが、表示させたい位置は決まっているから毎回コードをコピペで貼るのは面倒。

    プラグインを使えば自動化は出来るけど表示させれる場所は自由なように見えてそうじゃない。

    それをjqueryを使って解決したって話。

    プラグインで表示させれないところ、それは記事の中

    僕が知ってる範囲ではアドセンスを表示させることが出来るWordpressプラグインはいくつかあるけど”記事内の任意の場所”に表示出来るものはありませんでした。

    僕のブログは最後にあとがきを書くスタイルを取っているのですが、その前にアドセンスを表示したかったのです。

    insert-before-atogaki

    でもそれはただ、プラグインを入れるだけでは実現できませんでした。

    手動で実現しようと思えば、MarsEditから投稿する際に都度コードを入力すればいいのですが、それも面倒。

    まぁ半ば諦めてたのですが、最近jqueryを結構使うことが増え、jqueryなら任意の場所に要素を追加できるしこれならいけるんじゃね?と思ってやってみたら出来ました。

    参考にした記事

    今回は実現にあたり下記の記事を参考にさせていただきました。

    jQueryを使ってブログの読み込みを速くするAdSense最適化の方法 | AUTHORITY SITE

    ただ僕の環境だとこの記事の表記のままでは上手く行かなかったので、jqueryの部分は下記の様に変更しました。

    他は上記の記事のままです。

    変更した箇所

    参考記事のjqueryの部分が僕の環境では上手く動かなかったので下記のように直しました。

    [cc]$(document).ready(
    var tval = “

    Advertisment

    “;
    $(“.atogaki”).before(tval);
    $(“#ads-336”).empty();
    var c = $(“#adsref-336”);
    $(“#ads-336”).append(c);
    });[/cc]

    参考記事では複数の広告サイズに対応出来るような書き方をしていましたが、僕の場合あとがきの手前に表示させられればOKなので、直接IDを指定しています。

    スクリプトの流れ

    大まかにスクリプトの流れを書くと

    1. class atogakiの前にスポンサードリンクの表記とアドセンスの表示枠を作成
    2. アドセンス枠の中身を空にする
    3. 参考記事内で予め/body直前に入力しておいたアドセンスの情報をアドセンス枠の中に追加する

    といった感じです。

    参考記事では予め表示させる場所を記事内に書いておくと書いてありましたが、それだと毎回入力するのと手間が変わらないので、今まで通りブログを書くだけで広告の位置だけが自動で調整されるようにしました。

    jquery便利過ぎる。

    あとがき

    まだ休みボケが抜けない…

    SNSでもご購読できます。