HOME  /WordPress(応用)
 /ビジュアルエディタにタブ機能(tab)を実装する
2020年04月08日

ビジュアルエディタにタブ機能(tab)を実装する


下記がビジュアルディタで作成したタブのサンプルです。

  • tab1
  • tab2

始めに表示されるコンテンツです

TAB2をクリックするとタブが切り替わります

これはTAB2がクリックされた時に表示されるデータです

TAB1をクリックするとタブが切り替わります

 


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

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

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

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

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

 

1.タブ切替を追加するショートコードを作成する

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

/**************************************************/
/* TinyMCE Advancedにショートコードを追加 */
/**************************************************/
function my_scode($postarr) { 
	/*************************************
	 他のショートコードの設定(ここではその設定を省略します)
	 *************************************/
	 /* 2つのタブ開始************************/
	$search = '【tab2】';
	$replace= 
		'<div class="tab">
			<ul class="tab_title">
				<li class="select">tab1</li>
				<li>tab2</li>
			</ul>
			<div class="tab_data"><p>tab1のデータを入力して下さい。</p></div> 
			<div class="tab_data"><p>tab2のデータを入力して下さい。</p></div>
		<div>';
	$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
	 /* タブ終了 ***************************/ 
 return $postarr;} 
add_filter('wp_insert_post_data', 'my_scode');

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

■タブデータの構造は、全体を「tab」とし、子要素のタブタイトルが「tab_title」と、子要素のタブデータが「tab_data」から構成されます。

■「tab_title」はリストでli要素に「select」クラスが付いているのが現在表示されているタブになります。

この要素は「tab」要素から見ると孫要素になります。

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

­­  メモ

上記はタブが2つの事例ですが、同様に3個等も同じような構造で作成できます。

私は、2から5までのタブ作成のショートコードを作成しています。

タブの数に関係なく、以下にに説明するCSSやJqueryは同じです。

 

2.CSSを設定する

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

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

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

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

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

 

<my-editor-style.cssの設定>

ショートコードを実行すると下図が表示されます。

これを表現するCSSを記述します。

/**********************************************************************/
/* タブ設定 */
/**********************************************************************/
._____tab________{}                                                           /* スタイルの区切り記号 */
ul.tab_title{                                         /**** タブ親要素 *************************/
	padding:0;margin:0;
	display:flex;
	justify-content:space-between;
}
ul.tab_title li{                                       /**** タブ子要素 *************************/
	margin:0;padding:10px;
	flex-grow:1;
	display:block;
	text-align:center;	
	font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;
	word-break:break-all;
	cursor:pointer;
	border-top-left-radius:5px;border-top-right-radius:5px;
	border:1px dashed #1d1d1d;
	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;}

■タブ形状「.tab_title」とタブ内データ「.tab_data」から構成する。

■タブは横に並ぶので親要素「.tab_title」に「display:flex;」を指定することにより「.tab_title li」を横に並べる。

■「.tab_title li」のスタイルを定義した後、「.tab_title li.select」でアクティブタブのスタイルを上書きする。

■「.tab_data」はタブの中のデータを記述するBOXです。<Enter>等も利用可能です。

display:flex;

親要素に指定するFlexboxのCSSで子要素を横に並べます。

justify-content:space-between;

親要素に指定するFlexboxのCSSで子要素の1番目を左端、子要素の最後を右端に配置し、後は均等に配置する。

flex-grow:1;

子要素に指定するFlexboxのCSSで、タブ幅に余裕がある場合はギリギリまで拡大する。

word-break:break-all;

タブ幅に余裕がない場合は英単語の途中でも改行表示をする。

cursor:pointer;

タブの何処でもカーソルはリンク用の指マークにする。Jqueryでタブの何処でもリンクできる様にする必要がある。

罫線の引き方は「ul.tab_title li」で破線を引き、選択されているタブ「ul.tab_title li.select」は実線で上書きしている。

2-2.style.cssは下記の様なCSSを設定します。

ここで設定するCSSはビジュアルエディタとは異なり下図の様な表示になります。これを表示させるCSSを定義していきます。

/*******************************************************************/
/* タブ設定 */
/*******************************************************************/
.entry-content ul.tab_title{
	padding:0;margin:0;
	display:flex;
	justify-content:space-between;}
.entry-content ul.tab_title li{
	margin:0;padding:10px;
	flex-grow:1;
	display:block;
	text-align:center;
	font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;
	word-break:break-all;
	cursor:pointer;
	border-top-left-radius:5px;border-top-right-radius:5px;
	border:1px dashed #1d1d1d;
	border-bottom:1px solid #1d1d1d;}
.entry-content ul.tab_title li.select{
	border:1px solid #1d1d1d;
	border-bottom:none;}
/* タブデータ枠がビジュアルエディタと異なっています */
.entry-content div.tab_data{
	margin-top:0;                     /* ここが変更されています */
	padding:10px;
	border:1px solid #1d1d1d;   /* ここが変更されています */
	border-top:none;                 /* ここが変更されています */
}

■ビジュアルエディタのCSSと異なるのはタブ内データ「.tab_data」の表示方法だけです。

■変更箇所は枠線を実線にすると共に、タブとデータ表示の隙間を無くしています。

 

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

最後はタブデータの表示やタブがクリックされた時にデータを切替えるjqueryプログラムです。

­ ­jqueryプログラムとは

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

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

一方、jqueryはユーザがどの様な操作をしたのか?を検知して処理するプログラムになります。

 

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

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

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

下記プログラムは1ページに複数のタブデータが作成されても動くようにeachメソッドを使ったものになっています。

/* 本文のタブメニュの表示を切り替える設定 */
$(function() {
	$('.tab').each(function(no,element){
	$(element).children('.tab_data').css('display','none');         /* 初期処理 */
	$(element).children('.tab_data').eq(0).css('display','block');/* 初期処理 */
	$(element).find('.tab_title li').click(function() {                   /* タブがクリックされた時の処理 */
		var index = $(element).find('.tab_title li').index(this);
		$(element).children('.tab_data').css('display','none');
		$(element).children('.tab_data').eq(index).css('display','block');
		$(element).find('.tab_title li').removeClass('select');
		$(element).find('.tab_title li').eq(index).addClass('select');
		});
	});
});

<画面が表示された時の処理(初期処理)>

■画面が表示された後「tab」クラスを探します。これに「each」メソッドが使われているので1ページに2個の「tab」データがあっても順番に処理していきます。

function(no,element)の「no」はループの値、「element」には要素がはいります。

■次にこの「element」の子供(children)の「tab_data」の表示を「css(‘display’,’none’)」で総て非表示にします。

■次にこの「element」の子供(children)の「tab_data」の0番目(先頭のタブデータ)を「css(‘display’,’block’)」で表示します。

eq(n)は、何番目か?を指定するコマンドです。

以上でタブの1番目だけが表示されたタブデータが表示されます。

<タブがクリックされた時の処理>

■この「element」の孫(find)「.tab_title li」がクリックされた時の処理を記述します。

子要素は「children」、孫要素は「find」が基本ですが、子要素も「find」で探しても問題ありません。

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

■この「element」の子供(children)の「tab_data」の表示を更新します

■この「element」の孫(find)「.tab_title li」の「select」クラス更新します。

以上でタブをクリックすると、表示を切り替えるプログラムが完了しました。

 

3-2.jquryプログラムの利用宣言

<header.php>に上記のJqueryプログラムをロードします。

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

■子テーマフォルダの「js」フォルダにある「my-jquery.js」をデバイス側に送ります。

 

4.具体的な操作方法

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

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

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

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

 

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

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

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

 

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

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

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

 

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

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

タブを切替えると、それに応じたコンテンツが表示されます。

以上でビジュアルエディタでタブを使ったコンテンツが書けるようになりました。

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

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

「tinymce」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

このドキュメントではビジュアルエディタでモーダルウィンドウを使ったコンテンツを作成する方法を解説しています。更に1ページの中に複数のモーダルウィンドウ定義があっても対応できるJqueryにしています。

ビジュアルエディタで文書を作成する時、ボタンを作成したい時があります。
ここでは下記のBootstrapのボタンをビジュアルエディタで利用する方法を解説します。

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

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

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりましたが「ビジュアルエディタ」を使い続ける方法を解説しています。

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

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってBOX全体がリンク対象になるBOXを作成する方法を解説しています。

TinyMCEのスタイルは1つの段落に対する定義になります。よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。ここではその作り方を解説しています。

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

このドキュメントではビジュアルエディタの段落、h2~h5及びリンクの設定とリンクの貼り方を解説しています。

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

    とアンオーダーリスト

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

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。ここではどの様なフォントを指定するとどの様なフォントで表示されるのかを解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法と利用方法を解説しています。

ここでは整形済みテキスト(pre)の設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで利用する方法を解説しています。更に1ページに複数のコラップスがあっても対応できるJqueryにしています。

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

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

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

Bootstrapはグリッドデザイン以外にボタンやナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。