Jetpackで表示される関連投稿の上にバナーを表示する方法

「JQuery before でJetpackで表示している共有の上にバナーを表示」で、Jetpackの機能で自動的に表示されるコンテンツの前にバナーを表示する方法を書きました。その後にJetpackで関連投稿の上にコンテンツを同じ方法で表示しようとしたところ、色々問題が起こり別の方法でうまくできましたのでそれについて書きます。

JQueryで挿入しようとしてエラーが出てしまった

追加したいなと思ったバナーは

40代からのロードバイク

の

これのような　関連記事　の上にある　Google Adsense と 楽天のバナーでした。

「JQuery before でJetpackで表示している共有の上にバナーを表示」で、このような場合にうまくバナーが挿入できていたのでこれと同じ方法でできると思っていました。そこで前回と同じようにコードをコピーしてJQueryで表示しようとしたのですがGoogle Adsense は表示されるのですが、楽天の方が表示されません。

何が起こっているのだろう、とchromeの

設定をクリック、

その他のツール＞デベロッパーツール　をクリックして

Console を確認すると、

Failed to execute ‘write’ on ‘Document’: It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

このようなエラーが出てしまっていました。

直訳↓
「ドキュメント」に「書き込み」を実行に失敗しました：それは、それが明示的にオープンされない限り非同期にロードされた外部スクリプトからの文書に書き込むことはできません。

どうもjavascriptをJQueryで貼り付けるということがあまりよろしくなくて、Google Adsenseは問題なかったのですが楽天の場合はダメで、このエラーが出てしまっているようでした。

functions.phpのadd_filterでcontentを書き換えようとしたけれどできない

と、言うことならば前回最後のころに「the_contentの書き換えでもいけるのでは？」と思っていたのでその方法でやればいいのかなと方向転換をしてみました。

使っている子テーマのfunctions.phpに

function ryus_adsense_rakuten_add($text) {
    $text = str_replace('関連を表示しているソースの最初部分', 'アドセンスのタグと楽天アフィリエイトのタグ 関連を表示しているソースの最初部分');
    return $text;
}
add_filter( 'the_content', 'ryus_adsense_rakuten_add');

こんな感じで書いてみました。そして確認してみましたが、関連 の上にバナーが出ません…。

よく考えてみるとJetpackも同じように add_filter( ‘the_content’,　を使ってコンテンツを編集しているのではないかと思いました。

wp-content\plugins\jetpack の中を検索したところどうも

add_filter( 'the_content', array( $this, 'filter_add_target_to_dom' ), 40 );

こんな感じで編集していることがわかりました。パラメータの最後に　40　とありますが、これは

WordPress Codex 日本語版: add_filter

によると、priority　という引数で なにも指定しなければ　10　ということになるようです。

数字が小さい順に実行されるので、functions.phpで追加したfunctionsはpriorityが10なのでjetpackのpriority:40より先に実行されてしまいます。ということは置き換えようとしたHTMLはまだ存在していないのでなにも置き換えられません。

自分の作ったfunctionをjetpackの編集後に動かしたかったので、

add_filter( 'the_content', 'ryus_adsense_rakuten_add', 999);

と、してみました(41以上ならなんでも良いと思いますが)

よし！これで表示されると思ったのですが、やっぱりなにも表示されません(>_<)

結果的にここが間違っていました(^_^;

論理的に考えてもう、、、よくわからなくなってしまいました(@@)。ここでちょっと人に相談してみたところ間違いに気づきました。

function ryus_adsense_rakuten_add($text) {
    $text = str_replace('関連を表示しているソースの最初部分', 'アドセンスのタグと楽天アフィリエイトのタグ 関連を表示しているソースの最初部分');
    return $text;
}

ここで　関連を表示しているソースの最初の部分　のコードをコピーするのに、いつもソースを見るのに使っているchromeの　設定　その他のツール＞デベロッパーツール　をクリックして

Elements をクリックして表示されるソース を使っていました。これが間違いでした。

Chrome:デベロッパーツールのElementsでは、HTMLの特殊文字は実体参照・コード参照ではなく、実際の字として表示される

上記のサイトにあるように、

その DOMエレメントツリーは、”Web ページの現在表示している状態の HTML”であり、Web ページのソースコードを表示したものとは異なります。

ということなんですね…。確かに今までちょっとソースとは違うなぁと思ってはいたのですがいつも使っていたのでついうっかりしてしまいました。

HTMLを見るには

右クリックをして　ページのソースを表示　をクリックします。これで表示したソースから該当部分を見ると

    <div id='jp-relatedposts' class='jp-relatedposts' >
    <h3 class="jp-relatedposts-headline"><em>関連</em></h3>

このようになっていました。idやclassがダブルコーテーションではなくシングルコーテーションでくくられています。Elementsで見たときはついていた　style　もHTMLにはついていません。

ということで、このソースを元にfunctions.phpの記述を変更したらうまくバナーが表示されるようになりました(^^)/

まとめ:今回学んだこと３つについて

今回３つの事を改めて学びました。

１つめはJQueryでjavascriptを読み込むのはあまりよろしくない(ややこしいものは？)こと
２つめはadd_filter(‘the_content’ で置換したい文字列がプラグインで編集されているときはそのプラグインより後に実行されるようにプライオリティの値を付けること
３つめはHTMLの書き換えをしたいときはデベロッパーツールのElementsではなく、ソースの表示の方を使うこと

です。１つのことをやろうとしただけでも色々な困難にぶつかり、また勉強になります(^_^;

[amazon_searchlink search=”アフィリエイト”]