Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

Pinterestの保存ボタンについて
 
共有:
通知
すべてクリア

[解決済] Pinterestの保存ボタンについて

33 投稿
4 ユーザー
6 Reactions
2,182 表示
taku
 taku
(@taku)
Estimable Member Registered
結合: 4年前
投稿: 135
Topic starter  

お世話になります。

 

◎該当サイトのURL

https://okinawameguri.com/naha-steak

◎要望内容

Pinterestの保存ボタンについてなのですが、現在マウスホバーするとピンボタンが表示されるように設定しております。

 

現在スマートフォン表示の時に『吹き出しの画像にもピンボタンが表示されている(添付画像)』のですが、吹き出しの画像のみピンボタンを表示させないことはできますでしょうか?

 

PC版では吹き出しの画像をマウスホバーしてもピンボタンは表示されないようですので、スマホも同じ仕様に合わせていただけたら嬉しいです。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17013
 
投稿者:: @taku

現在スマートフォン表示の時に『吹き出しの画像にもピンボタンが表示されている(添付画像)』のですが、吹き出しの画像のみピンボタンを表示させないことはできますでしょうか?

これは何も操作しなくても表示されているということですか?

僕のChromeのスマホ環境だと表示されていないようですが。


   
taku
 taku
(@taku)
Estimable Member Registered
結合: 4年前
投稿: 135
Topic starter  

@yhira 

 

ご返信ありがとうございます。

 

>>これは何も操作しなくても表示されているということですか?

 

はい。スクロールしているだけで表示されます。

画像が小さいため、表示される場所はかなり限られているのですが、*一定の場所でスクロールが止まると表示されるようです。

 

*一定の場所というのは

スマホ画面の「ちょうど真ん中~真ん中の少し上あたり」に吹き出しの画像が止まった時です。

 

私のChromeのスマホ環境では表示されますので、お手数ですが小刻みにスクロールを試してみていただいてもよろしいでしょうか?


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7672
 

私の環境では、ただスクロールしただけでは、出てこないですね。
(スマホです。)

一度下の画像を長押しして、Pinterest保存が出るようになると、スクロールするとアグーちゃんにも出ることがあるようです。
(他の吹き出しの画像にも。)

 

この後も、リロードすると、またPinterestは出てこなくなります。

もとい…。

別な場所を長押しで選択する必要があるかも。。。です。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7672
 

これって…。

<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つめ)


   
taku
 taku
(@taku)
Estimable Member Registered
結合: 4年前
投稿: 135
Topic starter  

@mk2_mk2 

 

いつもありがとうございます。

>>私の環境では、ただスクロールしただけでは、出てこないですね。

→環境によっては、スクロールだけでは表示されないのですね。ありがとうございます。

 

Pinterestのヘルプセンターに記載されているタグを吹き出しの画像に追加してみたいのですが、どのように設定すれば追加できますでしょうか?


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7672
 

takuさん

ブロックエディタをご利用でしたら。。。

  • ブロックを選択
  • 縦三点リーダー
  • HTMLとして編集
 
ただし、ブロックエディタは、ちょっと属性を追加しただけでも、ブロックとして編集できなくなってしまうという、不便なところはあります。
(表示には問題ないですし、HTMLとしては編集できるのですけど。)
 
 
 
クラシックエディタをご利用でしたら、エディタ上部の「テキスト」タブを選択して、該当の箇所を編集。
 
 
という感じでしょうか。
 
 
ヘルプセンターの記載で気になっているのは、ファイル名と「nopin = "nopin"」の間にスペースがないことです。
 
一旦、ヘルプセンターの記載でやってみて、ダメだったらファイル名と「nopin = "nopin"」との間に半角スペースを空けると良いかも知れません。
 
そもそもこの属性が効くのか分かりませんけど。

   
taku
 taku
(@taku)
Estimable Member Registered
結合: 4年前
投稿: 135
Topic starter  

@mk2_mk2 

 

すみません。ブロックエディターは使用していないです...。

 

また可能であれば、サイト内の全ての吹き出しの画像にPinterest保存が出ないように設定したいです。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7672
 

takuさん

クラシックエディタの場合も記載しておりますよ。

画像を複数枚添付すると、どうしても再編集が必要なもので。


   
taku
 taku
(@taku)
Estimable Member Registered
結合: 4年前
投稿: 135
Topic starter  

@mk2_mk2 

 

申し訳ございません。クラシックエディタの場合を見落としていました。

 

<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

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7672
 

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"

あまり変わらないとは思いますけど。


   
taku
 taku
(@taku)
Estimable Member Registered
結合: 4年前
投稿: 135
Topic starter  

@mk2_mk2 

 

ありがとうございます!

 

上記のタグを追加するとテキストタブからビジュアルタブに戻した時に追加した部分が何度試しても消えてしまって、更新できませんでした。

 

 


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7672
 

takuさん

それが、WordPressのクラシックエディタの癖です。

「ビジュアル」タブを選択してはダメなんです。

その前に更新しておかないと。

この現象は、今回のことに限らず、さまざまなタグなどで起きます。
クラシックエディタでは。


   
taku
 taku
(@taku)
Estimable Member Registered
結合: 4年前
投稿: 135
Topic starter  

@mk2_mk2 

 

そうなんですね!ありがとうございます!

 

いま更新できたのですが、やはりスマホではピンボタンが表示されてしまうようです。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7672
 

takuさん

アグーちゃんに設定されていることは確認しました。

スマホで確認しましたが、「保存」出てきますね。

私はAndroidですが、そのままスクロールしても出てきません。
しかし、他の画像を長押しして、「保存」を表示できる状態だと、吹き出しにも出てきます。

 

 

ちなみに、以下はtakuさんが設置なさったという事で良いのでしょうか。

<script async defer data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js">

この機能で「Pinterest」の「保存」ボタンが表示されるのですよね、きっと。


   
taku
 taku
(@taku)
Estimable Member Registered
結合: 4年前
投稿: 135
Topic starter  

@mk2_mk2 

 

ご確認ありがとうございまず!

 

上記のコードは私が設置したものではないかと思います。

cocoon設定で「Pinterestで画像をシェアする」にチェックを入れると設置されるのでしょうか?

 

いまチェックを一度外してみました。

 

【追記】チェック外しても設置されていますね...。

 

「footer-javascript.php」に記載されているようなのですが、デフォルトなんでしょうか?私が設置したことを忘れているだけかも...

This post was modified 3年前 2回 by taku

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7672
 

takuさん

なるほど、理解しました。

確かに、消えましたね。

むーん、難しいですね。
Cocoonの仕様というよりは、Pinterestの提供する「pinit.js」の仕様だと思います。

PCであれば、マウスホバーですが、それをスマホにたいしてどうするのかというところですよね。

 

ちなみに、もう1つ試してみましょうか。

先程は、Pinterest公式の「nopin="nopin"」という属性を指定しましたが。。。

ネットでは、「data-pin-nopin="true"」を指定するという情報も見つけました。
(ただし、公式ではありません。)

これを設定するとどうなのか、試していただけますか。

 

 

【追記】

えっ、あります?
消えたように思いましたが、「pinit.js」は。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7672
 

takuさん

「footer-javascript.php」に記載はされていますね。

https://github.com/yhira/cocoon/blob/7faeaf4a0b4d74ac4d7ef9657b524efb3f6869d9/tmp/footer-javascript.php#L22

 

ただ、takuさんのサイトからは、先程の連絡いただいた時には消えていました。
検索したので間違いないと思います。

 


   
taku
 taku
(@taku)
Estimable Member Registered
結合: 4年前
投稿: 135
Topic starter  

@mk2_mk2 

 

「data-pin-nopin="true"」を指定することでスマホでもピンボタンが表示されなくなりました!

 

この設定を他の吹き出しにも適応させることはできますでしょうか?やはり一つ一つ設定していくしかないですか?

 

「pinit.js」については私の確認方法がおかしかったのかもしれません。紛らわしくてすみません...。

This post was modified 3年前 by taku

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7672
 
投稿者:: @taku

「」を指定することでスマホでもピンボタンが表示されなくなりました!

えーっ!

公式より、ネット情報が正しいんですか。。。
(もしかすると、日本語のヘルプセンターには載っていないだけかも。)

 

残念ながら、1つ1つ指定していくしかないと思います。

これは個人個人で何を保存させたいか違うでしょうし。

それに、既に書いてしまったものは、例えテーマ側で対応したとしても書き換わらないと思います。

 

テーマ側の仕様については、わいひらさんのご判断ですね。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7672
 

Pinterest公式 Developers(英語版)に何やら記載があります。
https://developers.pinterest.com/docs/widgets/save/?

日本語にもして欲しい。。。

どこかにあるのかしら、日本語版も。
ぱっと見、言語選択はできない感じです。


   
taku
 taku
(@taku)
Estimable Member Registered
結合: 4年前
投稿: 135
Topic starter  

@mk2_mk2 

 

>>公式より、ネット情報が正しいんですか。。。

→そのようです...。

 

>>残念ながら、1つ1つ指定していくしかないと思います。

→そうなんですね。大量に吹き出しを使用していますので、置き換えプラグインなどでなんとかできないか考えてみようと思います。

 

しかし非表示にする方法がわかってスッキリしました!今回も助けていただきありがとうございました!


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7672
 
投稿者:: @taku

置き換えプラグインなどでなんとかできないか考えてみよう

これなら簡単にできるはずですよ。
(吹き出しの画像の種類分の操作は必要かも知れませんけど。)

なんにしても、解決できて良かったです。
難易度高かったです。


   
taku
 taku
(@taku)
Estimable Member Registered
結合: 4年前
投稿: 135
Topic starter  

@mk2_mk2 

 

置き換えプラグインでできそうですのでやってみます!

 

>>難易度高かったです。

→ 今回もお手数をおかけ致しました...。本当にいつもありがとうございます!


   
mk2 reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17013
 

子テーマの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;
});

※上記コードはテストコードであり動作確認をしていないので、予期せぬ不具合が出る可能性があります。動作保証はできませんのであらかじめご了承ください。不具合が出た場合は、コピペをもとに戻すと直るかと思います。


   
 taku
(@taku)
Eminent Member
結合: 4年前
投稿: 48
 

@yhira 

 

ありがとうございます。

しかし、既に置き換えプラグインで全ての吹き出しに「data-pin-nopin="true"」を追加してしまいました...。

今上記コードを貼り付けると重複してしまいますでしょうか?

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17013
 

「data-pin-nopin="true"」属性の詳しい解説ページがあった。

WordPress Pinterestの保存(Pin it)ボタンを指定画像だけに表示する方法|[1件の画像]オプションじゃダメな理由 | 仕事のあれこれ
https://ippu-biz.com/development/wordpress/pinterest-view-pinit/

おそらく、「nopin="nopin"」は画像がPinterestサイトに登録されないようにする属性なんだと思います。
Googleだったら投稿をrel="noindex"するみたいな感じでしょうか。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17013
 

今上記コードを貼り付けると重複してしまいますでしょうか?

想定通りの動作をしたとするならば重複します。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17013
 

すいません、コードの間違いに気づきました。
以下のコードを修正しておいたので、変更をお願いします。
https://wp-cocoon.com/community/postid/52718/


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17013
 

動作確認してみたところ、上で書いたコードだと、吹き出しによっては置換されないケースもあるみたい。
こちらに変更すると動作すると思います。

//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
taku
 taku
(@taku)
Estimable Member Registered
結合: 4年前
投稿: 135
Topic starter  

@yhira 

ご丁寧にありがとうございます!

今出先ですので、明日functions.phpのコードを試させて頂き、返信致します!


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7672
 

takuさん

すみません。
私が余計なことを言ってしまったばかりに、お手間をかけさせてしまいました。

保存しているソースじゃなくて、吐き出すソースを置換するイメージ?でできるんですね。

 

とりあえず、私のサーバーのテスト環境で、わいひらさんのコードを確認させていただきました。

私の環境では上手くいっていると思います。
ただし、3種類しか吹き出しは使っていません(回数はもう少しありますが)ので、たくさん吹き出しをご利用のtakuさんにご確認いただくのが良さそうです。

 

「data-pin-nopin="true"」属性は、やはり先程の英語版のサイトが正式なんでしょうね。
(この属性を知らないと、検索で引っ掛からなくて。)

Pinterest公式 Developers(英語版)
https://developers.pinterest.com/docs/widgets/save/?


   
taku reacted
taku
 taku
(@taku)
Estimable Member Registered
結合: 4年前
投稿: 135
Topic starter  

@mk2_mk2 さん

 

とんでもないです!

コードを置き換えると同時にPageSpeed Insightsで指摘されていた吹き出し画像のサイズも修正しておりましたので、全く手間ではございませんでした。

コードのご確認もありがとうございます!

先程、子テーマのfunctions.phpにわいひらさんのコードを追記したところ、全ての吹き出しに「data-pin-nopin="true"」属性が追加されたようです。

 

スマホで見ても吹き出しの画像にはPinterestのピンボタンは表示されていませんでした。

やりたかったことが実現できました。今回も助けていただきありがとうございました!


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました