サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2018年6月21日 23:21
お世話になっております。使いやすいテーマのご提供ありがとうございます。
Cocoonの不具合ではないのかもしれませんが、質問させてください。
ウィジェットのサイドバーに「タグクラウド」を設定した状態で、以下 URLのHTML5のチェックを行うと、</a>に関するエラーが発生します。
具体的なエラーメッセージは以下の通りです。
End tag a violates nesting rules.
一旦、当方のサイトではタグクラウドの使用を停止しましたが、再現性のあるものでしょうか。もしくは既知の事象でしょうか。
ご教示いただけますと幸いです。何卒よろしくお願いいいたします。
トピックスターター 2018年6月22日 20:25
本件伝わりづらい内容かと思いましたので、タグクラウドを表示したリンクを貼らせていただきます。
上記サイトをHTML5でチェックした結果は以下のリンクとなります。
恐れ入りますが、ご教示いただけますと幸いです。
2018年6月22日 21:34
<a href="url" class="tag-cloud-link tag-link-32 tag-link-position-1" aria-label="格安SIM (15個の項目)">
<span class="tag-caption">格安SIM
</a>↩
validator.w3では以下のように言ってますよね。
- spanの閉じタグ</span>がないから『入れ子になってない』
実際のサイトを見ると以下のとおり入ってます。
<a href="URL" class="tag-cloud-link tag-link-32 tag-link-position-1" aria-label="格安SIM (15個の項目)">
<span class="tag-caption">格安SIM</span>
</a>
原因は不明ですが、以下を一旦停止してみるとどうなりますか？？？
- Page optimized by LiteSpeed Cache辺り
HTMLをコピペしてvalidator.w3で表示すればそのエラーはでないんですよね。。なんでしょうね？？？
わいひら reacted
2018年6月22日 21:42
＜/a＞タグの前に、＜/span＞タグがないのが原因です。
わいひらさんはいつも驚くほど丁寧かつ迅速に対応されるので、修正をお待ちになるといいと思います。
一刻も早く修正されたい場合には、下記のコードを子テーマの function.php に追加します。
add_filter( 'wp_tag_cloud', 'wp_tag_cloud_custom' );
function wp_tag_cloud_custom( $output ) {
//style属性を取り除く
$output = preg_replace( '/\s*?style="[^"]+?"/i', '', $output);
//タグテキストにspanタグの取り付け
$output = preg_replace( '/ aria-label="([^"]+?)">/i', ' aria-label="$1"><span class="tag-caption">', $output);
$output = str_replace( '<span class="tag-link-count">', '</span><span class="tag-link-count">', $output);
//_v($output);
//カッコを取り除く
$output = str_replace( '<span class="tag-link-count"> (', '<span class="tag-link-count">', $output);
$output = str_replace( ')</span>', '</span>', $output);
$output = str_replace( '</a>', '</span></a>', $output);
return $output;
}
このフォーラムにコードを書くと、インデントが 0 になるのは wpForo の仕様なのかな。
わいひら reacted
2018年6月22日 21:43
あら…。かうたっくさんとかぶってしまいました。
2018年6月22日 21:53
Akiraさんに。『インデントが 0 になる』
{;}ソースコードでHTMLから入力したらインデント入りますよ。編集中ちょっと見にくいですけど、公開されたときの表示は見やすいかもです。おそらく…。そしていつもお疲れ様です！
2018年6月22日 22:30
どうやら僕が数字を表示していない時の処理を書いていなかったのが原因のようです。
以下のように書き換えるとおそらくうまくいくっぽい。
https://github.com/yhira/cocoon/commit/132629b98be159cac0ee247b97181b1b4065c1f0
修正したものを以下にアップしておきます。
2018年6月22日 22:33
このフォーラムにコードを書くと、インデントが 0 になるのは wpForo の仕様なのかな。
僕は添付画像のような感じで入力しています。
ちょっと面倒ですけど。
2018年6月22日 22:37
ここら辺は、bbPressの方が使いやすいなと思います。軽いし。
wpForoもbbPressのような仕様のテキストエディターで入力できるようになれば、かなり使いやすくなるんですけど^^;
2018年6月22日 23:14
あー…。ごめんなさい。「タグの数を表示」機能を見ていませんでした。
修正版を試したところ、「タグの数を表示」を有効にしても無効にしても、 HTML チェッカーでエラーが出ませんでした。
インデントが 0 〜
かうたっくさん、わいひらさん、ありがとうございます。しかも、 GIF まで用意いただいて。早速試してみます。
:root {
--main-color: #111;
}
.example {
color: var(--main-color);
}
おぉぉ！
トピックスターター 2018年6月23日 08:01
Akiraさん、かうたっくさん＞
ご確認、ご教示ありがとうございました。エラー発生時の確認方法も勉強になりました。今後はもう少し自分で原因を調査できるようにいたします。
わいひらさん＞
早速のご対応ありがとうございました。修正いただいたテーマで再度、HTML5のチェックを行ったところ、Akiraさんと同じくエラーが解消されました。
お忙しい中ご対応いただきましてありがとうございました。
今後ともよろしくお願いいいたします。
わいひら reacted
2018年6月23日 22:00
ご確認ありがとうございます！
適用後のチェックでも問題なかったようで安心しました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。