サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2023年9月9日 12:47
いつもお世話になっております。
度々すみません。先日同じ質問をして一度は解決済とさせていただきましたが、再度教えていただきたいことがございあます。
▼以前の投稿
アフィリエイトタグを使用したらどうかというアドバイスをいただきましたが、テキストリンクにしている箇所もあれば、ボタンリンクにしている箇所もあるなど、複数の出し方をしているため、設置の方法がわからず断念してしまいました。
私なりに一番やりやすかったのが、編集画面をコードエディターで表示し、直接</a>タグ内に記述する方法でした。
<a href="https://px.a8.net/svt/ejp?a8mat=3TFIRF+BET4YI+4HMW+NTZCH" data-type="link" data-id="https://px.a8.net/svt/ejp?a8mat=3TFIRF+BET4YI+4HMW+NTZCH" target="_blank" rel="nofollow">
しかし、この方法で記述してビジュアルエディターに戻るとボタンリンクにしている箇所が「このブロックには、想定されていないか無効なコンテンツが含まれています。」と出てしまい、正しく記述できていないのかなと思っております。
ページの表示や動作上は問題なさそうなのですが、気になってしまい実施に踏み切れない状態です。
何かお分かりになることがあれば教えていただけますと幸いです。よろしくお願いいたします。
トピックスターター 2023年9月9日 19:05
2023年9月9日 19:15
keityさん
すみません、只今スマホなもので、こちらで確認ができません。
ボタンブロックには、2つあるかと思います。
WordPress本体のものと、Cocoonのものです。
どちらでしょう？（見た目で分かるはずですが、記憶が・・・）
Cocoonのボタンブロックであれば、「nofollow」は、右の設定サイドバーのURL部分に含めれば良い気がします。（今試せないもので、間違っていたらすみません）
別タブについては、トグルスイッチでオンオフできたと思います。（うろ覚えですが。プルダウンだったかも？）
囲みボタンだと、そのままタグを丸ごと入力できた気がします。
ブロックエディタは、ブロックの設定以外のことをすると、すぐに「無効なコンテンツ扱い」になってしまうんですよね。（HTMLに問題がなくても。そのため、ブロックエディタで再編集が簡単ではなくなってしまいます）
わいひら reacted
2023年9月9日 19:50
keityさん
ご提示いただいたものを、Cocoonの「ボタン」ブロックと「囲みボタン」ブロックに入力してみました。
（右の設定サイドバーで、ある程度設定内容も伝わるかと思います。画像添付の際は、この範囲も欲しいです）
「ボタン」ブロックについては、プルダウンで別タブの設定ができるため「target="_blank"」は削除しました。
以下が、公開ページの状態です。
（上が「ボタン」ブロック、下が「囲みボタン」ブロック）
（上が「ボタン」ブロック、下が「囲みボタン」ブロック）
「ボタン」ブロックでは、「data-type」「data-id」がなくなっているようです。
「囲みボタン」ブロックは、問題なさそうに思います。
そして、投稿ページを一旦閉じて、再編集してみます。
すると、両方とも「無効なコンテンツ」になってしまいました。
ただ、「囲みボタン」の「解決」を選択してみると、以下のように表示されます。
この「現在」と「変換後」を、コピーして機械的にDiffしてみましたが、完全に同一でした。
（「ボタン」は公開ページでdata-id等が削除されてしまうので、確認していません）
上記のことから、「囲みボタン」を使う分には「無効なコンテンツ」が表示されても問題ないのかなと思います。
なぜ「無効なコンテンツ」になってしまうのかは、テーマ側で確認が必要な気はします。
【追記】
今気づきました。
「noopener」になっていますね。
（Cocoon設定でそうしているのだと思います）
（Cocoon設定でそうしているのだと思います）
わいひら reacted
2023年9月9日 20:16
この「現在」と「変換後」を、コピーして機械的にDiffしてみましたが、完全に同一でした。
ここで、「ブロックに変換」すると、「カスタムHTML」ブロックになってしまいすね。
「Cocoon設定」で、「target="_blank"の際はnoopenerを追加」のチェックを外すと、以下のようになりました。
ただ、「noopener」がなくても良いものか・・・。
「rel="nofollow noopener"」にすると、公開ページではrel属性自体がなくなってしまいました。
まとまりませんが、そろそろ時間切れなもので、離脱してしまいます。
（晩御飯まだですし）
（晩御飯まだですし）
わいひら reacted
トピックスターター 2023年9月9日 21:04
@mk2_mk2 様
お忙しい中色々と検証いただきありがとうございます！
素人なものですから、私自身の検証も少し時間がかかってしまいますがいただいたヒントを元に試してみます。
>>ただ、「noopener」がなくても良いものか・・・。
→noopenerは設定したいですね…
引き続きよろしくお願いいたします。
2023年9月9日 21:18
Cocoonブロックの以下を利用について。
- ボタン
- 囲みボタン
まず、ボタンについて話します。
●現象
コードエディターに変え、HTMLに「rel="nofollow"」を追加すると、リカバリーとなる。
●対応策
以下の手順で対応します。
図①の「...」をクリックする。
図②のHTMLに変換をクリックする。
図③の「カスタムHTML」ブロックとなるので、属性を編集、追加する。
HTML表示のままが嫌なら、図④のプレビューをクリックし、ボタン表示にする。
囲みボタンついいて
●現象
囲みボタン設定で、図に示しよう、設定のリンクタグ・ショートコードに「rel="nofollow"」を追加する。
保存できるが、生成されるHTMLは「rel="nofollow noopener"」となってしまう。
また「target="_blank"」を追加すると、次編集の際「このブロックには、想定されていないか無効なコンテンツが含まれています。」となる。
保存できるが、生成されるHTMLは「rel="nofollow noopener"」となってしまう。
また「target="_blank"」を追加すると、次編集の際「このブロックには、想定されていないか無効なコンテンツが含まれています。」となる。
●対応策
上記と同じ手順で、カスタムHTMLに変換し、修正します。
わいひら reacted
2023年9月9日 22:26
@keity さん
以前のトピックで私がアフィリエイトタグをおすすめしたのは、このような問題が起きるのも理由の 1 つでした。
「このブロックには、想定されていないか無効なコンテンツが含まれています。」と出る理由は、Cocoon のボタンブロックや囲みボタンブロックが rel="nofollow" に対応していないためです。rel 属性の値には、noopener しか書けません。そのため、rel="noreferrer" でも同じようにエラーメッセージが出ます。
テキストリンクにしている箇所もあれば、ボタンリンクにしている箇所もあるなど、複数の出し方をしているため、設置の方法がわからず断念してしまいました。
テキストリンクとボタンリンクとで別々にアフィリエイトタグに登録するのはご希望に合わないでしょうか？
例えば、A8 での楽天モバイルのアフィリエイトと仮定します。
テキストリンクの場合は、アフィリエイトタグのタイトルに「テキストリンク - A8 - 楽天モバイル」などと書き、内容に <a> タグを書きます。この <a> タグは、A8 などからコピペするだけでいいと思います。
<a href="https://sample.com/" rel="nofollow noopener" target="_blank">何かしらのテキスト</a>
ボタンリンクの場合は、アフィリエイトタグのタイトルに「ボタンリンク - A8 - 楽天モバイル」などと書き、このような HTML を内容に書きます。
<div class="wp-block-cocoon-blocks-button-1 button-block"> <a href="https://sample.com/" class="btn" target="_blank" rel="nofollow noopener">ボタン</a> </div>
この HTML であれば、Cocoon のボタンブロックの小サイズと同じボタンになります。HTML は簡単に作れます。投稿ページの編集画面で Cocoon のボタンブロックを使っておいてコードエディターに切り替えれば、HTML をコピーできます。コピーした HTML に nofollow を追加すれば完成です。
アフィリエイトタグよりコードエディターで編集されるのがお好みでしょうか？
ちなみに、WordPress のボタンブロックであれば、コードエディターで nofollow を追加できます。
この投稿は1年前 2回ずつAkiraに変更されました
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。