特典機能について

FAQブロックにトグル機能を付けてほしいです | 要望 | 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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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

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


minami02
(@minami02)
New Member
結合: 3週間前
投稿: 3
Topic starter  

わいひらさん、こんにちは。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)
メンバーサイト Admin
結合: 5年前
投稿: 13635
わいひら - Facebookわいひら - Twitter
 

こんな感じでしょうか?


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13635
わいひら - Facebookわいひら - Twitter
 

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

まずは子テーマの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 わいひら

返信引用
minami02
(@minami02)
New Member
結合: 3週間前
投稿: 3
Topic starter  

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

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

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

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

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

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


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13635
わいひら - Facebookわいひら - Twitter
 

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

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

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


返信引用
chu-ya
(@chu-ya)
Reputable Member
結合: 4か月前
投稿: 349
 

@minami02 さん

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


返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3642
 

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

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

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

上は「デフォルト」。

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

わいひら 件のいいね!
返信引用
minami02
(@minami02)
New Member
結合: 3週間前
投稿: 3
Topic starter  

こんにちは。

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

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


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13635
わいひら - Facebookわいひら - Twitter
 

@mk2_mk2 さん

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

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

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


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13635
わいひら - Facebookわいひら - Twitter
 

@minami02 さん

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


返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3642
 

わいひらさん

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

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


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

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

 

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

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

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

わいひら 件のいいね!
返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3642
 

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

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

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

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


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13635
わいひら - Facebookわいひら - Twitter
 

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


返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3642
 
投稿者:: @yhira

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

はい、そう思います。

確認してみました。

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

わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13635
わいひら - Facebookわいひら - Twitter
 

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


返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3642
 

了解です。

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


返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3642
 

再度確認しました。

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

 

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

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

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

わいひら 件のいいね!
返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3642
 

更に確認しました。

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

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


わいひら 件のいいね!
返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3642
 

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

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

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

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

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

わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13635
わいひら - Facebookわいひら - Twitter
 

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


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13635
わいひら - Facebookわいひら - Twitter
 

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


mk2 件のいいね!
返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3642
 

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

 

>minami02さん

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


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13635
わいひら - Facebookわいひら - Twitter
 

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


返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3642
 

minami02さん

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

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


返信引用
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは7日以内なら無料自動復旧可能
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:19年

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
×DBは手動で復旧(データ取得は無料)
×ファイルも手動で復旧(データ取得は無料)
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
×ファイルは手動復旧(データ取得は無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:6年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:6年

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