HOME  /WordPress(応用)
 /TinyMCEにタブ機能を実装する
2017年12月07日

TinyMCEにタブ機能を実装する

ここではビジュアルエディタでタブ切替ができるコンテンツ作成方法を解説しています。

しかし単純なタブは、スマホ表示でタブが複数行になる問題が発生する為、flexboxを使い、スマホでも使えるタブ機能を実現させました。

1.タブ機能作成の手順

タブ機能は下記手順で作ります。

1-1.functions.phpにショートコードを追加する

メモBOXや各種BOXで作成したショートコードに下記のショートコードを追加します。

【tab2】:2つのタブ

【tab3】:3つのタブ

【tab4】:4つのタブ

※1.上記の【】は、実際は[]です。

1-2.タブ表示画面のCSSを作る

①my_editor-style.css

ビジュアルエディタで操作する画面なので、タブタイトルやタブデータが編集できるCSSとする。

②css¥editor-style.css

HTTP表示のタブタイトルやタブデータの表示画面のCSSになります。

1-3.タブ切替のjqueryの作成

何もしなければ、タブタイトルとダブデータが総て表示されてしまいます。

そこでjqueryの登場です。

jqueryはHTTP表示が完了した後に動くデバイス側にプログラムで、このプログラムで

①初めに表示するコンテンツ

②タブがクリックされた時に表示するコンテンツ

をコントロールします。

それでは具体的にどの様な設定になるか?を下記に解説していきます。

2.タブ機能を実現する設定

ここでは実際にタブメニュを使って関連する設定を説明します。
タブを切替えて順番に見て下さい。

functions.phpにはタブに関するショートコードを追加します。

下記コードは【tab2】のみを追加した例です。

同様に【tab3】,【tab4】を追加して下さい。

/**************************************************/
/* TinyMCEにショートコードを追加  */
/**************************************************/
function my_scode($postarr) {
 /* 他のショートコードの設定(省略)*********/
	/* 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'] );
/* 終了処理 ***************************/
 return $postarr;}
add_filter('wp_insert_post_data', 'my_scode');

※1.赤字の所が2つのタブで追加したコードです。
尚【】の実際は[]になります。

※2.タブタイトル(tab_title)の<ul><li>を<nav>で括ったのは、タブをインデント可能にする為の対策です。
インデントする際はビジュアルエディタの左下のガイドで<nav>を選択した後、インデントしてください。

※3.タブデータ(tab_data)の所は段落切替が使えるので、自由にコンテンツを作成してください。
インデントする際はビジュアルエディタの左下のガイドで<div>を選択した後、インデントしてください。

※4.【tab3】と【tab4】は項目数を増やすだけで考え方は同一です。

my_editor-style.cssにはビジュアルエディタでタブデータを編集する為のCSSを記述します。

/**********************************************************************/
/* タブ設定 */
/**********************************************************************/
._____tab________{}
ul.tab_title{
 display:flex;
 justify-content:space-between;
 padding:0;margin:0;}
ul.tab_title li{
 flex-grow:1;
  word-break:break-all;
 list-style:none;
 margin:0;
 padding:10px;
 cursor:pointer;
 display:block;text-align:center;
 font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;}
/* タブ枠の設定 */
ul.tab_title li{
 border-top-left-radius:5px;border-top-right-radius:5px;
 border:1px dashed #1d1d1d;
 border-left:none;
 border-bottom:1px solid #1d1d1d;}
ul.tab_title li.select{
 border:1px solid #1d1d1d;
 border-bottom:none;}
/* タブデータ枠の設定 */
div.tab_data{
 margin-top:10px;
 padding:10px;
 border-radius:3px;
 border:1px dashed #008200;}

※1.「._____tab________{}」はスタイルを見易くする為の区切りで意味はありません。

※2.「ul.tab_title」設定のポイントは下記になります。
display:flex;はタブを1行で表示させる設定です。
画面に入らないと幅を自動で狭めます。
justify-content:space-between;は、始めと最後のタブを左右端に配置しそれ以外を均等に配置します。
padding:0;margin:0;は、ulが持っている設定をリセットしています。

※3.「ul.tab_title li」の設定ポイントは下記になります。
flex-grow:1;はタブに余白がある場合は幅を自動で拡大させます。
word-break:break-all;はタブに余裕がない場合は英小文字の途中でも改行させます。
padding:10px;cursor:pointer;display:block;text-align:center;は、タブ文字は上下左右に10pxの余白を設けセンタ配置にし、カーソルはポインタ表示にしています。
またフォントサイズはレスポンシブ対応にしています。

※4.「ul.tab_title li」のタブ枠の設定は、上と右は破線、下は実線、右は線なしに指定しています。

※5.「ul.tab_title li.select」は選択されたタブ(ここでは1番目が選択されています)枠の設定で、枠を実線にして下線を「なし」に指定しています。

※6.「div.tab_data」の設定ポイントは下記になります。

タブコンテンツを書くエリアで緑の枠線で囲っています。
(この枠では段落変更も使えるので自由にコンテンツ作成ができます)

css¥editor-style.cssへの記述は原則my_editor-style.cssと同じになりますが、タブが切替えられた時のCSSを追加しています。

/******************************************************************************************************************/
/* タブ設定 */
/******************************************************************************************************************/
.contents ul.tab_title{display:flex;justify-content:space-between;padding:0;margin:0;}
.contents ul.tab_title li{flex-grow:1;word-break:break-all;list-style:none;margin:0;padding:10px;cursor:pointer;display:block;text-align:center;font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;}
/* タブ枠の設定 */
.contents ul.tab_title li{border-top-left-radius:5px;border-top-right-radius:5px;border:1px dashed #1d1d1d;border-left:none;border-bottom:1px solid #1d1d1d;}
.contents ul.tab_title li:first-child{
 border-left:1px dashed #1d1d1d;}
.contents ul.tab_title li.select{border:1px solid #1d1d1d;border-bottom:none;}
/* タブデータ枠の設定 */
.contents div.tab_data{
 margin-top:0;
 border:1px solid #1d1d1d;
 border-top:none;
 padding:10px;}

※1.赤字の所が「my_editor-style.css」と異なる所です。

※2.「.contents ul.tab_title li:first-child」は先頭のタブ以外が選択された時の設定で、先頭タブ(:first-child)の左を破線表示にしています。

※2.「.contents div.tab_data」は表示されたタブデータを枠で囲っています。

最後はタブデータを切替える為のjqueryです。

jqueryはHTTP表示が完了した後に動くデバイス側にプログラムです。

このサイトでは自作jqueryの呼び込みの為にheader.phpの<head>で下記設定を行っています。

<head>
<!-- 他の設定は省略 -->
<!--自作jqueryプログラムの利用宣言-->
<script src='<?php echo get_stylesheet_directory_uri();?>/js/my-jquery.js'></script>
</head>

※1.上記の設定により、自作jqueryプログラム(my-jquery.js)は、子テーマフォルダの中のjsフォルダの中にある事を宣言しています。

my-jquery.jsのタブ切替プログラムは下記になります。

/* タブメニュを切替える設定 */
$(function() {
 /* 初期処理 */
 $('.tab_data').css('display','none');
 $('.tab_data:first').css('display','block');   /* 始めのタブデータを表示 */
 /* クリックされた時の処理 */
 $('.tab_title li').click(function() {
  var index = $('.tab_title li').index(this); /* 何番目のリストがクリックされたか?を取得 */
  $('.tab_data').css('display','none');
  $('.tab_data').eq(index).css('display','block');
  /* select処理の変更 */
  $('.tab_title li').removeClass('select');
  $(this).addClass('select')
 });
});

※1.始めに総てのタブデータ(.tab_data)を非表示にし、先頭のタブデータ(.tab_data:first)を表示します。

※2.次にタブがクリックされた時($(‘.tab_title li’).click)の処理を記述します。

①変数「index」にクリックされたタブの番号を入れます。

②総てのタブデータ(.tab_data)を非表示にする。

③クリックされた番号のタブデータ($(‘.tab_data’).eq(index))を表示します。

④総てのタブ(.tab_title li)のセレクトクラスをクリアにする。

⑤現在のタブ(this)にセレクトクラスを追加します。

以上でタブをクリックすると、関連するタブデータが表示されるプログラムは完了しました。 

3.具体的な操作方法

2つのタブの例で説明します。

①タブを入れたい所で【tab2】を入力し、更新ボタンを挿入します。

(注意:【】は[]です)

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

タブタイトルを編集します。

タブタイトルは自由に編集できます。

タブをインデントする場合はタブ選択後、左下のガイドで<nav>を選択後、インデントボタンでインデントして下さい。

③タブデータを編集します。

各タブに対応するタブデータエリアにコンテンツを記載します。
(このエリアは段落変更も可能なので自由なコンテンツ作成が可能です)

タブデータをインデントする場合は、左下のガイドで<div>を選択後、インデントボタンでインデントして下さい。

④保存して変更をプレビューします。

下記の様な画面が表示されます。タブを切替えると、それに応じたコンテンツが表示されます。

 注意

上記で作成したタブ機能は、1ページに1個しか設定できません。

理由はjqueryで.tabe_dataや.tabe_title liを検索して何番目がクリックされたのか?等を判断している為です。

1ページに2個目のタブコンテンツを作りたい場合は.tabe_data1や.tabe_title1 liの様に、違うクラスを作り、これをコントロールする必要があります。