ブログ術

【10分で完了】WordPress「JIN」でアコーディオンボックスを実装【プラグイン「Shortcodes Ultimate」を使用】

この記事のまとめ

WordPressテーマ「JIN」
見た目に楽しいボックスデザインなど様々なパーツが用意されていますが、一部実装されていない機能もあります。
その一つが「アコーディオンボックス」です。
本記事ではプラグイン「Shortcodes Ultimate」を使ってJINでアコーディオンボックスを使う方法を解説します。

おしゃれでブログ初心者にも使いやすいWordPressテーマ「JIN

当ブログでも使わせていただいており、初期状態で色んな機能が実装されていますが、一部実装されていない機能もあります。

その一つが、「アコーディオンボックス」です。

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

 

いちまり
いちまり
一部の人しか興味がない情報を非表示にしたいときに重宝するんだよね。
よめ
よめ
必要ない情報を長々と見せれられも、ストレスになるもんね。

 

ですが、JIN制作者のひつじさんによると導入をためらっている様子…。

なので本記事では、プラグイン「Shortcodes Ultimate」を使って簡単にJINでアコーディオンボックスを使えるようにしました。

CSSを修正してデザインも変更したので、あわせてその方法も解説します。

  • カスタマイズは自己責任でお願いします。
  • CSSのカスタマイズは子テーマを用意すると良いです。
  • カスタマイズ前にはバックアップをおすすめします。

JINでアコーディオンボックスを実装する手順

手順は以下のとおりです。

  • STEP1
    Shortcodes Ultimateをインストール
    プラグイン「Shortcodes Ultimate」をインストールします。

  • STEP2
    functions.phpを修正

    JINではShortcodes Ultimateのプラグインを初期状態で正常に動作させることができません。

    なので、公式サイトの手順に従って、「functions.php」を修正します。

  • STEP3
    CSSをコピー&ペースト

    本記事にあるCSSをコピペし、デザインを変更して完了です。

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

ステップ1.「Shortcodes Ultimate」をインストール

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

 

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

 

ステップ2.「functions.php」を修正

functions.phpを修正してShortcodes Ultimateのショートコードを使えるように設定していきます。

JINの公式ページで設定方法が紹介されていますので、確認してfunctions.phpを修正しましょう。

\JIN公式ページで確認/

 

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

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

 

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

 

以下のとおりスポイラ―のタイトルなど、詳細を決めるメニューが表示されますので、タイトルのみ設定し、一番下にある「ショートコードを挿入」ボタンを押下しましょう。

 

「投稿の編集」画面で非表示にしたい文章がショートコードに囲まれたら完了です。

 

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

※以下は画像なので、押しても動作しません。

Shortcodes Ultimateには「アコーディオン」がありますが、こちらは使用しません。

ステップ3.CSSをコピー&ペースト

CSSコピーの前に、本記事のCSSをコピーすると、どんなデザインになるのかご紹介します。

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

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

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

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

以下のボックスは、本物のアコーディオンボックスです。実際に押して試してみてください。。

実際に押して開閉してみてね
テスト表示

画像を入れたり

いちまり
いちまり
吹き出しも入れられるよ

 

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

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

CSSの追加方法

CSSは以下のいずれかのメニューから追加できます。

  • 外観➡テーマエディター➡style.css(子テーマ)
  • 外観➡カスタマイズ➡追加CSS

 

これでOKです!

WordPress「JIN」でアコーディオンボックスを実装|まとめ

本記事では、WordPressテーマ「JIN」でアコーディオンボックスを実装する方法を書きました。

本当はプラグインを使用せず実装したかったんですが、なかなかうまく動作せず、結局プラグインを使用することになりました。

ですが、デザインも好みに修正できて求めていた機能を使えるようになったので満足。

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