任意の投稿や固定ページへプラグインなしでアコーディオンコンテンツを作る方法

任意の投稿や固定ページへプラグインなしでアコーディオンコンテンツを作る方法

企業サイトなどでよく見かける「よくある質問」の部分。通常質問だけ表示されていて、クリックすると回答が開く、そしてもう一度クリックすると回答が閉じる手法が使われているのをよく見かけますね。

例としてはこんな感じです。実際にクリックしていただくと「ああ、こんなのあるある!」と納得していただけると思います。

Q:質問1質問1質問1質問1質問1質問1
A:回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1
Q:質問2質問2質問2質問2質問2質問2
A:回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1

このような開閉式コンテンツのことを、専門用語ではアコーディオンコンテンツといい、WordPressでは、これを実装するための便利なプラグインがたくさんリリースされています(プラグインの追加から「accordion」で検索すると出てきます)。

ただ、WordPressのプラグインは基本的にどのページで使われてもいいようにすべてのページで必要なプログラムを読み込むようになっているため、表示速度に影響が出ることも少なくありません。

しかもこうしたアコーディオンコンテンツはサイト内の特定の固定ページなどでのみ使用することが多いですから、そのためだけに全ページに影響が出るかもしれない..というのは避けたいところです。

そこで今回は比較的簡単に上のデモのようなアコーディオンコンテンツを、プラグインなしで必要なページだけに導入する方法を紹介します。

サイトは使っているテーマなどによってデザインの適用のされ方が異なるので、最終的にご自身で調整を行っていただく必要がありますが、「え!こんなに簡単にできるの?」とびっくりする位簡単ですから、ぜひ実装してみていただければと思います。

ページ上部へ戻る▲

プラグインなしで任意の場所へアコーディオンコンテンツを作る方法

冒頭でも表示しましたが、完成形はこちらになります。

Q:質問1質問1質問1質問1質問1質問1
A:回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1
Q:質問2質問2質問2質問2質問2質問2
A:回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1

いきなりですが、投稿(または固定ページ)を新規作成し、「カスタムHTML」ブロックを挿入して、以下のコードをコピペして、プレビューしてみてください。

<div class="faq-content">
<div class="faq-button">Q:質問1質問1質問1質問1質問1質問1</div>
<div class="faq-detail">A:回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1</div>
</div>
<div class="faq-content">
<div class="faq-button">Q:質問2質問2質問2質問2質問2質問2</div>
<div class="faq-detail">A:回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1</div>
</div>

<script type="text/javascript">
jQuery(function(){
  jQuery('.faq-button').click(function() {
    jQuery(this).toggleClass('selected');
    jQuery(this).next().slideToggle();
  }).next().hide();
});
</script>

<style>
.faq-button {
background: #777;
border: 1px solid #000;
padding: 12px;
color: #fff;
}


.faq-button:hover {
cursor: pointer;
}
.faq-content {
border: 1px solid #eee;
margin: 12px auto;
}
.faq-detail{
padding:12px;;
}
</style>

以上です。...って早すぎですね。もしもアコーディオン表示にならず、下のように全部表示されてしまっている場合には、画像下のコードと入れ替えて試してみてください。

任意の投稿や固定ページへプラグインなしでアコーディオンコンテンツを作る方法|Knowledge Base
<div class="faq-content">
<div class="faq-button">Q:質問1質問1質問1質問1質問1質問1</div>
<div class="faq-detail">A:回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1</div>
</div>
<div class="faq-content">
<div class="faq-button">Q:質問2質問2質問2質問2質問2質問2</div>
<div class="faq-detail">A:回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1</div>
</div>

<script type="text/javascript" src="/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>

<script type="text/javascript">
jQuery(function(){
  jQuery('.faq-button').click(function() {
    jQuery(this).toggleClass('selected');
    jQuery(this).next().slideToggle();
  }).next().hide();
});
</script>

<style>
.faq-button {
background: #777;
border: 1px solid #000;
padding: 12px;
color: #fff;
}


.faq-button:hover {
cursor: pointer;
}
.faq-content {
border: 1px solid #eee;
margin: 12px auto;
}
.faq-detail{
padding:12px;;
}
</style>

いかがですか?どちらかのコードで動けば実装完了です。

ここまでは、長い解説記事を読みながら設置したのに動かなかった...なんてことのないよう、まずは「動くかどうか」を確認していただくために、コピペ用コードを紹介しました。

上記コードで問題なく動作した方は、ここから先でコードについての解説をしていますので、理解いただいた上でカスタマイズや実際のページへの設置をしていただければと思います。

先に紹介したサンプルで、本サイトでは動くというのは確認いただけてるはずですから、逆に動かなかったという方は、環境の問題、WordPress本体の問題、テーマやプラグインとの兼ね合いの問題などを解決しないと、本方法では実装できないと言えます。

自身で解決できない場合は、このコンテンツの実装のために他の動作に不具合を起こしてもいけませんから、この段階で他の方法を探された方が無難でしょう。

ページ上部へ戻る▲

アコーディオンコンテンツのコード解説

それでは実際に貴サイトで使えるようにしていくためにコードの解説をしていきます。

上記コピペコードでは1つのカスタムHTMLブロックへまとめてコードを記述していますが、アコーディオンコンテンツを実装するためには以下の3つのコードが組み合わさっています。

  1. 実際に表示させるためのHTMLコード
  2. HTMLコードに動きを持たせるためのスクリプト(今回はjQuery)
  3. HTMLで記述した部品に対するデザインコード

1つ1つ分解して説明していきます。

アコーディオンコンテンツ用のHTMLコード

コピペ用コードの中で、HTMLコードは以下の部分になります。

<div class="faq-content">
<div class="faq-button">Q:質問1質問1質問1質問1質問1質問1</div>
<div class="faq-detail">A:回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1</div>
</div>
<div class="faq-content">
<div class="faq-button">Q:質問2質問2質問2質問2質問2質問2</div>
<div class="faq-detail">A:回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1</div>
</div>

後述するjQueryの部分を動作するようにしなければ、単純なHTMLですので、質問と回答がすべて見える状態で表示されます。

上記は「質問」に対する「回答」を2つ作っていますが、

<div class="faq-content">
<div class="faq-button">Q:質問2質問2質問2質問2質問2質問2</div>
<div class="faq-detail">A:回答1回答1回答1回答1回答1回答1回答1回答1回答1回答1</div>
</div>

の部分を追加して、内容を変更すれば、いくつでもアコーディオンコンテンツを追加できます。

HTMLをアコーディオン表示させるためのjQueryコード

クリックしたら回答を開く、もう一度クリックしたら質問だけにする..という動きを持たせるためのコードが以下になります。

<script type="text/javascript">
jQuery(function(){
  jQuery('.faq-button').click(function() {
    jQuery(this).toggleClass('selected');
    jQuery(this).next().slideToggle();
  }).next().hide();
});
</script>

詳しい説明は端折りますが、「.faq-button」というCSSクラスの付いた場所をクリックしたら、「selected」という属性を付けて展開し、もう一度クリックしたら閉じなさいというjQueryを使ったスクリプト(プログラム)です。

たったこれだけのコードで動きを持たすことができるんですね。まあ、このコード自体は何かを工夫して..というものではなく、そのままコピペで使えばよいでしょう。

1ページ内に複数のアコーディオンコンテンツを作る場合でも、上記スクリプトはページ内に一回書けばOKです。


ここで少し立ち止まって、コピペ用コードを紹介している場所を振り返ってみましょう。動かなかったら(アコーディオン表示にならなかったら)こちらに入れ替えてという一説があったのを覚えていますか?

今回のアコーディオン表示の動きをさせるのに「jQuery」というJavaScriptライブラリ(簡単な記述でJavaScriptを動作させるようにするための仕組み)を使用しています。

jQueryはWordPressでは標準で使用できるようになっていて、入れ替え前のコピペコードでも通常は問題なく動作します。

が、ページの表示高速化のために何等かのプラグインを導入したり、テーマによる高速化機能を使った場合には動作しないことがあります。

これは、ざっくり説明すると、WordPress本体のjQueryライブラリ(機能)が読み込まれる前に、jQueryを動かそうとしたことによる不具合で、原因は、前述した通りです。

これを解消するには高速化機能を停止すればよいのですが、アコーディオン表示を活かすためだけに、サイト全体に必要で有効にしている機能を停止するのは、ナンセンスです。

そこで対応策として、アコーディオン表示をさせるページだけ、アコーディオン表示させるjQueryが動く前に、確実にjQueryライブラリを読み込ませようというのが、以下のコード部分になります。

<script type="text/javascript" src="/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>

前述のコピペ用コード2つを見比べてもらうと、この部分のありなしだけが異なっていることに気付くと思いますから確認してみてください。

jQueryライブラリを読み込ませる必要があるかどうかは単純に「動く」「動かない」という判断でもいいですし、ブラウザのデベロッパーツールで「Uncaught…」というスクリプトエラーが出てるかどうかで判断できます(このあたりは長文になりそうなのでさらっとしておきます)。

このコードは、jQueryが動く前で、そのページに一か所書かれていればOKです

今回のアコーディオン表示に限らず、他のページや他のサイトで「コピペで..」と紹介されている記事を参考にjQueryを使ったコンテンツを使っても動かない場合のほとんどがこの手のエラーだと思いますので、上記コードをjQueryの前に入れてみると解決することが多いです(このページのようにデモがきちんと動いているサイトであればほぼ100%この問題でしょう)。

アコーディオンコンテンツの見た目を決定するデザインコード(CSS)

<style>
.faq-button {
background: #777;
border: 1px solid #000;
padding: 12px;
color: #fff;
}


.faq-button:hover {
cursor: pointer;
}
.faq-content {
border: 1px solid #eee;
margin: 12px auto;
}
.faq-detail{
padding:12px;;
}
</style>

デザインコードについては、上記をコピペしてデモのように表示される場合もあれば、テーマの仕様などによってもっと調整が必要(不要)な場合もありますし、色の変更や表示の仕方などを変える必要があるでしょうから、ご自身で調整してください。


以上、WordPressの特定ページへアコーディオンコンテンツを挿入する方法でした。

作者:

☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、このサイトでも使用している【HABONE】テーマの制作と配布を行っています。

年齢:40代 趣味/園芸・ペット・卓球