HOME  /WordPress(応用)
 /ビジュアルエディタにコラップス機能(コンテンツの開閉)を実装する
2020年03月31日

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

このドキュメントは改定中です。

 

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

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

表示された内容です。

ボタンをもう一度挿入すると閉じます


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

 このドキュメント利用上の注意点

このドキュメントの中では[]を【】に置き換えて記述しています。

理由は解説に[]のままでショートコードを記述すると、更新処理でショートコード処理が動いてしまうからです。

よってこのドキュメントからソースをコピーする場合は、ペースト後、【】を[]に置き換えて利用して下さい。

またこの機能はBootstrapの機能を利用していますので下記設定は必須です。

 ­サイトにBootstrap3を利用する

 

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

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

/**************************************************/
/* TinyMCE Advancedにショートコードを追加 */
/**************************************************/
function my_scode($postarr) { 
	/*************************************
	 他のショートコードの設定(ここではその設定を省略します)
	 *************************************/
/** コラップス追加のシュートコード ***********/
	$search = '【toggle】';
	$replace= 
	'<div class="toggle"><a class="btn btn-default">表示/非表示ボタン</a></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を定義していきます。

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

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

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

ショートコード実行時はa.btn-primary(青)にしています。

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

 

2-2.style.cssの設定

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

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

 

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

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

­ ­jqueryプログラムとは

PHPプログラムはサーバのプログラムで、サーバ側で画面を生成しデバイス側に送ります。

しかしサーバ側のプログラムにはユーザが画面をどの様に操作したか?は判りません。

一方、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」にして開閉させます。

­ ­メモ

Bootstrapのコラップスには「show」、「hide」以外に「toggle」という命令もあります。

これは表示していたら閉じるし、非表示なら開くという処理をしてくれるコマンドです。

これを使う場合はJqueryプログラムは下記の様になります。

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

こちらの方がプログラムは短くなります。

 

4.具体的な使い方

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

 

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

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

 

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

クラス

a.btn-default

a.btn-primary

デフォルト色

a.btn-success

a.btn-info

a.btn-warning

a.btn-danger

a.btn-link

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

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。
以前のサイトはあまり意味もわからず作成しましたが、この辺の意味が判ってきたのでここで解説します。

TinyMCEのデフォルト設定ではインデントが使えない。またCSSを更新した時にスーパリロードしないと画面が更新されない等との問題があります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

ビジュアルエディタに幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

このドキュメントではビジュアルエディタ(TinyMCE)の見出し、本文、URLの設定を解説しています。

ここではビジュアルエディタでタブ切替のコンテンツを作成する方法を解説しています。しかしタブの単純な作り方ではスマホ表示でタブが複数行になる!等の問題が発生します。そこでflexboxの機能を使ってスマホでも使えるタブを実現しました。

TinyMCEの仕様は親テーマのeditor-style.cs、子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。