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

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

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

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

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

WordPress Codex 日本語版: add_filter

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

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

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

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

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

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

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

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

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

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

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

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

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

HTMLを見るには

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

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

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

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

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

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

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

[Amazon sponsored link] アフィリエイト 関連本
兎本美佳

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

シェアする

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

フォローする

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

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

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

トップへ戻る