ショーケースのリード文内にアコーディオンテキストを入れたい

ショーケースのリード文は、「WordPress の記事編集画面で許可されている HTML のみ入力可能」で「自動改行が有効」となっており、input タグが入力できず、複雑な HTML を入力するのにあまり向いていないため、基本的には、このアコーディオンを入れることはおすすめできません。

という前提で、一応やる方法はあるので、共有します。

子テーマの functions.php に下記のコードを追加

まず、input タグが除去されないように許可する必要があります。下記のコードを追加することで許可されるようになりますが、これは「リード文」の部分だけでなく、WordPress 全体で許可される、ということになり、セキュリティ上好ましくない可能性がありますので、繰り返しますがあまりおすすめはできません。

add_filter( 'wp_kses_allowed_html', function( $tags, $context ) {
	if ( 'post' === $context ) {
		$tags['input'] = [
			'type'  => true,
			'id'    => true,
			'class' => true,
		];
	}
	return $tags;
}, 10, 2 );

リード文に HTML を入力

自動改行の影響を極力避けるため、 HTML コメントと改行を全部抜いて入力してください。下記をコピペしてもらうのが良いかと思います。

<div class="accbox"><div><label for="label1">クリックして表示1</label><input type="checkbox" id="label1" class="cssacc" /><div class="accshow"><p>こんにちは1</p></div></div><div><label for="label2">クリックして表示2</label><input type="checkbox" id="label2" class="cssacc" /><div class="accshow"><p>こんにちは2</p></div></div><div><label for="label3">クリックして表示3</label><input type="checkbox" id="label3" class="cssacc" /><div class="accshow"><p>こんにちは3</p></div></div><div><label for="label4">クリックして表示4</label><input type="checkbox" id="label4" class="cssacc" /><div class="accshow"><p>こんにちは4</p></div></div></div>

CSS を追加

カスタマイザー > 追加CSS、もしくは子テーマの CSS ファイルに下記の CSS を追加してください。自動改行の影響を考慮して、元の CSS から若干カスタマイズしてあります。

/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 400px;/*最大幅*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 11px 12px;
    color :#2f8fcf;
    font-weight: bold;
    background :#a4cbf3;
    cursor :pointer;
    transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#85baef;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + p + .accshow {
    height: auto;
    padding: 5px;
    background: #eaeaea;
    opacity: 1;
}

検証しました。ちょっと現状の Snow Monkey ではできないのですが、v4.3.0 ベータ3からはできるようになります。ということで、一応先にコードだけ提示しますね。

子テーマの functions.php

/**
 * [my-accordion] というショートコードを定義
 */
add_shortcode( 'my-accordion', function() {
	ob_start();
	?>
	ここに参考ページの HTML を貼り付け
	<?php
	return ob_get_clean();
} );

/**
 * Snow Monkey ウィジェットでショートコードを実行可能に
 */
add_filter( 'inc2734_wp_awesome_widgets_render_widget', 'do_shortcode' );

CSS を追加

カスタマイザー > 追加 CSS、もしくは、子テーマの　CSS ファイルに、参考ページの CSS を貼り付け

リード文に入力

[my-accordion] と入力してください。