運営しているWordPressブログの記事内画像に「Pinterest」の保存ボタンが表示されていました。
以前何かしらの設定を行っていたようで、Cocoonの設定で関連項目をOFFにしても消えてくれず…
ChatGPTとの長い調査の末、Cocoonの子テーマの「body-top-insert.php」にスクリプトを発見。
今後似たようなトラブルがあったときのため、原因特定までの経緯と修正方法をまとめました！
まずは結論から
次のファイルからPinterestのスクリプトを１行削除することで表示されなくなりました。
wp-content/themes/cocoon-child-master/tmp-user/body-top-insert.php削除するのは次の１行です。保存後にサイトのキャッシュを削除して記事を確認すれば完了です。
<script async defer data-pin-hover="true" data-pin-round="true" src="//assets.pinterest.com/js/pinit.js"></script>Pinterestの画像保存ボタン
今回削除したのは、記事内の画像にカーソルを合わせると表示されるPinterestの保存ボタンです。
ブログ読者にとって必ずしも必要な機能ではなく、スマホ画面だと地味に目についてストレス。
サイトのデザインをシンプルにすることを目的に、保存ボタンの表示を停止することにしました。
おそらく以前にこちらのサイトを参考にスクリプトを貼っていたようです。https://developers.pinterest.com/docs/web-features/add-ons-overview/#about-add-ons
Cocoonの設定確認
Cocoon設定のSNS関連項目を確認し、Pinterestのシェアや画像共有に関する設定をオフにします。
しかし「Pinterestで画像をシェアする」のチェックを外しても、画像保存ボタンは消えませんでした。
そこで、ページのHTMLからPinterestのスクリプトが読み込まれている場所を調べることにしました。
ソースからスクリプトを探す
まずPinterestのボタンが表示される記事を開き、ブラウザで次の操作を行います。
- 対象の記事を開く。
- キーボードで「Ctrl + U」を押す。
- ページのHTMLソースを表示する。
- 「Ctrl + F」で
pinit.jsを検索する。
すると、次のような記述が見つかりました。
<script async defer data-pin-hover="true" data-pin-round="true" src="//assets.pinterest.com/js/pinit.js"></script>このコードがPinterestの画像保存機能を動かすためのJavaScriptです。特に注目したいのが次の部分。
data-pin-hover="true"
data-pin-round="true"画像にカーソルを合わせた際の保存ボタン表示に関係する属性が指定されています。
ここで、どこからこのスクリプトが読み込まれているのかを調べることにしました。
親テーマの中身を確認
Cocoonの親テーマには、JavaScriptをまとめて読み込むためのファイルがあります。
編集場所は、外観＞テーマファイルエディター＞Cocoon＞選択＞tmp＞footer-javascript.php
今回確認したのは「wp-content/themes/cocoon-master/tmp/footer-javascript.php」のファイルです。
ファイルを開いて pinit を検索すると、次のコードが見つかりました。
<?php //Pinterestシェア用のスクリプト
if (is_singular() && is_pinterest_share_pin_visible()): ?>
<script async defer data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
<?php endif //Pinterestシェア用のスクリプト ?>
<?php //Pinterestシェアボタン用のスクリプト
if (is_singular() && (is_top_pinterest_share_button_visible() || is_bottom_pinterest_share_button_visible())): ?>
<script>!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="//assets.pinterest.com/js/pinit_main.js";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pinterest-btn-js");</script>
<?php endif //Pinterestシェアボタン用のスクリプト ?>pinit.js：Pinterestの画像保存ボタン用pinit_main.js：記事上部・下部に表示するPinterestのシェアボタン用
この2つは役割が異なります。今回削除したいのは前者だけです。
子テーマで上書き（必要なし）
親テーマのファイルを直接編集すると、Cocoonのアップデート時に変更が失われる可能性があります。
そこで、親テーマのfooter-javascript.phpを丸ごとコピーし、子テーマ側の同じ階層に配置しました。
親テーマは「本体」、子テーマは「本体を保ったままカスタマイズするための上書き用」という役割。
wp-content/themes/cocoon-child-master/tmp/footer-javascript.phpそして、コピーしたファイルから画像保存ボタン用のコードだけを削除しました。
<?php //Pinterestシェア用のスクリプト
if (is_singular() && is_pinterest_share_pin_visible()): ?>
<script async defer data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
<?php endif //Pinterestシェア用のスクリプト ?>ところが、これだけではPinterestのスクリプトが消えませんでした。
ページのソースを再確認すると、先ほど見つけたものと同じ pinit.js が残っています。
しかも、親テーマにあったコードとは属性が少し異なっていました。
このことから、別の場所からスクリプトが追加されている可能性を考えました。
そのためこちらの子テーマに追加で作ったディレクトリは後ほど削除しました。
別の出力元を探す
次に、サーバーのファイルマネージャーを使って、wp-content 内のファイルを検索しました。
検索対象は「data-pin-round（画像保存ボタンを丸くするコード）」、ですが検索結果はなし。
ファイルマネージャーは契約しているレンタルサーバーのサイトからアクセス。
自分の場合はバリューサーバーの「まるっとプラン」を利用しており、こちらから入っています。
他のディレクトリを探す
ファイルマネージャーの検索だけでは見つからない場合もあるため、直接確認することにします。
まず子テーマの tmp-user にある「wp-content/themes/cocoon-child-master/tmp-user/」を確認。
Cocoonには、ユーザーが独自のコードを挿入しやすいよう用途別のテンプレートファイルがあります。
head-insert.php：<head>内にコードを挿入body-top-insert.php：<body>の始まり付近にコードを挿入footer-insert.php：フッターにコードを挿入main-before.php：メインコンテンツの直前にコードを挿入
今回は、ページソースに出力されたスクリプトの位置から body-top-insert.php を確認しました。
原因はbody-top-insert.php
body-top-insert.php を開くと、次のコードが見つかりました。
<?php
//<body>タグ直後編集用のテンプレートです。
//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。
?>
<?php if (!is_user_administrator()) :
//管理者を除外してカウントする場合は以下に挿入 ?>
<?php endif; ?>
<?php //全ての訪問者をカウントする場合は以下に挿入 ?>
<script async defer data-pin-hover="true" data-pin-round="true" src="//assets.pinterest.com/js/pinit.js"></script>原因は、ファイルの一番下に追加されていたPinterestのスクリプトでした。
Cocoonの標準設定とは別に、子テーマのユーザー用テンプレートへ直接コードが追加されていました。
スクリプトの内容は、ページのHTMLに表示されていたコードと完全に一致していました。
Pinterestのコードを削除
編集するファイルは「wp-content/themes/cocoon-child-master/tmp-user/body-top-insert.php」。
削除するのは次の1行だけです。
<script async defer data-pin-hover="true" data-pin-round="true" src="//assets.pinterest.com/js/pinit.js"></script>ほかのPHPコードは変更しません。削除後は、次のようになります。
<?php
//<body>タグ直後編集用のテンプレートです。
//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。
?>
<?php if (!is_user_administrator()) :
//管理者を除外してカウントする場合は以下に挿入 ?>
<?php endif; ?>
<?php //全ての訪問者をカウントする場合は以下に挿入 ?>編集したらファイルを保存します。
PHPファイル編集時は、念のため元ファイルのダウンロードなどバックアップを取ると安心です。
キャッシュを削除して表示を確認する
ファイルを保存したら、WordPress側のキャッシュを削除します。
Cocoonの管理画面にあるキャッシュ削除機能を利用し、ほかにキャッシュ系のプラグインやサーバー側のキャッシュを使用している場合は、そちらも必要に応じて削除します。
【画像10：Cocoonのキャッシュ削除画面】
その後、対象の記事をシークレットウィンドウで開いて確認します。
HTMLソースを開き、pinit.js を検索してみましょう。
該当するPinterestのスクリプトがなくなり、画像にカーソルを合わせても保存ボタンが表示されなければ成功です。
【画像11：修正後のページソース。pinit.jsが見つからない状態】
【画像12：修正後の記事内画像。Pinterestの保存ボタンが表示されていない状態】
8. 最初に作成したtmp/footer-javascript.phpは不要だった
今回の調査では、子テーマの tmp フォルダに footer-javascript.php を新しく作成しました。
しかし、最終的に原因が見つかったのは tmp-user/body-top-insert.php です。
つまり、今回の問題を解決するために、tmp/footer-javascript.php を子テーマ側に作成する必要はありませんでした。
親テーマの footer-javascript.php にもPinterestのコードは存在していましたが、こちらはCocoonの設定によって表示を判定する条件分岐が付いています。
if (is_singular() && is_pinterest_share_pin_visible()):一方、今回見つかった body-top-insert.php のコードには、そのような表示設定の条件分岐がありません。
そのため、Cocoonの設定をオフにしていても、直接追加されたPinterestのスクリプトが出力されていたわけです。
今回のように、子テーマの tmp/footer-javascript.php を今回の調査のためだけに作成し、ほかのカスタマイズを加えていないのであれば、不要になったファイルは削除して問題ありません。
wp-content/themes/cocoon-child-master/tmp/footer-javascript.phpただし、削除するのはこのファイルだけです。tmp フォルダそのものを削除してはいけません。
もともと別のカスタマイズを加えている場合は、その内容を確認してから判断してください。
9. Pinterestの自動投稿には影響する？
今回削除した pinit.js は、ブログの閲覧者が画像をPinterestに保存するためのブラウザ側のスクリプトです。
一方、RSS連携や外部サービス、APIなどを利用した記事の自動投稿は、別の仕組みで動作します。
そのため、今回の1行を削除することは、通常、Pinterestへの自動投稿を停止する操作ではありません。
ただし、自動投稿に利用しているサービスや連携方式によって異なるため、削除後に自動投稿が正常に動作することも確認しておくと安心です。
まとめ
CocoonでPinterestの画像保存ボタンが消えない場合、SNS設定だけでなく、子テーマに直接追加されたJavaScriptも確認してみましょう。
今回の解決方法は、次のとおりです。
- ページのHTMLソースで
pinit.jsを確認する。 - 子テーマの
tmp-user/body-top-insert.phpを開く。 - Pinterestのスクリプト1行を削除する。
- 保存してキャッシュを削除する。
- ページのソースと実際の表示を確認する。
今回の調査では、親テーマの tmp/footer-javascript.php を子テーマにコピーする作業も行いましたが、実際の原因は別の場所にありました。
ポイントは、ページに出力されているHTMLを手掛かりに、どのテンプレートからコードが挿入されているかを特定することです。
Cocoonには tmp-user のように、ユーザーが独自コードを挿入するためのテンプレートが用意されています。原因が見つからないときは、こうしたファイルも確認してみてください。
参考：Cocoon公式：子テーマで上書きカスタマイズ利用できるテンプレートの場所
ブログカスタムに関する記事
