WordPressサイトでQ&Aをプラグインを使わずにブロックエディタで作る方法をご紹介します。

Q&Aのサンプル

次のようなQ&Aをプラグインを使わずに作ります。

ベースデザインは、記事制作時点でWordPressにプリインストールされているテーマ「Twenty Twenty-Five」です。

Q&Aの作り方

WordPressのブロックエディタと追加CSS、JavaScriptで作ります。

ブロックエディタでフォーマットを作る

まずはQ&Aのフォーマットをブロックエディタで作ります。

固定ページを追加して、詳細ブロックを挿入します。

詳細ブロックの「要約を書く」の部分にQ&Aの質問を入力し、その下に段落を挿入して回答を入力します。

詳細ブロックを選択した状態で、画面右側の設定メニューよりブロック → 追加CSSクラスにmy-faq-blockと入力します。

追加CSSクラスを設定した詳細ブロックを複製します。

複製した詳細ブロックに他のQ&Aを入力します。

掲載するQ&Aの分、複製と入力を繰り返します。

ここまでで固定ページをプレビューすると、次のようになります。

プレビューしたときのデザインは使っているWordPressテーマによって異なる場合があります。サンプルはTwenty Twenty-Fiveです。

CSSとJavaScriptを追加する

Q&Aのフォーマットができたら、そのデザインや動きを整えるCSSとJavaScriptを設定します。

まずは次のCSSをWordPressの子テーマに追加します。WordPress子テーマの作り方はこちらの記事をご覧ください。

/* 詳細ブロック */
.my-faq-block {
    background-color: #f1f5f7;
    padding: 10px;
    border-radius: 10px;
}

/* 詳細ブロックの要約（質問）部分 */
.my-faq-block summary {
    list-style: none;
    color: #2f8cff;
    font-weight: bold;
}

/* 詳細ブロックの要約（質問）部分のアイコン */
.my-faq-block summary::before {
    content: "Q";
    color: #ffffff;
    background-color: #2f8cff;
    font-weight: bold;
    padding: 0 5px;
    margin-right: 10px;
    border-radius: 5px;
}

/* 詳細ブロックの内容（回答）部分を表示するときのアニメーション */
@keyframes open {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}
.my-faq-block[open] summary~* {
    animation: open 0.2s
}

/* 詳細ブロックの内容（回答）部分を消すときのアニメーション */
@keyframes close {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}
.my-faq-block.closing summary~* {
    animation: close 0.2s
}

同じく子テーマのfunctions.phpに、次のQ&A詳細ブロックが消えるときのアニメーションに関する処理を追加します。

// Q&A詳細ブロックが消えるときのアニメーションを設定する
function my_faq_block_close_animation()
{
?>
    <script>
        // すべてのQ&A詳細ブロックを取得する
        let faq_blocks = document.querySelectorAll(".my-faq-block");
        faq_blocks.forEach((faq_block) => {
            // Q&A詳細ブロックが消えるときに.closingアニメーションを適用する
            faq_block.addEventListener("click", (e) => {
                if (faq_block.hasAttribute("open")) {
                    e.preventDefault();
                    faq_block.classList.add("closing");
                }
            });

            // Q&A詳細ブロックが消えたら.closingアニメーションを無効にする
            faq_block.addEventListener("animationend", (e) => {
                if (e.animationName === "close") {
                    faq_block.removeAttribute("open");
                    faq_block.classList.remove("closing");
                }
            });
        });
    </script>
<?php
}
add_action('wp_footer', 'my_faq_block_close_animation');

以上のコードを追加してページをプレビューすると、はじめにご紹介したようなQ&Aが表示されます。

まとめ

WordPressサイトでQ&Aをプラグインを使わずにブロックエディタで作る方法をご紹介しました。

ユーザー様より実際にあった問い合わせ内容をQ&A形式でWEBサイトの掲載すると、同じような疑問を抱えている他の方の助けになります。

カナメグローバルホールディングスではWebサイトの制作や保守を行っています。

WordPressサイトも対応していますので、ぜひお気軽にご相談ください。