JIN

【WordPress】JINでアコーディオンボックスをカスタマイズする方法【Shortcodes Ultimate】

こんにちは!だちたまです。

先日、WordPressのテーマをTwenty SeventeenからJINに変更したのですが、記事を書くにつれ、アコーディオンボックスを導入したくなりました。

アコーディオンボックスとは、記事の内容を自由に表示・非表示に切り替える機能です。

ところが、JIN制作者のひつじさんによると、JINでは標準で実装されていない様子。

だちたま
だちたま
SEOよりも、記事を見やすくお届けしたい…!

という訳で、「Shortcodes Ultimate」というプラグインを使いつつ、少しデザインを変更して、JINでアコーディオンボックスを実装してみましたので、その方法を解説したいと思います。

  • カスタマイズは自己責任でお願いします。
  • CSSのカスタマイズは子テーマを用意すると良いです。
  • カスタマイズ前にはバックアップをおすすめします。
  • コードを記入しても、環境によってうまく反映されない場合があるかもしれませんが、ご了承ください。

JINでアコーディオンボックスをカスタマイズした環境

だちたま
だちたま
アコーディオンボックスのカスタマイズ方法を説明する前に、私がアコーディオンボックスを実装した環境をお伝えします。
  • WordPressテーマはJIN(バージョン2.060)
  • Font Awesomeは使わない(JINのオリジナルアイコンを使用)
  • プラグイン「Shortcodes Ultimate」を使用
  • アコーディオンボックスのデザインはCSSでカスタマイズ

WordPressのテーマはJIN。バージョンは2.060です。

また、Font Awesomeのアイコンは使用しませんでした。

なぜなら、JINではFont Awesomeを使うとサイトの速度が遅くなるから。

代わりにJINで標準実装されているオリジナルのアイコンを使いました。

さらに、アコーディオンボックスの仕組みを導入するため、「Shortcodes Ultimate」というプラグインを使用しました。

Shortcodes Ultimateとは

50以上の装飾機能を利用できるWordPressプラグイン

参考サイト:NETAONE

Shortcodes Ultimateは、50以上のデザインパーツを利用して記事を装飾できるプラグインで、簡単にアコーディオンボックスの機能を導入することができます。

ただし、個人的には用意されているデザインはあまり可愛くないと感じたので、自分でCSSを修正して好みのデザインに変更しています。

だちたま
だちたま
CSSは後述しますね。

JINでアコーディオンボックスをカスタマイズする準備

それでは、JINでアコーディオンボックスをカスタマイズした手順について、順を追って説明していきましょう。

プラグイン「Shortcodes Ultimate」をインストール

ここでは、以下の手順に沿って説明します。

  1. プラグイン「Shortcodes Ultimate」をインストール・有効化
  2. JINで「Shortcodes Ultimate」が設定できない場合の対処を実施
  3. ショートコード「スポイラー」が使えるか確認

まずは、プラグイン「Shortcodes Ultimate」をインストールして有効化しましょう。

これが無いと始まりません。

Shortcodes Ultimateのインストール方法

  • WordPressメニューから「プラグイン」を押下。
  • 「新規追加」ボタンを押下。
  • プラグイン検索欄に「Shortcodes Ultimate」を入力して「今すぐインストール」「有効化」ボタンを押下。

なお、JINでは「functions.php」を修正しないと「Shortcodes Ultimate」のショートコードが使えないようです。

以下のサイトを参考にして、「functions.php」を修正してみてください。

ここまでの作業が完了したら、「Shortcodes Ultimate」のショートコードを使って「スポイラー」が使えるか確認してみましょう。

使用方法は以下のとおり。

スポイラーの使用方法

まずは「投稿の編集」画面から非表示にしたい文章を選択し、「ショートコードの挿入」ボタンを押しましょう。

そうしたら、「Shortcodes Ultimate」のメニューが表示されますので、「スポイラー」を選択しましょう。

すると、スポイラ―のタイトルなど、詳細を決めるメニューが表示されます。

ここでは、タイトルのみ設定し、一番下にある「ショートコードを挿入」ボタンを押下しましょう。

以下のとおり、「投稿の編集」画面で非表示にしたい文章がショートコードに囲まれたと思います。

これで設定は完了です。

プレビュー画面をみると、以下のようにアコーディオンボックスが表示されると思います。

だちたま
だちたま

上記は画像です。押しても動作しませんので、あしからず。

今回はShortcodes Ultimateの「スポイラー」を使用します。他に、「アコーディオン」がありますが、こちらは使用しません。

Shortcodes Ultimateにおけるスポイラーとアコーディオンの違いは、以下のサイトで説明されていますので参考にして下さい。

参考:LEVELLING LIFE!

アコーディオンボックスデザインのCSSコード

このままではデザインが少し味気ないので、以下のとおり修正してみました。

アコーディオンボックスの完成イメージ

修正前(こちらは修正前のイメージです)

※アコーディオンボックスが閉じているとき

※アコーディオンボックスが開いたとき

修正後(こちらは修正後のイメージです)

※アコーディオンボックスが閉じているとき

※アコーディオンボックスが開いているとき

※こちらは本物のアコーディオンボックスです。実際に触ってみてくださいね。

これはスポイラーのテストです
アコーディオンボックスのテスト表示

画像を入れたり

だちたま
だちたま
吹き出しアイコンを入れたりすることもできますよ

 

  • アイコンを最後尾に移動してみました。(アイコンはJINのオリジナルアイコンを使用)
  • アコーディオンボックスをライトグレーにして、少し丸みを持たせました。
  • カーソルをアイコンボックスに重ねると、グレーに色が変化します。
  • タイトルは「気になる方はここをクリック」などにすると使い勝手が良いですね。

アコーディオンボックスのCSSコード

CSSのコードは以下を使用してみてください。

【JINのアコーディオンボックス】CSSだけで実装できなかった理由

JINでのアコーディオンボックスのカスタマイズですが、本当はプラグイン「Shortcodes Ultimate」を使わずCSSだけで実装したかったんです。

数時間色々とCSSをいじったり、ボタン動作のテストをしてみたのですが、上手くいかず、以下の現象が発生して断念しました。

  1. 「投稿の編集」画面でビジュアルエディタとテキストエディタを行き来していると、アコーディオンボックスが機能しなくなる。
  2. JINの吹き出しなどの一部の機能がアコーディオンボックス内で表示されなくなる。

1番目については、調べてみるとどうやら「タグ同士の間にbrタグやpタグが自動挿入されてしまっている」から、エディタを切り替えるとアコーディオンボックスの開閉ができなくなるのだとか。

使い勝手が悪くなるので、嫌な問題ですよね。

2番目については私のCSSの記載方法が悪かったのか、原因は特定できたものの解決策がわからなくて断念。

だちたま
だちたま

いずれにしてもCSSだけで実装すると少し大変なので、Shortcodes Ultimateの機能を使って、デザインだけ変更してみることをおすすめします。

JINでアコーディオンボックスをカスタマイズする方法まとめ

今回はJINでアコーディオンボックスをカスタマイズする方法をまとめてみました。

プラグイン「Shortcodes Ultimate」を使って、デザインだけ編集しています。

JINでアコーディオンボックスを実装したいと考えている方は是非参考にしてみてくださいね。

だちたま
だちたま

カスタマイズはくれぐれも自己責任でお願いいたします。バックアップは取りましょう!