やりたいこと

ブロックエディタでアコーディオンメニューを使えるようにしたい。
プラグインなし、CSSのみ。

検証済みテーマ

テーマ独自の機能は使用していないので大半のテーマで使えるはずです。

やりかた

以下の手順で実装します。

• 「style.css」へコードを追記する
• 「パターン」にアコーディオンブロックを登録する

「style.css」へのコード追記

テーマの「style.css」にコードを記載する方法で実装します。

以下の場所から編集できます。
「Wordpress管理画面」>「外観」>「テーマファイルエディター」右側から編集するファイルを選択します。

以下のコードを「style.css」に追記してください。

body{/*ラベル前の表示非表示のアイコンカラーを指定*/
	--acd-color: #99cc00;
}
input.acd-check + label.acd-label::before{
	display: inline-block;
	text-align: center;
	width: 4.5em;
	margin-right: 0.5em;
	border: 2px solid;
	border-radius: 5px;
}
input.acd-check:checked + label.acd-label::before{/*閉じている状態のアイコン文言*/
	content: '表示する';
	color: #ffffff;
	background: var(--acd-color);
	border-color: transparent;
}
input.acd-check:not(:checked) + label.acd-label::before{/*開いている状態のアイコン文言*/
	content: '閉じる';
	color: var(--acd-color);
	background: none;
	border-color: var(--acd-color);
}
input.acd-check,
input.acd-check:checked + label.acd-label + div{
	display: none;
}
input.acd-check + label.acd-label,
input.acd-check:not(:checked) + label.acd-label + div{
	display: block;
}

fontawesomeを使用できないテーマでも使えるように、特殊フォントなしにしていますが、アイコン文言に＋/ーといったアイコンフォントをいれるともっとそれっぽくなります。

パターンの登録

以下のファイルを使ってパターンを登録します。

パターン登録用JSONファイル

1 ファイル 0.67 KB

ダウンロード

「Wordpress管理画面」>「外観」>「パターン」>「JSONからインポート」>「ファイルを選択」からダウンロードしたファイルを登録します。

「flag-accordion」というパターンが登録されていることを確認しましょう。

つかいかた

ブロックエディタで登録したパターンを呼び出します。

以下のようなブロックが追加されるので、２つのカスタムHTMLブロックの間にアコーディオンメニューの中に入れたいブロックを追加します。

ブロック内にも記載しておりますが、初期状態は閉じた状態になります。
初期状態を開いた状態にするには「<input>」タグ内の「checked」を削除してください。

完成

上で紹介したコードをベースにCSSを変更してますが、実際使うと以下のようなアコーディオンメニューが実装できます。

参考