サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2024年3月11日 22:55
エントリーカードに外部サイトのリンクを挿入する事は可能でしょうか？
ご教示いただけたら幸いです。
WordPress バージョン: 6.4.3
PHP バージョン: 8.1.22
Cocoon バージョン: 2.7.1.1
Cocoon Child バージョン: 1.1.3
2024年3月12日 00:54
知っての通り、HTML仕様で、aタグの中にaタグは入れる事ができません。
現状では、提示頂いはHTML構成はできません。
この為、以下のカスタマイズが必要となります。
●案1
子テーマ下にtmpフォルダーを作成します。
以下のファイルを、提示頂いたHTML構成に変更し、tmpフォルダーに格納します。
https://github.com/xserver-inc/cocoon/blob/master/tmp/entry-card.php
●案2
https://qiita.com/roko18366758/items/4fef1a9bbc5dcc0bb1fb
望ましくないですがobjectタグを使い、カード全体の中に、追加情報のリンクを作成します。
以下のentry_card_snippet_afterフックを使えば、カードスニペットのあとに、情報追加は可能です。
わいひら reacted
2024年3月12日 22:08
色々試してみます。
Cocoonは知っての通り、エントリーカード全体がリンクとなっています。
提示頂いた図のように、青、赤の部分ようにリンク位置を変更し、外部リンクを追加するなら、案1の方が簡単かと思います。
objectタグは非推奨ですが、案2で実現した事があり。
フックを使って、エントリーカード(全体リンクの上)に、カスタムフィールド値をリンク付きで（外部リンクの部分）を追加したしました。
2024年3月13日 13:58
案 2 の <object> を使う方法はやってはいけません。非推奨とか望ましくないのではなく、絶対にダメです。
lozy123oddy さんが最初に添付された画像のようにするには、案 1 のテンプレートファイルの変更が最も簡単だと思います。
2024年3月14日 23:21
chu-ya さんが最初に答えをおっしゃっています。
知っての通り、HTML仕様で、aタグの中にaタグは入れる事ができません。
仕様書の 4.5.1 The a element には、このように書かれています。
Content model: Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified.
[意訳] コンテンツモデル（コンテンツモデルとは要素の子および子孫にどのようなコンテンツを含める必要があるかの説明）：透過的コンテンツ。ただし、対話型コンテンツ、<a> タグ、tabindex 属性のある要素は子孫にあってはなりません。
もし、この仕様に反して <a> の子孫に <a> を入れた場合、スクリーンリーダーが正常に読み上げません。
例えば、参考にされた Qiita の記事のような HTML を書いたとします。
<a href="#a">
<p>aaaaaa</p>
<p>
<object><a href="#b">サンプル</a></object>
</p>
</a>
この HTML に対する Windows に搭載のナレーターの読み上げを確認します。<object> の中の <a> にフォーカスを当てた時、ナレーターは「リンク サンプル 無効になっています」と読み上げます。また、フォーカスが当たっている状態でエンターキーを押すと「項目が無効です」と読み上げます。これではスクリーンリーダーを使われている方は、サイトを操作できません。
また、<object> の使い方にも疑問を感じます。<object> とは外部リソースを表す要素で、data 属性と type 属性の少なくとも 1 つが必要です。この 2 つの属性に何を書かれるのでしょうか？特に、存在する必要があると仕様書に書かれている data 属性に何を書かれるのだろう？と疑問に思いました。
2024年3月14日 23:58
@akira さん
説明ありがとうございます。
Akiraさんが口にするアクセシビリティについて、私は、ビジネス用途でなく趣味の延長なので、意識していません。
フォーラムで質問される方はそう言う方が多いのでは？と思っています。
「機能実現するには？」図示の赤枠が実現できれば、OKと思いがちなのではないでしょうか？
Webデザイナー、ビジネスでWebに関わる方と観点が違うと思います。
お手数かと思いますが、今回のように、何が悪いのか具体例を示し、教えて頂けると助かる、今後の意識するようになり。
誠にありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。