WEB

WordPressのショートコードで使えるアコーディオンボタンを実装する方法

今回は、Wordpressのショートコードで使えるアコーディオンボタンの実装方法を紹介します。
アコーディオンボタンを実装することで記事がまとまり見やすくなります。
アコーディオンボタンの実装には、JavaScriptやjQueryを使わずHTMLとCSSで作っているのでAMP対応のWEBサイトでも使用できます。

アコーディオンボタンのサンプル

こちらが今回実装するアコーディオンボタンのサンプルです。

サンプル

アコーディオンボタン実装方法

Functions.phpの編集を行うので、必ずバックアップを取っておきましょう。

【STEP1】CSSコードの貼付け

WordPressの[外観]-[カスタマイズ]-[追加CSS]に次のCSSコードを貼付けてください。

/*アコーディオンボタン*/

/*全体の設定*/
.hidden_box {
width: auto;
margin: 10px auto;
}

/*ボタン装飾*/
.hidden_box label {
font-size: 15px;
font-weight: bold;
position: relative;
display: block;
width: auto;
max-width: 385px;
margin: auto;
padding: 15px;
cursor: pointer;
text-align: center;
color: #fff;
border-radius: 8px;
background: #55617a;
}

/*ボタンホバー時*/
.hidden_box label:hover {
transition: .25s;
opacity: .75;
}

/*アイコン(プラス)*/
.hidden_box label:before {
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;
content: ‘ \f055’;
color: #fff;
}

/*アイコン(マイナス)*/
.hidden_box input:checked~label::before {
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;
content: ‘ \f056’;
color: #fff;
}

/*チェックボックス非表示*/
.hidden_box input {
display: none;
}

/*中身を非表示*/
.hidden_box .hidden_show {
overflow: hidden;
width: 90%;
height: 0;
margin: 0 auto;
padding: 0 25px;
transition: .25s;
opacity: 0;
}

/*クリックで中身表示*/
.hidden_box input:checked~.hidden_show {
height: auto;
margin: 15px auto;
padding: 20px 25px;
opacity: 1;
background: #0f2d4733;
}

.hidden_box p {
padding-bottom: 0;
}
@media only screen and (max-width: 786px) {
.hidden_box .hidden_show {
width: 100%;
}
}

【STEP2】アコーディオンボタンの実装確認

WordPressのテキストエディターを開き、次のHTMLコードを貼付けて、[変更をプレビュー]からアコーディオンボタンが正しく動作・表示されるかを確認してください。

<div class=”hidden_box”><input id=”label1″ type=”checkbox”><label for=”label1″>クリックで表示する</label>
<div class=”hidden_show”>
<p>正しく動作・表示していますか?</p>
</div><div></div></div>

正しく動作・表示される場合は【STEP3】へ進んでください。

【STEP3】アコーディオンボタンのショートコード化

WordPressのfunctions.phpにアコーディオンボタンをショートコード化するためのPHPコードを貼付けます。
functions.phpの編集は[外観]-[テーマの編集]-[テーマのための関数]から行います。

//アコーディオンボタン ショートコード
function shortcode_open($atts, $content = null) {
$content = do_shortcode( shortcode_unautop( $content ) );
extract(shortcode_atts(array(
‘title’ => ‘クリックで表示する’,
‘btn_bg’ => ‘#55617a’,
‘btn_clr’ => ‘#fff’,
‘box_bg’ => ‘#e0e4ed’,
‘box_clr’ => ‘#555’,
),$atts));
for($i = 0; $i < 8; ++$i){
$num = mt_rand(0,9);
$label .= $num;
}
return ‘<div class=”hidden_box”><input type=”checkbox” id=”label’.$label.'”/><label for=”label’.$label.'” style=”background:’.$btn_bg.'”>’.$title.'</label><div class=”hidden_show” style=”background:’.$box_bg.'”><p>’.$content.'</p></div></div>’;
}
add_shortcode( ‘open’, ‘shortcode_open’ );

アコーディオンボタンの使い方

WordPressのビジュアル・テキストエディターで次のショートコードを入力するとアコーディオンボタンが表示されます。

ショートコード

[open
title="クリックで表示する" btn_bg="#55617a"
btn_clr="#fff" box_bg="#e0e4ed"
box_clr="#555"]
ここに表示・非表示する内容を書く
[/open]

 

オプションを変更すると文字や背景の色を変えることができます。

オプション 説明 備考
title=”” ボタンに表示する文字 文字を入力
btn_bg=”” ボタンの背景色 カラーコードを入力
btn_clr=”” ボタン文字色
box_bg=”” ボックス背景色
box_clr=”” ボックス文字色

オプションを書かずに[open]サンプル[/open]と入力するとデフォルトで設定してある文字と色になります。
下のアコーディオンボタンがデフォルトのサンプルです。

これがデフォルトの文字と色です。

カスタマイズ

デフォルトの色を変更する

デフォルトの色を変更するにはPHPコードにある次の部分のカラーコードを書き換えます。

extract(shortcode_atts(array(
‘title’ => ‘クリックで表示する’,
‘btn_bg’ => ‘#55617a‘, ←ボタンの背景色の変更
‘btn_clr’ => ‘#fff‘, ←ボタン文字色の変更
‘box_bg’ => ‘#e0e4ed‘, ←ボックス背景色の変更
‘box_clr’ => ‘#555‘, ←ボックス文字色の変更
),$atts));

アイコンを変更する

アイコンを変更するにはCSSコードのユニコードを書き換えます。
アイコンは、FontAwesome5を使用しています。
公式サイトよりアイコンを探してユニコードを書き換えてください。

/*アイコン(プラス)*/
.hidden_box label:before {
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;
content: ‘ \f055‘; ←ユニコードを変更
color: #fff;
}

/*アイコン(マイナス)*/
.hidden_box input:checked~label::before {
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;
content: ‘ \f056‘; ←ユニコードを変更
color: #fff;

FontAwesomeの使い方はこちらの記事で解説しています。

Font Awesomeの使い方【バージョン5.0対応】今回は、FontAwesomeの使い方について紹介します。 Font Awesomeとは Webアイコンフォントが表示できるようにな...

ボタンのサイズや文字を変更する

ボタンのサイズや文字を変更するにはCSSコードの/*ボタン装飾*/の部分を書き換えます。

/*ボタン装飾*/
.hidden_box label {
font-size: 15px; ←文字の大きさを変更
font-weight: bold; ←文字の太さを変更
position: relative;
display: block;
width: auto;
max-width: 385px; ←ボタンの幅を変更
margin: auto;
padding: 15px; ←ボタンの余白を変更
cursor: pointer;
text-align: center;
color: #fff;
border-radius: 8px; ←ボタンの角の丸みを変更
background: #55617a;
}

ボックスのサイズを変更する

ボックスのサイズを変更するにはCSSコードの/*中身を非表示*/と/*クリックで中身表示*/の部分を書き換えます。

/*中身を非表示*/
.hidden_box .hidden_show {
overflow: hidden;
width: 90%; ←ボックスの幅を変更
height: 0;
margin: 0 auto;
padding: 0 25px; ←下のpadding 下線部分と同じ数に
transition: .25s;
opacity: 0;
}

/*クリックで中身表示*/
.hidden_box input:checked~.hidden_show {
height: auto;
margin: 15px auto; ←ボックス上下の余白を変更*autoはそのまま
padding: 20px 25px; ←ボックス内の余白を変更
opacity: 1;
background: #0f2d4733;
}

–省略–

@media only screen and (max-width: 786px) {
.hidden_box .hidden_show {
width: 100%; ←ボックスの幅を変更(タブレット・スマホ用)
}
}

まとめ

アコーディオンボタンの実装方法をご紹介しました。
コピペで簡単に実装できるのでぜひ試してみてください。