WordPressでアコーディオンパネルを自作する（プラグインなし）

WebサイトのUIで何かと便利な**アコーディオンパネル**。

アコーディオンパネルは今のところWordPressの標準ブロックに備わっていません。
一応最近新しくWordPressに「詳細ブロック」なるものが追加されましたが、クリックでスライドして出現するようなアニメーションが適用できません。

やっぱりクリックでにゅるっと出てきてこそのアコーディオンパネルでしょう。

WordPressでそういうアコーディオンパネルを実装するには、アコーディオンパネルがあるテーマを選んだり、プラグインを導入したりするのが一般的かと思います。

でもアコーディオンパネルのためだけに、テーマやプラグインを新しく入れるのは嫌だなぁ。
そんな人のために、プラグインやjQueryに依存せず、WordPressにアコーディオンパネルを実装する手順を紹介します。

## ①グループブロックを作成
アコーディオンパネルを**ブロックパターン**として登録します。ブロックパターンとして登録することで、何度も同じレイアウトを組む必要がなくなり、効率的に作業を進めることができます。
    
参考：[ブロックパターンとは？WordPressパターンの作り方・使い方](https://webst8.com/blog/wordpress-block-pattern/)

WordPressの管理画面に移動して、外観 > パターンを選択し、新しいブロックパターンを作成します。
今回、JavaScript, php以外の処理は、こちらを参考にしました。
[アコーディオンを実装しました (VK Blocks 無料版) | Lightning G3](https://lightning-free.hp1.work/lightning-free-de-accordion/)

![lightning-free-de-accordion-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/e9006b40-1fef-71b2-169a-c33149485bf4.png)

このよう↑に段落とグループをつくります。赤文字で記載されているのが付与するクラス名です
`.accodion`がアコーディオンパネル全体、`.accodion-content`がアコーディオンの中身のエリアです。
## ②cssでスタイリング
![accodion-img.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/3b9fb10a-ad16-2f9e-a2ef-f97fec075d56.jpeg)

```css:style.css
.accordion-title {
    pointer-events: all;
    cursor: pointer;
    position: relative;
}

/* アコーディオンが閉じているとき */
.accordion-content {
    visibility: hidden;
    opacity: 0;
    height: 0;
    transition: all .3s ease;
    margin-block-start: 0;
}

.accordion-title::before {
    display: block;
    font-family: "Font Awesome 6 Free";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    content: "\2b";
    font-size: 1.5rem;
}

/* アコーディオンが開いているとき */
.accordion-title.accordion-open+.accordion-content {
    visibility: visible;
    opacity: 1;
    height: auto;
    padding: 2rem 1rem;
    border-top: 1px gray dotted;
}

.accordion-title.accordion-open::before {
    content: "\f068";
}
```
タイトルがクリックされたら、`.accordion-open`というクラスを付与し、`.accordion-title`に隣接する要素`.accodion-content`を表示させる、というcssです。

## ③classをtoggleするJavaScriptの実装
このアコーディオンパネルの実装には、少しだけJavaScriptの記述が必要です。
タイトルがクリックされている状態かどうかを判別するためのclass`.accordion-open`をtoggleする処理を記載します。
```js:accodion.js
const accordionTitles = document.getElementsByClassName('accordion-title');

for (const title of accordionTitles) {
    title.addEventListener('click', () => {
        title.classList.toggle('accordion-open');
    });
};
```
このjsファイルを保存し、子テーマのassets/js/配下にアップロードします。

## ④function.phpにjsの処理を追加
③でアップロードしたjsファイルを読み込むカスタムフックをfunction.phpに記述します。
```php:function.php
function toggle_accordion()
{
    wp_enqueue_script(
        'custom_script',
        get_stylesheet_directory_uri() . '/assets/js/accordion.js'
    );
}
add_action('wp_enqueue_scripts', 'toggle_accordion');
```
しかしこれ↑ではうまくいかず...

調べたところ、どうやらこのjsの処理をheadタグで読み込んでいるが原因でした。DOM操作をするJavaScriptの記述は、本来`</body>`タグの直前などで読み込むものでしたよね。

これを解決するために、WordPress用関数`wp_enqueue_script()`の引数を活用します。
```php:funciton.php
function toggle_accordion()
{
    wp_enqueue_script(
        'custom_script',
        get_stylesheet_directory_uri() . '/assets/js/accordion.js',
+       array(),
+       false,
+       true 
    );
}
add_action('wp_enqueue_scripts', 'toggle_accordion');
```
wp_enqueue_scriptの第5引数を`true`にすることで、定義した関数が`WP_footer()`で呼び出されるようになります。
これで、JavaScriptが正しいタイミングで読み込まれるようになり、アコーディオンパネルがうまく作動します。
## エディタのスタイル設定
![image.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/3e38f925-55df-bcd7-26c1-e6b79766d771.jpeg)

ブロックエディタで制作したアコーディオンパターンを挿入するとこんな感じ↑になります。

しかし、要素のグルーピングがわかりづらく、リストビューを表示させながら慎重に操作しないと、間違えてしまいそうです。

そこで、ブロックエディタ上のスタイルを編集できるファイル`editor-style.css`に、グルーピンクがわかりやすくなるスタイルを追記します。
```css:editor-style.css
.accordion {
    border: solid 1px gray;
}

.accordion-content {
    background-color: rgb(197, 243, 253);
}
```
`editor-style.css`が適応されたブロックエディタがこちらです↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/7b72e827-a8d5-b935-5ba8-43eb986f8d98.png)

これで、どこがアコーディオンで、どこがアコーディオン内部コンテンツなのかわかりやすくなりました。

実装したアコーディオンをプレビューします。

![tabChange.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/4eacae2c-161b-835c-50ef-4f6a2e3700b5.gif)


以上