下記がビジュアルディタで作成したタブのサンプルです。
- 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個等も同じような構造で作成できます。
私は、２から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>を選択後、インデントボタンでインデントして下さい。
④保存して変更をプレビューします。
下記の様な画面が表示されます。
タブを切替えると、それに応じたコンテンツが表示されます。
以上でビジュアルエディタでタブを使ったコンテンツが書けるようになりました。
