サイト内検索
FAQブロックにトグル機能を付けてほしいです | 要望 | Cocoon フォーラム

Topic starter2022年7月27日 11:13
わいひらさん、こんにちは。Cocoonテーマには、いつも助かっております。
体調のこと拝見し、先日ささやかではございますが、寄付をさせていただきました。
FAQ、とても見やすいデザインでさっそく使っています。
これまでのFAQページは、Qを見出しにして、目次から飛んで見に行くようにしていました。
しかし、リッチスニペットにしたいので、FAQブロックに変更しました。
さて、実際にFAQページを作って項目が並べてみると、ちょっと長くなってしまって。
読者が調べたい項目を少ないスクロールで一覧できるようにしたいです。
具体的には、FAQ項目のトグルです。
Q をトグルスイッチにしてAが出てくると、読者にとってより快適かと思いました。
こちらのページで、すでに別のスキンで対応されていることを知りました。
しかし、もし可能なら 公式でもチェックなどでトグル化できる項目を追加していただけるとありがたいです。
以上、お時間のあるときで構いませんので、ご勘案いただけると嬉しいです。
何より、今後もこの素晴らしいテーマを末永く守っていっていただけると、ありがたいです。
2022年7月28日 20:09
手っ取り早く実装するにはこちら。
まずは子テーマのstyle.cssに以下を貼り付ける。
.faq-question{ cursor: pointer; background-color: #fdeff2; position: relative; padding: 10px; } .faq-question::before{ content: "+"; position: absolute; right: 15px; opacity: 0.5; } .faq-question.active::before{ content: "-"; } .faq-answer{ display: none; padding: 0 10px 10px; }
子テーマのjavascript.jsに以下を貼り付ける。
$(function(){ $('.faq-question').click(function(){ $(this).toggleClass('active'); $(this).next('.faq-answer').slideToggle(); }); });
実際はFAQブロックにはラベル・ボーダー・背景色があるので、うまく整合性を取れる実装にできるかはちょっと検証しみないとわからないかも。
ちょっといろいろ試してみます。
This post was modified 3週間前 by わいひら
2022年8月5日 18:33
FAQブロックにアコーディオンスタイルを追加しておきました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
Topic starter2022年8月7日 04:06
こんにちは。
アコーディオンスタイルの件、ありがとうございます。
後ほど確認してから「解決済み」にしたいと思います!
2022年8月8日 19:06
@mk2_mk2 さん
ご確認いただきありがとうございます!
対応したつもりが必要なCSSセレクタを削除しておりました。
修正版をアップしておきました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
2022年8月9日 00:50
わいひらさん
ご対応いただき、ありがとうございます。
FAQブロックの「デフォルト」「角型ラベル」「アコーディオン」の表示に問題ないことを確認させていただきました。
完全に疎くて、申し訳ないのですが。
少し疑問に思ってしまった点がありますので、確認させていただいたよろしいでしょうか。
それは「JSON-LD」についてです。
(・・・で良いのかしら。)
投稿ページに、以下のように上から「デフォルト」「角型ラベル」「アコーディオン」を並べました。
「デフォルト」は、色指定なしの状態。
「角型ラベル」は、背景色・文字色を指定。
「アコーディオン」は、以下画像のような指定。
その際の、「JSON-LD」は以下です。
3番目が「アコーディオン」のものですが、divタグの色指定のクラスなどが出てきているように思うのですが、これは問題ないものなのか、確認させていただきたいです。
私は完全に疎いもので、良く分かっておりませんけれど。
よろしくお願い致します。
わいひら 件のいいね!
2022年8月9日 06:17
Google検索セントラルには、divタグは使えると書いてありますね。
構造化データを使用して「よくある質問」をマークアップする
https://developers.google.com/search/docs/advanced/structured-data/faqpage?hl=ja
上記を見た感じでは、問題ないような印象をうけます。
「角型ラベル」には出てこなくて、「アコーディオン」には出てくるもので、気になってしまったみたいです。
(条件を変えたり・あわせたりしての確認はしておらず、恐縮なのですが。)
わいひら 件のいいね!
2022年8月9日 19:31
ご確認いただきありがとうございます。
確認してみたところ、trip_tagsしないタグにdivを含めていましたが、divは使用できたとしても必要ないですよね。そこまで構造化したHTMLを書くわけでもないですし。
除外してみました。
https://github.com/yhira/cocoon/commit/20febdca46b41660e05c365dc042e030d55fcd92
2022年8月10日 12:02
ご確認いただきありがとうございます!
昨日、僕の環境で試したときdivは出なかったので、よろしければ不具合環境の再現のため、エディターのソースコードをテキストファイルに書き込んで添付ファイルとしてアップしていただいてよろしいでしょうか。
2022年8月10日 12:31
了解です。
ローカル環境で試しているのと、只今出先なもので、夜遅くなると思います。
2022年8月10日 18:56
再度確認しました。
編集画面の右サイドバー?で、色を変更するだけであれば、問題なかったです。
改めて、新しく編集してみたところ…。
私は、質問の見出し色を、ハイライトを使って変えていたようです。
上記の場合に、JSON-LDに「Question」「Answer」の両方がdivタグが含まれてしまうようです。
ソースコードも添付します。
わいひら 件のいいね!
2022年8月10日 19:20
もう1点別事象に気づいてしまいました。
FAQ(デフォルト)の「質問ラベル色」が反映されないケースがありました。
「質問ラベル色」だけを指定すると、編集画面・実際のページ表示共に反映されないみたいです。
そして、「ボーダー色」を同時に指定すると、「質問ラベル色」が反映されるみたいです。
すみません、時間切れで、上記以上の確認はしておりません・・・。
(しばらく離席してしまいます)
(しばらく離席してしまいます)
【追記】
書き忘れたので、戻ってきました。
右サイドバー?の色指定で反映されないのは、「デフォルト」の「質問ラベル色」だけだったと思います。
一応他のものも確認しましたが、他は反映されていたと思います。
(ばたばたと確認しており、100%の自信ではないですが)
(ばたばたと確認しており、100%の自信ではないですが)
わいひら 件のいいね!
2022年8月10日 21:39
データありがとうございます。
とりあえずアンサー部分にタグが入る不具合を修正したものをGitHubにアップしておきました。
※直近の不具合はまだ未対応
2022年8月11日 00:49
「JSON-LD」「質問ラベル色」とも、解消されていることを確認致しました。
ご対応いただき、ありがとうございます。
>minami02さん
ご確認いただき、お返事を書いていただけますと幸いです。
わいひら 件のいいね!
2022年8月11日 20:06
ご確認いただきありがとうございます!
2022年8月19日 21:27
minami02さん
ご要望の機能が実装され、しばらく経ちます。
既に、ダッシュボードからのアップデートも可能です。
ご確認の上、結果のご連絡をいただけますよう、お願い致します。