it-swarm-ja.com

ヘッダータグからの自動jQueryアコーディオン

私は、投稿者がヘッダータグに基づいてアコーディオンを設定するのをかなり簡単にしたいと思います。だから例えばこれ:

<h3>Headline 1</h3>
<p>Content.. lorem ipsum</p>

<h3>Headline 2</h3>
<p>Content.. lorem ipsum</p>

<h3>Headline 3</h3>
<p>Content.. lorem ipsum</p>

これに変換されるでしょう(そして、それで、アコーディオンは活性化されます)

<div class="accordion">
<h3>Headline 1</h3>
<div><p>Content.. lorem ipsum</p></div>
<h3>Headline 2</h3>
<div><p>Content.. lorem ipsum</p></div>
<h3>Headline 3</h3>
<div><p>Content.. lorem ipsum</p></div>
</div>

私はショートコード付きの設定を使用してきました - しかし、これは投稿者にとっては複雑すぎるので - もっと合理化された解決策は壮大です。どのように私はこれをやろうと思っていますか?

1
PHearst

あなたはこれをするためにショートコード機能を使うことができます。

function accordion_shortcode( $atts, $content = null ) {
   extract( shortcode_atts( array(
      'class' => 'accordion',
      ), $atts ) );

   return '<div class="' . esc_attr($class) . '">' . $content . '</div>';
}

add_shortcode( 'accordion', 'accordion_shortcode' );

エディタであなたのコンテンツをラップします:

[accordion]
<h3>Headline 1</h3>
<p>Content.. lorem ipsum</p>

<h3>Headline 2</h3>
<p>Content.. lorem ipsum</p>

<h3>Headline 3</h3>
<p>Content.. lorem ipsum</p>
[/accordion]
4
Azizur Rahman