アコーディオンUIとは？
アコーディオンUIとは、ページを開いた時は、タイトル行のみを表示しておき、ユーザがクリックした時に詳細を表示するようになUIのことです。
これを表示するスニペットは、nopwop-accordion-uiです。
使い方
WordPress編集画面で、アコーディオンUIを表示させたいところに「カスタムHTML」ブロックを追加し、以下のコードをコピペします。
<script src="https://cdn.jsdelivr.net/gh/nopwop/nopwop@0.1/dist/nopwop-accordion-ui.min.js"></script>そのすぐ下に、「段落」ブロックを１つ作り、そこにタイトル行、つまり、デフォルトで表示されるテキストを記載します。
さらに、タイトル行を記載した「段落」ブロックのすぐ下に別の「段落」ブロックを挿入し、そこにアコーディオンUIが開いた時に表示されるテキストを記載します。
具体的にエディタ上では、以下のようにブロックを配置します。
実際の表示
実際に表示すると以下のようになります。
緑色のバーをクリックしてみて下さい。アコーディオンUIが開きます。
A. nopwopとはなんですか？
Q. nopwopは、no-plugin, withou phpの略で、ノップウォップと読みます。WordPressサイトをプラグインを使わず、PHPのプログラミングをすることなく、当サイトのスニペットをコピペするだけで、機能を拡張にするツール群の名前です。
色指定のオプション
色を変えるには、以下のようにbackground-colorオプションや、colorオプションで、それぞれ背景色やテキスト色をしていできます。
色は、CSSで指定するのと同様の色指定（RGB指定など）が使えます。
<script background-color="pink" color="red" src="https://cdn.jsdelivr.net/gh/nopwop/nopwop@0.1/dist/nopwop-accordion-ui.min.js"></script>実際の表示は以下のようになります。
A. nopwopとはなんですか？
Q. nopwopは、no-plugin, withou phpの略で、ノップウォップと読みます。WordPressサイトをプラグインを使わず、PHPのプログラミングをすることなく、当サイトのスニペットをコピペするだけで、機能を拡張にするツール群の名前です。
デモページ
当サイトのFAQページはアコーディオンUI スニペットを使って実現していますでの、そちらもご覧ください。