アーカイブページをアコーディオン仕様にカスタマイズした例

パソコンスクールの「よくある質問と回答」をカスタム投稿タイプで作成して、アーカイブページをアコーディオン仕様にカスタマイズしました。

このカスタマイズが想定する用途

このカスタマイズは以下のような投稿に適しています。

• 個々の投稿のコンテンツのボリュームが小さい。
• 投稿頻度が高い（投稿の件数が多い）。

このカスタマイズのメリット

アコーディオン仕様にカスタマイズしたアーカイブページには以下のようなメリットがあります。

• キーワードやカテゴリーで絞り込むことができる。
  VK Filter Search のような検索用プラグインと組み合わせることにより使いやすいコンテンツを提供できます。固定ページでアコーディオンを使ってコンテンツを作ったら、こんなことできません。
• 画面遷移が発生せず、閲覧しやすい。
  カスタム投稿タイプでふつうに作ると、個別投稿ページに切り替わる（画面が遷移する）ため、いろいろ見ていきたいときに使い勝手がよくないです。
• ページネーションが表示される。
  アーカイブページなので、投稿の数が増えるとページネーションが表示されます。

カスタマイズ内容・仕様など

• VK パターンライブラリのお知らせ一覧_アコーディオンを元にして作ってあります。
  https://patterns.vektor-inc.co.jp/vk-patterns/23275/
• VK Blocks Pro のアコーディオンブロックを使用しています。
• 投稿へのリンクは不要なので無効になっています。
• ページ送りの動作を確認できるように、1ページに表示する最大投稿数を 5 にしてあります。
• コンテンツの更新作業をかんたんに行えるように、ログインした状態のときに [ 投稿を表示 ] のリンクを表示しています。

このアコーディオン、要らない？

アーカイブページに投稿のコンテンツを全文表示したい、って方には、こんなカスタマイズ でもお手伝いできます。

類似のカスタマイズ例

• Lightning でアーカイブページをアコーディオン仕様にカスタマイズした例
  https://lightning-free.uonuma-js.com/faq/
  （オリジナルのアコーディオンブロックを使用）
• X-T9 でアーカイブページをアコーディオン仕様にカスタマイズした例
  https://x-t9.uonuma-js.com/faq/
  （オリジナルのアコーディオンブロックを使用）