企業サイトなどでよく見かける「よくある質問」の部分。通常質問だけ表示されていて、クリックすると回答が開く、そしてもう一度クリックすると回答が閉じる手法が使われているのをよく見かけますね。
例としてはこんな感じです。実際にクリックしていただくと「ああ、こんなのあるある！」と納得していただけると思います。
このような開閉式コンテンツのことを、専門用語ではアコーディオンコンテンツといい、WordPressでは、これを実装するための便利なプラグインがたくさんリリースされています（プラグインの追加から「accordion」で検索すると出てきます）。
ただ、WordPressのプラグインは基本的にどのページで使われてもいいようにすべてのページで必要なプログラムを読み込むようになっているため、表示速度に影響が出ることも少なくありません。
しかもこうしたアコーディオンコンテンツはサイト内の特定の固定ページなどでのみ使用することが多いですから、そのためだけに全ページに影響が出るかもしれない．．というのは避けたいところです。
そこで今回は比較的簡単に上のデモのようなアコーディオンコンテンツを、プラグインなしで必要なページだけに導入する方法を紹介します。
サイトは使っているテーマなどによってデザインの適用のされ方が異なるので、最終的にご自身で調整を行っていただく必要がありますが、「え！こんなに簡単にできるの？」とびっくりする位簡単ですから、ぜひ実装してみていただければと思います。
このページ内で紹介している長いコードの表示／非表示は、本ページの方法を使って開閉可能にしてありますから、実際に体感していただけたらと思います
プラグインなしで任意の場所へアコーディオンコンテンツを作る方法
冒頭でも表示しましたが、完成形はこちらになります。
いきなりですが、投稿（または固定ページ）を新規作成し、「カスタムHTML」ブロックを挿入して、以下のコードをコピペして、プレビューしてみてください。
[habone-accordion title=”コードの内容を表示” class=”blue” header=””]
<div class="faq-content">
<div class="faq-button">Q:質問１質問１質問１質問１質問１質問１</div>
<div class="faq-detail">A:回答１回答１回答１回答１回答１回答１回答１回答１回答１回答１</div>
</div>
<div class="faq-content">
<div class="faq-button">Q:質問２質問２質問２質問２質問２質問２</div>
<div class="faq-detail">A:回答１回答１回答１回答１回答１回答１回答１回答１回答１回答１</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>[/habone-accordion]
以上です。．．．って早すぎですね。もしもアコーディオン表示にならず、下のように全部表示されてしまっている場合には、画像下のコードと入れ替えて試してみてください。
[habone-accordion title=”コードの内容を表示” class=”blue” header=””]
<div class="faq-content">
<div class="faq-button">Q:質問１質問１質問１質問１質問１質問１</div>
<div class="faq-detail">A:回答１回答１回答１回答１回答１回答１回答１回答１回答１回答１</div>
</div>
<div class="faq-content">
<div class="faq-button">Q:質問２質問２質問２質問２質問２質問２</div>
<div class="faq-detail">A:回答１回答１回答１回答１回答１回答１回答１回答１回答１回答１</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>[/habone-accordion]
いかがですか？どちらかのコードで動けば実装完了です。
ここまでは、長い解説記事を読みながら設置したのに動かなかった．．．なんてことのないよう、まずは「動くかどうか」を確認していただくために、コピペ用コードを紹介しました。
上記コードで問題なく動作した方は、ここから先でコードについての解説をしていますので、理解いただいた上でカスタマイズや実際のページへの設置をしていただければと思います。
先に紹介したサンプルで、本サイトでは動くというのは確認いただけてるはずですから、逆に動かなかったという方は、環境の問題、WordPress本体の問題、テーマやプラグインとの兼ね合いの問題などを解決しないと、本方法では実装できないと言えます。
自身で解決できない場合は、このコンテンツの実装のために他の動作に不具合を起こしてもいけませんから、この段階で他の方法を探された方が無難でしょう。
アコーディオンコンテンツのコード解説
それでは実際に貴サイトで使えるようにしていくためにコードの解説をしていきます。
上記コピペコードでは１つのカスタムHTMLブロックへまとめてコードを記述していますが、アコーディオンコンテンツを実装するためには以下の３つのコードが組み合わさっています。
- 実際に表示させるためのHTMLコード
- HTMLコードに動きを持たせるためのスクリプト（今回はjQuery）
- HTMLで記述した部品に対するデザインコード
１つ１つ分解して説明していきます。
アコーディオンコンテンツ用のHTMLコード
コピペ用コードの中で、HTMLコードは以下の部分になります。
<div class="faq-content">
<div class="faq-button">Q:質問１質問１質問１質問１質問１質問１</div>
<div class="faq-detail">A:回答１回答１回答１回答１回答１回答１回答１回答１回答１回答１</div>
</div>
<div class="faq-content">
<div class="faq-button">Q:質問２質問２質問２質問２質問２質問２</div>
<div class="faq-detail">A:回答１回答１回答１回答１回答１回答１回答１回答１回答１回答１</div>
</div>後述するjQueryの部分を動作するようにしなければ、単純なHTMLですので、質問と回答がすべて見える状態で表示されます。
上記は「質問」に対する「回答」を２つ作っていますが、
<div class="faq-content">
<div class="faq-button">Q:質問２質問２質問２質問２質問２質問２</div>
<div class="faq-detail">A:回答１回答１回答１回答１回答１回答１回答１回答１回答１回答１</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%この問題でしょう）。
jQueryの関数指定は「$」じゃないの？
少し脱線しますが、このページで紹介しているjQueryのコードはすべて先頭（関数）が「$」ではなく、「jQuery」と書いています。
これは、今回のjQueryをWordPressに標準で読み込まれるライブラリ（jQueryを動かすための基本プログラム）を使っているからです。
何度か登場してますが、以下の記述がそれにあたります。
<script type="text/javascript" src="/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>src(参照先)の部分、「https:～」になっていないので、外部リンク先ではないですよね？
つまりサイト内部から基本プログラムを読み込んで、記述したjQueryを動かしているんです。
一般的に使われている「$」を「jQuery」に変えるのは、他のライブラリを使うスクリプトと勘違いしない（コンフリクトしない）ようにするためで、例えばGoogleのような外部のライブラリを使う場合には「$」でも動作するかもしれません。
なぜかもしれない．．とするのかというと、読み込まれる環境によってまちまちだからです（曖昧な表現ですみません）。
よくjQueryのコード紹介をするページで「$」が使われているケースがあり、動作しないなぁと首をかしげることがありますが、WordPressのライブラリを使うのであれば、「$」の部分を「jQuery」に変えることで確実に処理されますから覚えておくといいかも知れません。
アコーディオンコンテンツの見た目を決定するデザインコード（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の特定ページへアコーディオンコンテンツを挿入する方法でした。
【応用編】ショートコードで囲んだ複数のブロックを開閉させる方法
ここまでは、カスタムHTMLブロックへコードを書き、そこに書かれたものが開閉するという仕組みを紹介しました。
でも、内容をすべてHTMLで書くというのは、ブロックエディタ時代としてちょっとアレな感じがします。
かといって独自ブロックを作るというのもハードルが高い．．という方も多いでしょう。
頑張って作ってみるか！と一念発起するよりは、個人的には、ブロックにこだわる（編集画面上で何としてでも動かしたい）なら「Accordion Blocks」などのアコーディオン（開閉）ブロックコンテンツが作れるプラグインを使った方が簡単ですしね。
そこで、WordPressに旧来からある機能である、囲み型ショートコードを使って開始～終了ショートコードの間にあるブロックはすべて開閉させるという仕組みを作る方法を紹介しておきます。
もちろん通常通り、ショートコードブロックに囲みショートコードを挿入し、開始・終了コード間に文字列を入れれば、その部分が開閉されるようになります
基本的にはコピペして動作するか確認してから、どうなってるのかしら？と解説を読んでもらえれば大丈夫です。
この機能を追加するには、テーマのfunctions.phpへの追記が必要です。スキルが不安な方や、万が一トラブルが発生したときに自力で修復できるスキルのない方は、やめておいた方が無難です。
囲み型ショートコードでアコーディオンを作るためのコードを追加しよう
いくつかに分けて書いていますが、順番にテーマのfunctions.phpへ追加していけばOKです。
[habone-accordion title=”コードの内容を表示” class=”blue” header=””]
/****** アコーディオンショートコード ******/
/* スクリプトの読み込み */
function ha_accordion_script_init(){
echo "
<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>
";
}
add_action('wp_head','ha_accordion_script_init');/* CSSの出力 */
function ha_accordion_css_init(){
echo "<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>";
}
add_action('wp_head','ha_accordion_css_init');/* アコーディオンショートコード */
function ha_accordion_content_shortcode( $atts, $content = null ) {
$atts = extract(shortcode_atts( array(
'title' => 'タイトル',
'class' => '',
), $atts ));
//titleパラメーターがあるかどうか、パラメーター値があるかどうかで分岐
if(empty($title)){
$title = 'タイトル';
}else{
$title = esc_attr($title);
}
//classパラメーターがあるかどうか、パラメーター値があるかどうかで分岐
if(empty($class)){
$class = 'faq-content';
}else{
$class = 'faq-content '.esc_attr($class);
}
$content_before ='<div class="'.$class.'"><div class="faq-button">'.$title.'</div><div class="faq-detail">';
$content_after ='</div></div>';
$content = $content_before .$content .$content_after;
return $content;
}
add_shortcode('ha-accordion', 'ha_accordion_content_shortcode');[/habone-accordion]
ショートコードを使って実際にアコーディオンコンテンツを動かしてみよう
全部のコードを追加して保存したら、投稿編集画面を開き、以下のショートコードを追加してください。
[ha-accordion title="" class=""][/ha-accordion]そして、2つのショートコードの間に画像など適当なブロックを入れて、プレビューしてみてください。
．．．いかがでしょう？上のように「タイトル」というグレーの帯が現れて、クリックすると開閉して内容が表示されるようになりましたか？
以上、終わりです（笑）。
うまくいかない場合、対処方法はケースバイケースですので、申し訳ないですが、ご自身で探ってみてください。
以下、コード解説です。
ショートコードで開閉型コンテンツを作るためのコードの解説
先ほど追加した3つのコードについて順に説明していきます。
jQueryを読み込ませる
先ほど紹介したうちの以下のコードが対象部分です。
/****** アコーディオンショートコード ******/
/* スクリプトの読み込み */
function ha_accordion_script_init(){
echo "
<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>
";
}
add_action('wp_head','ha_accordion_script_init');コード自体は、ページ前半で紹介した、開閉させるためのjQueryをテーマのfunctions.phpからテーマヘッダー内へ出力させるためのものです。
参考：wp_head
これについては、このままだと、全ページのヘッダー内へjQueryが出力され、アコーディオンコンテンツのないページでは無駄なコードが出力されることになるので、ページ指定するとか、以下のページを参考にショートコードがある場合のみ出力するようにするとか工夫するといいでしょう。
特定のショートコードが本文内にあるかどうかによって処理を分岐する方法
また、こちらも前述してますが、jQueryの読み込みに問題がないようでしたら、コード中の以下の部分は削除してもかまいません（その方が処理は若干速くなるでしょう）。
<script type='text/javascript' src='/wp-includes/js/jquery/jquery.min.js' id='jquery-core-js'></script>CSSを読み込ませる
先ほど紹介したうちの以下のコードが対象部分です。
/* CSSの出力 */
function ha_accordion_css_init(){
echo "<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>";
}
add_action('wp_head','ha_accordion_css_init');こちらもコード自体はページ前半で紹介したスタイルコードをテーマのfunctions.phpからヘッダーへ出力させるためのコードです。
参考：wp_head
これについても、jQueryと同様に、全ページのヘッダー内へCSSが出力され、アコーディオンコンテンツのないページでは無駄なコードが出力されることになるので、ページ指定したり、以下のページを参考にショートコードがある場合のみ出力するようにするなどして工夫するといいでしょう。
特定のショートコードが本文内にあるかどうかによって処理を分岐する方法
ショートコードで動作させる機能を作る
先ほど紹介したうちの以下のコードが対象部分です。
/* アコーディオンショートコード */
function ha_accordion_content_shortcode( $atts, $content = null ) {
$atts = extract(shortcode_atts( array(
'title' => 'タイトル',
'class' => '',
), $atts ));
//titleパラメーターがあるかどうか、パラメーター値があるかどうかで分岐
if(empty($title)){
$title = 'タイトル';
}else{
$title = esc_attr($title);
}
//classパラメーターがあるかどうか、パラメーター値があるかどうかで分岐
if(empty($class)){
$class = 'faq-content';
}else{
$class = 'faq-content '.esc_attr($class);
}
$content_before ='<div class="'.$class.'"><div class="faq-button">'.$title.'</div><div class="faq-detail">';
$content_after ='</div></div>';
$content = $content_before .$content .$content_after;
return $content;
}
add_shortcode('ha-accordion', 'ha_accordion_content_shortcode');このコードを作っていった流れを簡単に解説すると
- 基本的な囲み型ショートコードを作るためのコードを作る
- タイトルが替えられるように、「title」というショートコードパラメーターを作る
- 独自のCSSクラスが付加できるように、「class」というショートコードパラメーターを作る
- ショートコード内にパラメーター部分「title=””」「class=””」が未指定や記述自体がなかった場合でもうまく動作するようにする
- 開閉コンテンツ用のHTML部分の変数を作り、$contentというショートコード間にあるコンテンツの前後に必要なHTMLが出力されるようにする
と、囲み型ショートコードにいろいろな要素を加えて作っています。
自身のサイトでのみ使うショートコードなら気にする必要はないかと思いますが、パラメーター付きのショートコードでは4の部分が欠落していると、動作しない場合が出て「あれ？」となることがありますから、コード内にある「〇〇パラメーターがあるかどうか、パラメーター値があるかどうかで分岐」の下に書かれているコードは覚えておいて損はないかも知れません。
囲み型ショートコードの使い方については以下（ネット上で見つけたページ）を参考にされるとよいでしょう。
ショートコードを使ってアコーディオン表示させた例（一応完成形）
私が細々と配布しているWordPress用無料テーマ【HABONE】の次バージョンへこのページで紹介しているショートコードを使ったアコーディオン表示を導入しました。
これまで紹介した基本的な機能に加えて以下のような仕様（動作方法や一部コードの変更）を追加した形にしてあります。
- jQueryとCSSは別のファイルで作成し、ショートコードがある場合のみヘッダーへ読み込まれるようにした
- 開閉ボタン（アコーディオンのヘッダー部分）は基本をspanタグとして、新たに「header」というパラメーターを追加して、見出しタグ（h2やh3など）などへ変更できるようにした
- 【HABONE】に内包しているicomoonの矢印アイコンをタイトル前に表示させ、かつ、ホバー時と標準時で矢印の向きが変わるようにした
- 「赤」「青」「緑」「黄色」「黒」「標準」をclassパラメーターで指定したときに、それぞれの色で表示されるようにした
このサイトも当然【HABONE】テーマを使用していますので、実際にこんな感じで表示できるようになります（一応完成形としておきます）。
標準
ショートコード
[habone-accordion title="標準色のアコーディオンコンテンツ" class="" header=""]
コンテンツの中身（段落ブロックで挿入した例）
[/habone-accordion]表示サンプル
[habone-accordion title=”標準色のアコーディオンコンテンツ” class=”” header=””]
コンテンツの中身（段落ブロックで挿入した例）
[/habone-accordion]
赤系
ショートコード
[habone-accordion title="赤系のアコーディオンコンテンツ" class="red" header=""]
コンテンツの中身（段落ブロックで挿入した例）
[/habone-accordion]表示サンプル
[habone-accordion title=”赤系のアコーディオンコンテンツ” class=”red” header=””]
コンテンツの中身（段落ブロックで挿入した例）
[/habone-accordion]
青系
ショートコード
[habone-accordion title="青系のアコーディオンコンテンツ" class="blue" header=""]
コンテンツの中身（段落ブロックで挿入した例）
[/habone-accordion]表示サンプル
[habone-accordion title=”青系のアコーディオンコンテンツ” class=”blue” header=””]
コンテンツの中身（段落ブロックで挿入した例）
[/habone-accordion]
緑系
ショートコード
[habone-accordion title="緑系のアコーディオンコンテンツ" class="green" header=""]
コンテンツの中身（段落ブロックで挿入した例）
[/habone-accordion]表示サンプル
[habone-accordion title=”緑系のアコーディオンコンテンツ” class=”green” header=””]
コンテンツの中身（段落ブロックで挿入した例）
[/habone-accordion]
黄色系
ショートコード
[habone-accordion title="黄色系のアコーディオンコンテンツ" class="yellow" header=""]
コンテンツの中身（段落ブロックで挿入した例）
[/habone-accordion]表示サンプル
[habone-accordion title=”黄色系のアコーディオンコンテンツ” class=”yellow” header=””]
コンテンツの中身（段落ブロックで挿入した例）
[/habone-accordion]
ダーク系
ショートコード
[habone-accordion title="ダーク系のアコーディオンコンテンツ" class="dark" header=""]
コンテンツの中身（段落ブロックで挿入した例）
[/habone-accordion]表示サンプル
[habone-accordion title=”ダーク系のアコーディオンコンテンツ” class=”dark” header=””]
コンテンツの中身（段落ブロックで挿入した例）
[/habone-accordion]
今回のアコーディオンコンテンツに限らず、何がなんでもブロックで！と無理して独自ブロックにチャレンジしなくても、WordPressでは、それ用のプラグインを使ったり、このページで紹介したように、カスタムHTMLやショートコードを使ったりといろいろな方法で機能実装ができます。
最後に超個人的な意見として、WordPressの機能追加に関する情報はネット上にたくさん公開されていますから、わざわざ高価な有料テーマなど使わなくても、必要なものは自作して追加すればいいのではないか？と提案しつつ、アコーディオンコンテンツの作成方法についての紹介を終了します。
本ページの更新（変更）履歴
| 更新日 | 更新内容 |
|---|---|
| 2021年12月 9日 | 本ページを公開しました |
| 2022年 8月15日 | ショートコードを使って複数のブロックを開閉可能にする方法を追記しました |
| 2022年 8月16日 | 【HABONE】テーマへの導入事例と表示サンプルを追加しました |
