WordPress コアのアコーディオンブロックと詳細ブロックを比較

カテゴリー: WordPress

アコーディオン動作をするコンテンツを WordPress コアのブロックで作ろうとするとき、以下の2つのブロックが使えます。

アコーディオンブロック
詳細ブロック

アコーディオンブロックの方が新しくて機能が多いし、名前からしてもアコーディオンブロックを使いたくなるところですが、詳細ブロックを使った方がいいんじゃないかと最近になって思うようになりました。

その理由は、閉じている部分のコンテンツに含まれるキーワードをブラウザのページ内検索で探したときの挙動が異なるからです。

アコーディオン	キーワードを見つけることができない。*1
詳細	キーワードが見つかり、アコーディオンが自動的に開く。

*1 アコーディオンが開いた状態であれば見つかりますが、閉じた状態で検索することがほとんどだと思います。

いまご覧になっているこのページを、ページ内検索で「KEY」で検索していただくと、両者の挙動の違いを確認できます。

詳細ブロックで作ったアコーディオン

2つのブロックはブラウザのページ内検索で探したときの挙動が異なり、この部分に含まれる KEYWORD を見つけることができる・できないの違いがあります。

アコーディオンブロック（後者）は閉じている部分が display: none; で非表示になっているためにページ内検索にヒットしないんですね。そのため、以下のようなことが起きてしまう可能性があります。

サイト内検索（または Google 検索）で見つけたページを開く。
そのページでページ内検索を使って該当箇所を探すけど、見つからない。
あきらめて閲覧をやめてしまう。

CSS でカスタマイズすれば、詳細ブロックでもアコーディオンブロックとほぼ同じことができるので（タイトルを見出しブロックにすることができない）、ページ内検索を使うかもしれない場合は詳細ブロックを使うようにしようと思います。

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

メールでのお問い合わせはこちら