WordPress6.9で追加されたアコーディオンブロック。アコーディオンブロックと言えばFAQコンテンツを作るのに使えるなと思って、FAQと言えば構造化データが出力できたらなと思っていたら「Snippet: Schema.org microdata for Accordion block FAQs」に出てるもののうまくいかない．．でいろいろ触ったらやっと理解できたので、同じように？？となった方のためにメモとして公開しておきます。
アコーディオンブロックの基本構造
アコーディオンブロックは下図のような構造になっています。
文字で表すと以下のようになっています。
- アコーディオンコンテンツ全体を括っている「Accordion」（ブロック全体－赤枠の部分）
- アコーディオンブロック内の各アイテム「Accordion Item」（開閉する各項目－青枠の部分）
- 各アコーディオンアイテム内の見出し「Accordion Heading」と内容「Accordion Panel」（緑枠の部分）
つまり各アイテム（見出しと内容のセット）をアコーディオンというグループで囲んでいるという構造になっていて、恐らくWordPress標準のブロックの中では一番階層の多い構造になっています。
このブロックを試した時は「何でこんな複雑な構造になってるんだろう？」と疑問に思いましたが、以下のようなことができるように実に工夫されているんですね。
- このアコーディオンブロックを複数の質問と回答があるFAQとして使用する場合に構造化データの出力をしやすくする
- アコーディオンブロック全体、アイテム、アイテムの見出し、アイテムの内容、アイテムの内容に含めるブロックを別にすることで、それぞれの部分にスタイルを簡単に適用できるようにする（追加CSSクラスもそれぞれの部分ごとに指定できる）
こうなっていることで、各パーツごとにクラスの追加ができるので、上図でいう青枠の部分に個別にCSSクラスを追加してアイテムごとにデザインを変えたり、赤枠の部分にCSSクラスを追加してそのアコーディオンの集まり全体にデザインを適用させたり、中のパーツごとにスタイルを変えたりということが柔軟にできるんですね。
実はこのブロックが追加されたよ～とアナウンスがあった当初、今まであった詳細ブロック（detailsブロック）とHTML構造以外で何が違うの？と思ったのですが、なるほど、いろいろなことが考えられたとても便利なブロックだったんですね。
今までどこやらのカスタムブロックを使わないと実現できなかったアコーディオンブロックを開発してコアに組み込んでくれた開発チームの皆さんに感謝！！
今回はFAQページという前提にしていますが、もちろん内容には段落以外にもいろいろなブロックが挿入できるので、説明コンテンツを入れたり、クリックして画像を表示するようにしたりといろいろと使えそうですね。
独自のスタイルということで話を広げれば、「register_block_style()」関数を使ってそれぞれのパーツに独自のスタイルをボタンで簡単に変えることもできるようになるので、とても柔軟、かつ、一旦登録しておけばボタンポンで簡単にスタイルを指定することができますね。
FAQ構造化データを出力する
ここまで紹介したブロック構造を理解すれば、WordPress公式ブログで紹介されている「Snippet: Schema.org microdata for Accordion block FAQs」を参考にすると、FAQとしての構造化データを出力して、検索エンジンにFAQコンテンツですよ！よかったら検索結果にこの構造で表示してね！と伝えることができます。
うまくいかないという方は以下の枠内を参考にしてみてください。
「Snippet: Schema.org microdata for Accordion block FAQs」では、アコーディオンブロックに「is-faqs」という追加CSSクラスを追加して、functions.phpへコードを追加するとさらっと書かれていますけど、上図でいう赤枠の部分に「is-faqs」というクラスを追加しないと機能しませんから、コード入れて「あれ？」と思った方は構造の再確認とクラスの追加位置の確認をしてみてください。
アコーディオンをスムーズに開きたい場合は
標準のアコーディオンブロックは見出しをクリックするとパッと中身が開くようになっていますが、多くのサイトにあるようにゆっくりと開くようにしたいものですね。
それを実現するには以下のスタイルコードをテーマのstyle.cssなどに加えれば簡単に実装できます。
/**** アコーディオンブロックのスムーズな開閉 ****/
/* 閉じている状態 */
.wp-block-accordion-panel {
transition: max-height 0.4s ease-in-out;
max-height: 0;
overflow: hidden;
}
/* 開いている状態 */
.wp-block-accordion-item.is-open > .wp-block-accordion-panel {
max-height: 5000px;
}このスタイルコードでは開く動作はスムーズになりますが、閉じるのは一瞬になります。これは「is-open」が追加されたらという記述だけがあるからで、閉じるのもスムーズにするならjQueryを使って閉じた時のクラスを追加して、それにスタイルを適用させるといったことが必要かと思いますが、複数のアコーディオンコンテンツがある場合に閉じるのもスムーズにしてしまうとヌルヌルといろいろな部分が開いて閉じてというちょっと気持ち悪い動作になるかもしれませんので、基本開く時だけ有効になっていればいいのではないかと思いますヨ。
