プラグインを使わず、PHPも不要な、WordPressのカスタマイズ方法
アコーディオンUIを実現するコピペスニペット

アコーディオンUIを実現するコピペスニペット

アコーディオンUIとは?

アコーディオンUIとは、ページを開いた時は、タイトル行のみを表示しておき、ユーザがクリックした時に詳細を表示するようになUIのことです。

これを表示するスニペットは、nopwop-accordion-uiです。

アコーディオンUIとは、このようなUIです。

使い方

WordPress編集画面で、アコーディオンUIを表示させたいところに「カスタムHTML」ブロックを追加し、以下のコードをコピペします。

<script src="https://cdn.jsdelivr.net/gh/nopwop/nopwop@0.1/dist/nopwop-accordion-ui.min.js"></script>

そのすぐ下に、「段落」ブロックを1つ作り、そこにタイトル行、つまり、デフォルトで表示されるテキストを記載します。

さらに、タイトル行を記載した「段落」ブロックのすぐ下に別の「段落」ブロックを挿入し、そこにアコーディオンUIが開いた時に表示されるテキストを記載します。

具体的にエディタ上では、以下のようにブロックを配置します。

「カスタムHTML」→「段落」→「段落」と3つのブロックで実現する。(ブルーの網掛けのテキストが、「段落」ブロック)

実際の表示

実際に表示すると以下のようになります。

緑色のバーをクリックしてみて下さい。アコーディオン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 スニペットを使って実現していますでの、そちらもご覧ください。

コメントを残す

メールアドレスが公開されることはありません。