HOME  /WordPress(応用)
 /TinyMCEにコラップス機能を実装する
2017年10月30日

TinyMCEにコラップス機能を実装する

コラップスとはアコーディオンのようにコンテンツを開閉できる機能で、ここではBootstrapのコラップス機能をビジュアルエディタで作る方法を解説しています。

1.コラップスとは

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

もう一度押すと非表示になります。

ボタンを挿入する事により開かれたコンテンツ

2.上記を実現する手順

2-1.functions.phpにショートコードを追加します。

1ページに3個までコラップスが使える事を前提に下記のショートコードを追加します。

【toggle-1】1番目のコラップス

【toggle-2】2番目のコラップス

【toggle-3】3番目のコラップス

2-2.my_editor-style.cssにビジュアルエディタでの見え方を設定します。

Bootstrapのボタン要素と、枠線で囲まれたコンテンツエリアを設定します。

css¥editor-style.cssへの設定は不要です。理由はBootstrapのクラスをそのまま利用する為です。

2-3.jqueryで、bootstrapのコラップス制御を追加します。

Jqueryで下記の設定します。
コンテンツエリアにBootstrapのコラップスクラスを設定します。
またボタンにはコラップスのトグル属性を設定し、コンテンツの開閉ができるようにします。

それでは具体的な設定を下記に解説します。

3.コラップス機能を実現する設定

タブに分けて解説しますので、順次タブを開いて確認してください。

functions.phpのショートコードの設定に下記を追加します。

function my_scode($postarr) {
 /* 他のショートコードは省略 */
 /* 1つ目のコラップス********************/
 $search = '【toggle-1】';
 $replace= 
  '<div id="toggle-btn1"><a class="btn btn-default">表示/非表示ボタン</a></div>
  <div id="target1">
   <p>このBOXは段落替え(Enter)が使えます。</p>
  </div>';
 $postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
 /* 2つ目のコラップス********************/
 $search = '【toggle-2】';
 $replace= 
  '<div id="toggle-btn2"><a class="btn btn-default">表示/非表示ボタン</a></div>
   <div id="target2">
    <p>このBOXは段落替え(Enter)が使えます。</p>
   </div>';
 $postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
 /* 3つ目のコラップス********************/
 $search = '【toggle-3】';
 $replace= 
  '<div id="toggle-btn3"><a class="btn btn-default">表示/非表示ボタン</a></div>
   <div id="target3">
    <p>このBOXは段落替え(Enter)が使えます。</p>
   </div>';
 $postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );	
 /* 終了処理 ***************************/
 return $postarr;}
add_filter('wp_insert_post_data', 'my_scode');

※1.赤字の所が新たに追加したショートコード処理の所です。尚【】の実際は[]です。

※2.ボタンの所がtoggle-btn1~3で、コンテンツの所がtarget1~3の名前にしています。

my_editor.style.cssにはBootstrapのボタンの色を変更できるクラスとコラップスのコンテンツエリアが見える設定をしています。

/**********************************************************************/
/** BootStrapのボタンクラス **/
/**********************************************************************/
.____button_________{}
a.btn{}
a.btn-default{}
a.btn-primary{}
a.btn-success{}
a.btn-info{}
a.btn-warning{}
a.btn-danger{}
a.btn-link{}
/**********************************************************************/
/* コラップス制御 */
/**********************************************************************/
div#target1,div#target2,div#target3{
 margin-top:10px;
 padding:10px;
 border-radius:3px;
 border:1px dashed #008200;}

※1.btn-××のクラスは、スタイルからこれを選択するとボタンの色を変更する事ができます。

※2.div#target1,div#target2,div#target3の所はコンテンツエリアを緑の破線枠で囲んでいます。

※3..____button_________{}は、スタイルで見た時の区切り線です。

jqueryには、Bootstrapのコラップス機能をダイナミックに与える処理を行っています。

/* Bootstrapコラップス制御 */
$(function(){
 $('#target1,#target2,#target3').addClass("collapse");
 $("#toggle-btn1").click(function(){
  $("#target1").collapse('toggle');
 });
 $("#toggle-btn2").click(function(){
  $("#target2").collapse('toggle');
 });
 $("#toggle-btn3").click(function(){
  $("#target3").collapse('toggle');
 });
});		

※1.#target1,#target2,#target3に、collapseクラスを入れる事によりコンテンツが非表示になります。

※2.#toggle-btn×がクリックされたら、ターゲットにコラップスのトグル属性を指定し開閉処理を行う。
これはBootstrapのコラップスのメソッドを参考に作成しました。

4.具体的な使い方

①コラップスを入れたい所で【toggle-1】をいれます。
もしこの画面で既に【toggle-1】が使われていた場合は【toggle-2】を入れてください。
【toggle-3】も同様です。

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

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

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

クラス
a.btn-default 始めに表示されている色です 
a.btn-primary

a.btn-success

a.btn-info

a.btn-warning

a.btn-danger

a.btn-link

④ボタンの大きさに関して

Bootstrapでは、タブレット用ボタン(btn-sm)、スマホ用ボタン(btn-xs)の機能があります。

しかしこの機能を使うよりは、ボタン文字をレスポンシブ対応にしておくとデバイスに応じたボタンサイズになります。

[前提条件]

このサイトはcss¥style.cssの冒頭で下記の宣言がされている。

html{font-size:100%;}                                                            /*PCサイズ16px*/
@media screen and (min-width:768px) and (max-width:991px){html{font-size:87.5%;}}/*タブレットサイズ14px*/
@media screen and (max-width:767px){html{font-size:75%;}}                        /*スマホサイズ12px*/

そこでcss¥editor-style.cssにBootstrapのボタンクラスに下記定義を追加します。

/*********************************************/
/* BootStrapのボタン文字をレスポンシブにする */
/*********************************************/
.contents .btn{font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;}

※1.font-size:0.875remの指定により、ボタン文字はタブレットの時は87.5%、スマホの時は75%になります。
これに合わせてボタン自体も小さくなります。

⑤最後にコラップスさせるコンテンツを完成させます。

下記はサンプルコラップスです。

<?php 
/**************************************************/
/* TinyMCEにショートコードを追加  */
/**************************************************/
function my_scode($postarr) {
	/* メモBOX *************************/
	$search = '【memo】';
	$replace= 
			'<div class="my_memo">
				<p><span class="dashicons dashicons-edit"> </span>メモ</p>
				<p>このBOXは段落替え(Enter)が使えます。</p>
			</div>';
	$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
	/* BOX1 ***************************/
	$search = '【box1】';
	$replace= 
		'<div class="flex">
			<div class="flex_box1">
				<p>このBOXは段落替え(Enter)が使えます。</p>
			</div>
		</div>';
  $postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
  /* BOX2 ***************************/
  $search = '【box2】';
	$replace= 
		'<div class="flex">
				<div class="flex_box2">
					<p>1つ目のBOX</p>
				</div>
				<div class="flex_box2">
					<p>2つ目のBOX</p>
				</div>
		</div>';
   $postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] ); 
	/* 2つのタブ ***************************/
	$search = '【tab2】';
	$replace= 
		'<nav>
			<ul class="tab_title">
				<li class="select">tab1</li>
				<li>tab2</li>
			</ul>
		</nav>
		<div class="tab_data"><p>tab1のデータを入力して下さい。</p></div>
		<div class="tab_data"><p>tab2のデータを入力して下さい。</p></div>';
	$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
	/* 3つのタブ ***************************/
	$search = '【tab3】';
	$replace= 
		'<nav>
			<ul class="tab_title">
				<li class="select">tab1</li>
				<li>tab2</li>
				<li>tab3</li>
			</ul>
		</nav>
		<div class="tab_data"><p>tab1のデータを入力して下さい。</p></div>
		<div class="tab_data"><p>tab2のデータを入力して下さい。</p></div>
		<div class="tab_data"><p>tab3のデータを入力して下さい。</p></div>';
	$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
	/* 4つのタブ ***************************/
	$search = '【tab4】';
	$replace= 
		'<nav>
			<ul class="tab_title">
				<li class="select">tab1</li>
				<li>tab2</li>
				<li>tab3</li>
				<li>tab4</li>
			</ul>
		</nav>
		<div class="tab_data"><p>tab1のデータを入力して下さい。</p></div>
		<div class="tab_data"><p>tab2のデータを入力して下さい。</p></div>
		<div class="tab_data"><p>tab3のデータを入力して下さい。</p></div>
		<div class="tab_data"><p>tab4のデータを入力して下さい。</p></div>';
	$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
	/* 1つ目のコラップス********************/
	$search = '【toggle-1】';
	$replace= 
		'<p id="toggle-btn1" class="btn btn-default">表示/非表示ボタン</p>
			<div id="target1">
				<p>このBOXは段落替え(Enter)が使えます。</p>
			</div>';
	$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
	/* 2つ目のコラップス********************/
	$search = '【toggle-2】';
	$replace= 
		'<p id="toggle-btn2" class="btn btn-default">表示/非表示ボタン</p>
			<div id="target2">
				<p>このBOXは段落替え(Enter)が使えます。</p>
			</div>';
	$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
	/* 3つ目のコラップス********************/
	$search = '【toggle-3】';
	$replace= 
		'<p id="toggle-btn3" class="btn btn-default">表示/非表示ボタン</p>
			<div id="target3">
				<p>このBOXは段落替え(Enter)が使えます。</p>
			</div>';
	$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );	
	/* 終了処理 ***************************/
	return $postarr;}
add_filter('wp_insert_post_data', 'my_scode');
?>

上記の【】の実際は[]です。