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カスタマイズ依頼

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

FAQブロックにトグル機能を付けてほし...
 
共有:
通知
すべてクリア

[解決済] FAQブロックにトグル機能を付けてほしいです

26 投稿
4 ユーザー
13 Reactions
1,631 表示
(@minami02)
Eminent Member Registered
結合: 2年前
投稿: 18
トピックスターター  

わいひらさん、こんにちは。Cocoonテーマには、いつも助かっております。

体調のこと拝見し、先日ささやかではございますが、寄付をさせていただきました。
FAQ、とても見やすいデザインでさっそく使っています。

これまでのFAQページは、Qを見出しにして、目次から飛んで見に行くようにしていました。
しかし、リッチスニペットにしたいので、FAQブロックに変更しました。

さて、実際にFAQページを作って項目が並べてみると、ちょっと長くなってしまって。
読者が調べたい項目を少ないスクロールで一覧できるようにしたいです。

具体的には、FAQ項目のトグルです。
Q をトグルスイッチにしてAが出てくると、読者にとってより快適かと思いました。

こちらのページで、すでに別のスキンで対応されていることを知りました。

しかし、もし可能なら 公式でもチェックなどでトグル化できる項目を追加していただけるとありがたいです。

https://wp-cocoon.com/community/bugs/faq%E3%81%8Cgoogle%E3%81%AB%E6%AD%A3%E3%81%97%E3%81%8F%E5%8F%8D%E6%98%A0%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84/

以上、お時間のあるときで構いませんので、ご勘案いただけると嬉しいです。

何より、今後もこの素晴らしいテーマを末永く守っていっていただけると、ありがたいです。


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

こんな感じでしょうか?


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

手っ取り早く実装するにはこちら。

まずは子テーマの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ブロックにはラベル・ボーダー・背景色があるので、うまく整合性を取れる実装にできるかはちょっと検証しみないとわからないかも。
ちょっといろいろ試してみます。


   
(@minami02)
Eminent Member Registered
結合: 2年前
投稿: 18
トピックスターター  

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

コード例を参考に入れてみました。

自分の環境では、FAQの回答部分のレイアウト幅が60%になっていたので、style.cssで微調整しました。

.faq-answer-content.faq-item-content {
	width: 100%;
}

ヒントをいただいたので、自分でもいろいろと試してみます。

お忙しい中、ありがとうございました!


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

FAQブロックにアコーディオンスタイルを追加しておきました。

------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3150
 

@minami02 さん

恐れ入ります、FAQブロックにトグル機能がサポートされました。
確認の上、「
解決済み」ボタンのクリックして頂けたらと思います。


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

すみません。
時間がなく、まったく調べていません。

試してみたところ、既存機能に影響が出ているかもしれないです。

アップデート前に、投稿ページに2つ、FAQブロックを編集しておきました。

上は「デフォルト」。

 
下は「角型ラベル」です。
 
 
その後、GitHubのものへバージョンアップしました。
 
投稿ページを確認すると、両方ともアコーディオンになってしまっているようです。

   
わいひら reacted
(@minami02)
Eminent Member Registered
結合: 2年前
投稿: 18
トピックスターター  

こんにちは。

アコーディオンスタイルの件、ありがとうございます。

後ほど確認してから「解決済み」にしたいと思います!


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

@mk2_mk2 さん

ご確認いただきありがとうございます!
対応したつもりが必要なCSSセレクタを削除しておりました。
修正版をアップしておきました。

------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------


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

@minami02 さん

バージョンが2.4.7.8未満の場合は、新たにGitHubからダウンロードして確認してみていただければ幸いです。
不具合を修正しました。


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

わいひらさん

ご対応いただき、ありがとうございます。

FAQブロックの「デフォルト」「角型ラベル」「アコーディオン」の表示に問題ないことを確認させていただきました。


完全に疎くて、申し訳ないのですが。

少し疑問に思ってしまった点がありますので、確認させていただいたよろしいでしょうか。

 

それは「JSON-LD」についてです。
(・・・で良いのかしら。)

投稿ページに、以下のように上から「デフォルト」「角型ラベル」「アコーディオン」を並べました。

 
 
「デフォルト」は、色指定なしの状態。
 
 
「角型ラベル」は、背景色・文字色を指定。
 
 
「アコーディオン」は、以下画像のような指定。
 
 
その際の、「JSON-LD」は以下です。
 
3番目が「アコーディオン」のものですが、divタグの色指定のクラスなどが出てきているように思うのですが、これは問題ないものなのか、確認させていただきたいです。
 
私は完全に疎いもので、良く分かっておりませんけれど。
 
よろしくお願い致します。

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

Google検索セントラルには、divタグは使えると書いてありますね。

構造化データを使用して「よくある質問」をマークアップする
https://developers.google.com/search/docs/advanced/structured-data/faqpage?hl=ja

上記を見た感じでは、問題ないような印象をうけます。

「角型ラベル」には出てこなくて、「アコーディオン」には出てくるもので、気になってしまったみたいです。
(条件を変えたり・あわせたりしての確認はしておらず、恐縮なのですが。)


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

ご確認いただきありがとうございます。
確認してみたところ、trip_tagsしないタグにdivを含めていましたが、divは使用できたとしても必要ないですよね。そこまで構造化したHTMLを書くわけでもないですし。
除外してみました。
https://github.com/yhira/cocoon/commit/20febdca46b41660e05c365dc042e030d55fcd92


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

divは使用できたとしても必要ないですよね。

はい、そう思います。

確認してみました。

 
何故か、まだdivタグがあるので、変だなと、再確認しました。
 
親テーマのstrip_tagsからdivタグが外れたのは確認しました。
 
そもそも、前回の私の確認が甘かったようです。
申し訳ないです。
 
JSON-LDの長い部分を今一度確認すると、「Answer」部分に、「Question」「Answer」の両方が含まれているようです。(ラベルも)

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

ご確認いただきありがとうございます!
昨日、僕の環境で試したときdivは出なかったので、よろしければ不具合環境の再現のため、エディターのソースコードをテキストファイルに書き込んで添付ファイルとしてアップしていただいてよろしいでしょうか。


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

了解です。

ローカル環境で試しているのと、只今出先なもので、夜遅くなると思います。


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

再度確認しました。

編集画面の右サイドバー?で、色を変更するだけであれば、問題なかったです。

 

改めて、新しく編集してみたところ…。

私は、質問の見出し色を、ハイライトを使って変えていたようです。

 
 
上記の場合に、JSON-LDに「Question」「Answer」の両方がdivタグが含まれてしまうようです。
 
ソースコードも添付します。

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

更に確認しました。

JSON-LDの件ですが、同様に質問の部分の文字色をハイライトで変更すると「デフォルト」「角型ラベル」でも、同様の事象が発生します。

添付は、「デフォルト」です。


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

もう1点別事象に気づいてしまいました。

FAQ(デフォルト)の「質問ラベル色」が反映されないケースがありました。

「質問ラベル色」だけを指定すると、編集画面・実際のページ表示共に反映されないみたいです。

そして、「ボーダー色」を同時に指定すると、「質問ラベル色」が反映されるみたいです。

 
 
 
すみません、時間切れで、上記以上の確認はしておりません・・・。
(しばらく離席してしまいます)
 
 
【追記】
 
書き忘れたので、戻ってきました。
 
右サイドバー?の色指定で反映されないのは、「デフォルト」の「質問ラベル色」だけだったと思います。
一応他のものも確認しましたが、他は反映されていたと思います。
(ばたばたと確認しており、100%の自信ではないですが)

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

データありがとうございます。
とりあえずアンサー部分にタグが入る不具合を修正したものをGitHubにアップしておきました。
※直近の不具合はまだ未対応


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

FAQブロックのラベル色の不具合も修正しておきました。


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

「JSON-LD」「質問ラベル色」とも、解消されていることを確認致しました。
ご対応いただき、ありがとうございます。

 

>minami02さん

ご確認いただき、お返事を書いていただけますと幸いです。


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

ご確認いただきありがとうございます!


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

minami02さん

ご要望の機能が実装され、しばらく経ちます。
既に、ダッシュボードからのアップデートも可能です。

ご確認の上、結果のご連絡をいただけますよう、お願い致します。


   
(@minami02)
Eminent Member Registered
結合: 2年前
投稿: 18
トピックスターター  

ご対応、ありがとうございます。

私の方でも、問題なく利用できました。

ありがとうございました!


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

@minami02 さん

ご確認いただきありがとうございます!


   
共有:

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

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

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

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

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

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

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

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