![見出し画像](https://assets.st-note.com/production/uploads/images/116281226/rectangle_large_type_2_b10d68ef07f492f96376d361a5784e87.png?width=1200)
WordPressの詳細ブロックをアコーディオンアニメーションさせる方法
WEB制作しているHISASHIです。
WordPress6.3で追加された「詳細」ブロックで、アコーディオンアニメーションさせる方法を解説します。
自分で実装することで、わざわざアコーディオンのためのプラグインを入れる必要はなくなり、自分好みのアコーディオンブロックとして活用することができます。
是非ご検討ください。
詳細ブロックのアコーディオン化
詳細ブロックは、開閉式のブロックで、details / summaryタグが使用されています。
HTML構造が最適化されているため、音声読み上げやページ内検索などの機能に対応し、アクセシビリティにも優れています。
滑らかなアニメーションにするために、JavaScriptとCSSを用いてアコーディオンを実装してみました。
実際の動き
![](https://assets.st-note.com/production/uploads/images/116223923/picture_pc_8e3d75b80514da0a510b693b1bd5207e.gif)
マウスのクリックに加え、タブキーやスペースキーなどでの操作も対応しています。
デザインは2種類用意しました。
アイコンの位置も簡単に前後入れ替え可能です。
![](https://assets.st-note.com/img/1694752593102-zoKm7XQbl0.png?width=1200)
![](https://assets.st-note.com/img/1694752600550-pRfXTrNTnR.png?width=1200)
![](https://assets.st-note.com/img/1694752570947-keECzuEmsV.png?width=1200)
![](https://assets.st-note.com/img/1694752580653-THHXX4DbpO.png?width=1200)
編集画面
![](https://assets.st-note.com/img/1694741512443-L8IT6iTlzP.png?width=1200)
編集画面は通常の「詳細」ブロックをそのまま編集するだけです。
「デフォルトで開く」にも対応しています。
動作環境
詳細ブロックはWordPressのデフォルトのブロックですので、基本的にはどのテーマでも対応しています。
動作確認は以下のテーマで行いました。
SWELL
Snow Monkey
Cocoon
※確認日時:2023年9月15日
詳細ブロックを並べる場合、ブロックとブロックの間の余白がテーマによって異なる場合がありますが、詳細ブロック同士で「グループ化」することで回避することができます。
その他、色などの調整方法も記載しているので参考にしてみてください。
実装の難易度
CSSとJavaScriptをコピペするだけで完了です。
JavaScriptを貼り付ける箇所はテーマによって異なりますが、最低限、JavaScriptを貼り付けられる知識のみあれば実装は可能です。
SWELLであれば、カスタマイズ > 高度な設定 > bodyタグ終了直前に出力するコードへ貼り付け。
Snow Monkeyであれば、プラグインMy Snow Monkeyから貼り付け。
Cocoonであれば、子テーマのJavaScript.jsへ貼り付け。
実装方法
ここから先は
この記事が気に入ったらサポートをしてみませんか?