ビジュアルエディタにコラップス機能（コンテンツの開閉）を実装する

下記がビジュアルディタで作成したコラップス（コンテンツの開閉トグル）のサンプルです。

下記のボタンをクリックして下さい。コンテンツが下に表示されます。

ここでは上記のコラップス機能をビジュアルエディタに追加する方法を解説します。

1.コラップスを作成するショートコードを作成する

functions.phpにコラップスを作成するショートコードを追加します。

/**************************************************/
/* TinyMCE Advancedにショートコードを追加 */
/**************************************************/
function my_scode($postarr) { 
	/*************************************
	 他のショートコードの設定(ここではその設定を省略します)
	 *************************************/
/** コラップス追加のシュートコード ***********/
	$search = '【toggle】';
	$replace= 
	'<div class="toggle"><button class="btn btn-default">表示／非表示ボタン</button></div>
	<div class="toggle-target">
		<p>コラップスエリアです。表やイメージも利用できます<br>尚、ボタンの色はスタイルから設定して下さい。</p>
	</div>';
	$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
	* コラップス終了 ***************************/ 
　return $postarr;} 
add_filter('wp_insert_post_data', 'my_scode');

■ショートコードは複数登録されるので、上記にはコラップスに関するショートコードのみ記述しています。

■コラップスの構造は、ボタンクラスの「toggle」と、コラップスデータが書かれる「toggle-target」から構成されます。

■上記のプログラムをコピーする時は【】を[]に置き換えて利用して下さい。

2.CSSを設定する

2-1.ビジュアルエディタのCSSに下記を追加します。

本テーマのビジュアルエディタのCSSは「editor-style.css」から「my-editor-style.css」に変更しています。

理由は下記ドキュメントを参照してください。

  ブロックエディタ時代にビジュアルエディタを使う方法

 ­親テーマが「editor-style.css」の時のスタイル機能の使い方

＜my-editor-style.cssの設定＞

下図を表現するCSSを定義していきます。

/**********************************************************************/
/* コラップス制御 */
/**********************************************************************/
div.toggle-target{
	margin-top:10px;
	padding:10px;
	border-radius:3px;
	border:1px dashed #008200;}

■div.toggle-targetの所はコンテンツエリアを緑の破線枠で囲んでいます。

2-2.style.cssの設定

コラップスエリアはフリーエリアにしたい為、スタイルは設定しません。

冒頭のコラップスサンプルは枠付き表の中にコンテンツを入れています。

3.jqueryプログラムを作成する

最後はタブデータを切替える為のjqueryプログラムです。

3-1.jqueryプログラムを作成する

①ルートディレクトリにJSフォルダを作成します。

②その中に「my-jquery.js」ファイルを作成し下記プログラムを登録します。

/* コラップス制御を行う設定 */	
$(function(){
	$(".toggle").each(function(no,element){
		$(element).next().addClass('collapse');
		$(element).click(function(){
			flg = $(this).next().css('display') == 'none';
			if(flg) {$(this).next().collapse('show');}
			else {$(this).next().collapse('hide');}
		});
	});
});

■ページの中に「.toggle」が複数ある事を想定して「.each」メソッドを利用しています。

「.each」メソッドとは繰り返し処理を行うメソッドです。

■.each(function(no,element)は繰り返し処理の中で「no」はループ回数、「element」は要素が取り出せます。

■要素を見つけたら「addClass(“collapse“)」でBootstrapのコラップスを設定し子要素を非表示にします。

■次に「.toggle」すなわち「element」がクリックされたら、その子要素が表示状態か否かをflgにセットします。

■flgが非表示なら、子要素を「show」にし、表示なら「hide」にして開閉させます。

$(function(){
	$(".toggle").each(function(no,element){
		$(element).next().addClass('collapse');
		$(element).click(function(){
			$(this).next().collapse('toggle');
		});
	});
});

４.具体的な使い方

①コラップスを入れたい所で【toggle】をいれます。
(注意：【】は[]です)

②下記の画面が表示されます。

ボタンの中の文字やコンテンツは自由に編集してください。

③ボタンの色をスタイルから選択します。

ボタン色の変更は下記ドキュメントの設定が完了している事が前提となります。

   ビジュアルエディタでボタンを表示させる方法

以上でビジュアルエディタの中でコラップス機能が使える様になりました。