ワードプレスにアコーディンによるFAQを組み込んでみましょう

今回はワードプレスの特定のページにアコーディオンを組み込む方法を解説いたします。

ステップ１　アコーディオンを表示するJSファイルとCSSファイルのアップロード

まずこちらのZIPファイルをダウンロードの上、解凍しaccordion.min.cssと、accordion.min.jsをサーバー上のお好きな場所にアップロードしてください。

ステップ２　アコーディオンを表示するJSファイルとCSSファイルを投稿に埋め込む

下記のコードをテキストモード(HTML直接記載モード)で投稿や固定ページに記載してアコーディオンを表示する準備を行います。

<link rel="stylesheet" href="https://アップロードしたCSSのURL/accordion.min.css">
<script src="https://アップロードしたJSのURL/accordion.min.js"></script>

ステップ３　アコーディオンを創る

最後に下記のようなコードを>テキストモード(HTML直接記載モード)で投稿中に記載してアコーディオンを創っていきます。
※空白行がアコーディオンに入っていしまう場合は改行を削除されてみてください。

ac-qのクラスのところにタイトルを、
ac-aのクラスのところにアコーディオンが展開して表示されるコンテンツを記載します

<link rel="stylesheet" href="https://アップロードしたCSSのURL/accordion.min.css">
<script src="https://アップロードしたJSのURL/accordion.min.js"></script>

<div class="accordion-container">
<div class="ac">
<h4 class="ac-q">これはアコーディオンですか？</h4>
<div class="ac-a">はい　そうです</div>
</div>
<div class="ac">
<h4 class="ac-q">いくつでも増やすことができます</h4>
<div class="ac-a">2つ目のアコーディオンです</div>
</div>
</div>
<script>new Accordion('.accordion-container'); </script>

実装例；

WordPress ワードプレスのカスタマイズ、復旧のご相談ご依頼はWPドクターまでお気軽にお送りください