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

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

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

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

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

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

①グループブロックを作成

アコーディオンパネルをブロックパターンとして登録します。ブロックパターンとして登録することで、何度も同じレイアウトを組む必要がなくなり、効率的に作業を進めることができます。

参考：ブロックパターンとは？WordPressパターンの作り方・使い方

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

このよう↑に段落とグループをつくります。赤文字で記載されているのが付与するクラス名です
.accodionがアコーディオンパネル全体、.accodion-contentがアコーディオンの中身のエリアです。

②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する処理を記載します。

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に記述します。

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()の引数を活用します。

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が正しいタイミングで読み込まれるようになり、アコーディオンパネルがうまく作動します。

エディタのスタイル設定

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

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

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

editor-style.css

.accordion {
    border: solid 1px gray;
}

.accordion-content {
    background-color: rgb(197, 243, 253);
}

editor-style.cssが適応されたブロックエディタがこちらです↓

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

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

以上