HOME  /WordPress(応用)
 /ビジュアルエディタにタブ切替ができる機能を実装する
2020年03月29日

ビジュアルエディタにタブ切替ができる機能を実装する

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

 

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

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

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

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

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

 


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

この機能実現する為にはショートコードを定義すると可能となります。

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

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

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

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

 

1.タブ切替機能を実現するシュートコードを作成する

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

/**************************************************/
/* TinyMCE Advancedにショートコードを追加 */
/**************************************************/
function my_scode($postarr) { 
	/*************************************
	 他のショートコードの設定(省略)
	 *************************************/
	 /* 2つのタブ ***************************/
	$search = '【tab2】';
	$replace= 
		'<div><ul class="tab_title">
			<li class="select">tab1</li>
			<li>tab2</li>
		</ul></div>
		<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');

■タブデータの構造はタブタイトルが表示される「tab_title」とタブのデータが書かれる「tab_data」から構成する

■「tab_title」はリストで「select」が付いているのが表示されているタブとする。

上記のショートコードを実行すると下記の様な表示になる様にCSSを設定していきます。

 

※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の様に、違うクラスを作り、これをコントロールする必要があります。

 メモ

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

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

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

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


<関連記事一覧>

Bootstrapのナビゲーション・バー(Navbar)機能を使うとスマホ画面がスマートになります。但しデフォルトでは使いづらいのでNavbarボタンの関数化とWordPressメニュを使う方法を解説しています。

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

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

wordpress関数のwp_mailを使った事例を解説しています。このフォームのボタンはBootstrapで、ダブルクリックによる二重送信防止機能も付けています。

PHPプログラムで表示するデバイスの種類が判ればプログラミングが簡単になります。そこでここではデバイス種類を取得する関数とデバイスの画面サイズを取得する方法を併用して、実使用上問題ない方法を解説しています。

SynologyでWordPressのURL変更を「Search-Replace-DB」で行う為には、ポート番号指定でDBを見に行く必要があります。ここではこの使い方を解説しています。

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

    とアンオーダーリスト

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

Bootstrapのナビゲーション・バーとflexboxを使ったヘッダの作成事例です。Bootstrapのナビゲーション・バーを使う事により、スマホのヘッダ画面が簡単に作れます。またFlexboxを使う事によりPCやタブレットのヘッダ画面が簡単で綺麗なメニュが作れるようになりました。

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

PC画面ではサイドバーがあっても良いが、幅が狭いスマホではこのエリアが確保できない。そこでスマホの場合は自動的にBootstrapのドロップダウンメニュに置き変えるサイドーバーの作り方を解説しています。