サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021年7月5日 09:49
お世話になります。
◎該当サイトのURL
https://okinawameguri.com/naha-steak
◎要望内容
Pinterestの保存ボタンについてなのですが、現在マウスホバーするとピンボタンが表示されるように設定しております。
現在スマートフォン表示の時に『吹き出しの画像にもピンボタンが表示されている（添付画像）』のですが、吹き出しの画像のみピンボタンを表示させないことはできますでしょうか？
PC版では吹き出しの画像をマウスホバーしてもピンボタンは表示されないようですので、スマホも同じ仕様に合わせていただけたら嬉しいです。
2021年7月5日 19:58
現在スマートフォン表示の時に『吹き出しの画像にもピンボタンが表示されている（添付画像）』のですが、吹き出しの画像のみピンボタンを表示させないことはできますでしょうか？
これは何も操作しなくても表示されているということですか？
僕のChromeのスマホ環境だと表示されていないようですが。
Topic starter
2021年7月5日 20:27
ご返信ありがとうございます。
>>これは何も操作しなくても表示されているということですか？
はい。スクロールしているだけで表示されます。
画像が小さいため、表示される場所はかなり限られているのですが、*一定の場所でスクロールが止まると表示されるようです。
*一定の場所というのは
スマホ画面の「ちょうど真ん中~真ん中の少し上あたり」に吹き出しの画像が止まった時です。
私のChromeのスマホ環境では表示されますので、お手数ですが小刻みにスクロールを試してみていただいてもよろしいでしょうか？
2021年7月5日 21:30
私の環境では、ただスクロールしただけでは、出てこないですね。
（スマホです。）
一度下の画像を長押しして、Pinterest保存が出るようになると、スクロールするとアグーちゃんにも出ることがあるようです。
（他の吹き出しの画像にも。）
この後も、リロードすると、またPinterestは出てこなくなります。
もとい…。
別な場所を長押しで選択する必要があるかも。。。です。
2021年7月5日 21:51
これって…。
<script async defer data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js">
なんでしょうか。
（だとすると、pinit.jsの仕様？）
「data-pin-hover="true"」とありますが。スマホだとhoverって訳でもないでしょうし、どういう動作になるのか。。。
例えば、以下のPinterestのヘルプセンターのものは効くものなのか。。。
自分のサイトのコンテンツがピンされるのを防ぐ方法
https://help.pinterest.com/ja/business/article/prevent-saves-to-pinterest-from-your-site
（上記の3つめ）
Topic starter
2021年7月6日 09:19
いつもありがとうございます。
＞＞私の環境では、ただスクロールしただけでは、出てこないですね。
→環境によっては、スクロールだけでは表示されないのですね。ありがとうございます。
Pinterestのヘルプセンターに記載されているタグを吹き出しの画像に追加してみたいのですが、どのように設定すれば追加できますでしょうか？
2021年7月6日 15:19
takuさん
ブロックエディタをご利用でしたら。。。
- ブロックを選択
- 縦三点リーダー
- HTMLとして編集
ただし、ブロックエディタは、ちょっと属性を追加しただけでも、ブロックとして編集できなくなってしまうという、不便なところはあります。
（表示には問題ないですし、HTMLとしては編集できるのですけど。）
（表示には問題ないですし、HTMLとしては編集できるのですけど。）
クラシックエディタをご利用でしたら、エディタ上部の「テキスト」タブを選択して、該当の箇所を編集。
という感じでしょうか。
ヘルプセンターの記載で気になっているのは、ファイル名と「nopin = "nopin"」の間にスペースがないことです。
一旦、ヘルプセンターの記載でやってみて、ダメだったらファイル名と「nopin = "nopin"」との間に半角スペースを空けると良いかも知れません。
そもそもこの属性が効くのか分かりませんけど。
Topic starter
2021年7月6日 15:26
2021年7月6日 15:28
takuさん
クラシックエディタの場合も記載しておりますよ。
画像を複数枚添付すると、どうしても再編集が必要なもので。
Topic starter
2021年7月6日 15:34
申し訳ございません。クラシックエディタの場合を見落としていました。
<img class="speech-icon-image" src="https://okinawameguri.com/wp-content/uploads/2020/07/64ae032485aad793090071f56de9d3e4.png" alt="アグー" /></figure>
知識不足で申し訳ございません。上記のような表記の場合
<img src = "foo.jpg"nopin = "nopin" />
はどんな感じで入れれば良いのでしょうか？
またもしこの属性が効いた場合、全ての吹き出しに適応させることは可能ですか？
This post was modified 3年前 by taku
2021年7月6日 15:38
takuさん
imgタグに対する属性ですから、imgタグ内に入れれば問題ないと思います。
とりあえず、ヘルプセンターの記載では、ファイル名の直後に入っていますから、その通りにするとすれば、以下のような感じでしょうか。
<img class="speech-icon-image" src="https://okinawameguri.com/wp-content/uploads/2020/07/64ae032485aad793090071f56de9d3e4.png" nopin="nopin" alt="アグー" />
ヘルプセンターの記載では、スペースは空いていないですが、とりあえず空けてみました。
【追記】
ヘルプセンターの記載では、以下でしたが。。。
nopin = "nopin"
とりあえず、ここの部分のスペースは詰めて、以下にしました。
nopin="nopin"
あまり変わらないとは思いますけど。
Topic starter
2021年7月6日 16:03
2021年7月6日 16:05
takuさん
それが、WordPressのクラシックエディタの癖です。
「ビジュアル」タブを選択してはダメなんです。
その前に更新しておかないと。
この現象は、今回のことに限らず、さまざまなタグなどで起きます。
クラシックエディタでは。
2021年7月6日 16:19
takuさん
アグーちゃんに設定されていることは確認しました。
スマホで確認しましたが、「保存」出てきますね。
私はAndroidですが、そのままスクロールしても出てきません。
しかし、他の画像を長押しして、「保存」を表示できる状態だと、吹き出しにも出てきます。
ちなみに、以下はtakuさんが設置なさったという事で良いのでしょうか。
<script async defer data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js">
この機能で「Pinterest」の「保存」ボタンが表示されるのですよね、きっと。
2021年7月6日 16:32
takuさん
なるほど、理解しました。
確かに、消えましたね。
むーん、難しいですね。
Cocoonの仕様というよりは、Pinterestの提供する「pinit.js」の仕様だと思います。
PCであれば、マウスホバーですが、それをスマホにたいしてどうするのかというところですよね。
ちなみに、もう1つ試してみましょうか。
先程は、Pinterest公式の「nopin="nopin"」という属性を指定しましたが。。。
ネットでは、「data-pin-nopin="true"」を指定するという情報も見つけました。
（ただし、公式ではありません。）
これを設定するとどうなのか、試していただけますか。
【追記】
えっ、あります？
消えたように思いましたが、「pinit.js」は。
わいひら reacted
2021年7月6日 16:41
takuさん
「footer-javascript.php」に記載はされていますね。
ただ、takuさんのサイトからは、先程の連絡いただいた時には消えていました。
検索したので間違いないと思います。
2021年7月6日 16:49
「」を指定することでスマホでもピンボタンが表示されなくなりました！
えーっ！
公式より、ネット情報が正しいんですか。。。
（もしかすると、日本語のヘルプセンターには載っていないだけかも。）
残念ながら、1つ1つ指定していくしかないと思います。
これは個人個人で何を保存させたいか違うでしょうし。
それに、既に書いてしまったものは、例えテーマ側で対応したとしても書き換わらないと思います。
テーマ側の仕様については、わいひらさんのご判断ですね。
2021年7月6日 16:53
Pinterest公式 Developers（英語版）に何やら記載があります。
https://developers.pinterest.com/docs/widgets/save/?
日本語にもして欲しい。。。
どこかにあるのかしら、日本語版も。
ぱっと見、言語選択はできない感じです。
Topic starter
2021年7月6日 16:56
>>公式より、ネット情報が正しいんですか。。。
→そのようです...。
>>残念ながら、1つ1つ指定していくしかないと思います。
→そうなんですね。大量に吹き出しを使用していますので、置き換えプラグインなどでなんとかできないか考えてみようと思います。
しかし非表示にする方法がわかってスッキリしました！今回も助けていただきありがとうございました！
2021年7月6日 17:04
置き換えプラグインなどでなんとかできないか考えてみよう
これなら簡単にできるはずですよ。
（吹き出しの画像の種類分の操作は必要かも知れませんけど。）
なんにしても、解決できて良かったです。
難易度高かったです。
2021年7月6日 19:54
子テーマのfunctions.phpに以下のコードを貼り付けるとどうなるでしょうか。
//Cocoonの吹き出し画像にPinterestのdata-pin-nopin="true"属性を付け加える
add_filter('the_content', function ($content){
$content = str_replace('class="speech-icon-image" ', 'class="speech-icon-image" data-pin-nopin="true" ', $content);
return $content;
});
※上記コードはテストコードであり動作確認をしていないので、予期せぬ不具合が出る可能性があります。動作保証はできませんのであらかじめご了承ください。不具合が出た場合は、コピペをもとに戻すと直るかと思います。
2021年7月6日 20:00
ありがとうございます。
しかし、既に置き換えプラグインで全ての吹き出しに「data-pin-nopin="true"」を追加してしまいました...。
今上記コードを貼り付けると重複してしまいますでしょうか？
2021年7月6日 20:02
「data-pin-nopin="true"」属性の詳しい解説ページがあった。
WordPress Pinterestの保存(Pin it)ボタンを指定画像だけに表示する方法｜[1件の画像]オプションじゃダメな理由 | 仕事のあれこれ
https://ippu-biz.com/development/wordpress/pinterest-view-pinit/
おそらく、「nopin="nopin"」は画像がPinterestサイトに登録されないようにする属性なんだと思います。
Googleだったら投稿をrel="noindex"するみたいな感じでしょうか。
2021年7月6日 20:02
今上記コードを貼り付けると重複してしまいますでしょうか？
想定通りの動作をしたとするならば重複します。
2021年7月6日 20:07
すいません、コードの間違いに気づきました。
以下のコードを修正しておいたので、変更をお願いします。
https://wp-cocoon.com/community/postid/52718/
2021年7月6日 20:14
動作確認してみたところ、上で書いたコードだと、吹き出しによっては置換されないケースもあるみたい。
こちらに変更すると動作すると思います。
//Cocoonの吹き出し画像にPinterestのdata-pin-nopin="true"属性を付け加える
add_filter('the_content', function ($content){
$content = str_replace('class="speech-icon-image"', 'class="speech-icon-image" data-pin-nopin="true"', $content);
return $content;
});
taku reacted
2021年7月6日 20:45
takuさん
すみません。
私が余計なことを言ってしまったばかりに、お手間をかけさせてしまいました。
保存しているソースじゃなくて、吐き出すソースを置換するイメージ？でできるんですね。
とりあえず、私のサーバーのテスト環境で、わいひらさんのコードを確認させていただきました。
私の環境では上手くいっていると思います。
ただし、3種類しか吹き出しは使っていません（回数はもう少しありますが）ので、たくさん吹き出しをご利用のtakuさんにご確認いただくのが良さそうです。
「data-pin-nopin="true"」属性は、やはり先程の英語版のサイトが正式なんでしょうね。
（この属性を知らないと、検索で引っ掛からなくて。）
Pinterest公式 Developers（英語版）
https://developers.pinterest.com/docs/widgets/save/?
taku reacted
Topic starter
2021年7月7日 11:25
@mk2_mk2 さん
とんでもないです！
コードを置き換えると同時にPageSpeed Insightsで指摘されていた吹き出し画像のサイズも修正しておりましたので、全く手間ではございませんでした。
コードのご確認もありがとうございます！
先程、子テーマのfunctions.phpにわいひらさんのコードを追記したところ、全ての吹き出しに「data-pin-nopin="true"」属性が追加されたようです。
スマホで見ても吹き出しの画像にはPinterestのピンボタンは表示されていませんでした。
やりたかったことが実現できました。今回も助けていただきありがとうございました！
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。