HOME  /WordPress(応用)
 /TinyMCEで色々なタイプのBOXを作る
2017年10月28日

TinyMCEで色々なタイプのBOXを作る

TinyMCEで段落変更(Enter)が使えるメモBOXを作るでメモに特化したBOXを作りましたが

①見えないBOXを作りたい(画像と文字を含んだコンテンツ等で使います)

②枠線で囲ったBOXを作りたい。

③横に2つ並んだBOXで且つ、リンクが行えるリンクBOXを作りたい

等々色々なBOXに対するニーズがあると思います。

そこでここでは、Flexboxを使ってそれらのニーズに対応するBOXを作る方法を解説します。

1.Flexboxとは

FlexboxとはFlexible Box Layout Moduleの略で、フレキシブルなレイアウトが組めるCSS3のレイアウトモジュールです。

<HTMLサンプル>

<div class="container">
 <div class="container_item">
  <p>このBOXは段落替え(Enter)が使えます。</p>
 </div>
 <div class="container_item">
  <p>このBOXは段落替え(Enter)が使えます。</p>
 </div>
 <div class="container_item">
  <p>このBOXは段落替え(Enter)が使えます。</p>
 </div>
</div>

上記は「container」の中に「container_item」が3個入っています。

通常は「container_item」は縦に並びますが「container」のCSSに「display:flex」を指定すると「container_item」は横に並びます。
また個々のBOXの間隔や整列方法(BOXの高さが違う場合)も色々なタイプが用意されているのがFlexboxです。

このFlexboxの機能を使って色々なタイプのBOXを作成します。

2.BOX作成の手順

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

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

【box1】:横100%のBOXです。

【box2】:横のに2個並んだBOXです。

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

1-2.BOXのCSSを作成する

①my_editor-style.css

ビジュアルエディタで表示する画面と枠線やリンクを追加できるCSSとする。

②css¥editor-style.css

ビジュアルエディタで作られたコンテンツを表示するCSSとする。

1-3.jqueryの作成

リンククラスがBOXに追加された場合、BOX全体をリンク対象にする機能を追加する。
具体的にはBOX内のリンクをサーチして、そこにジャンプさせる処理を行う。

3.具体的な設定方法

上記の設定をタブ別に分けて解説していきます。タブを切替えて見て下さい。

functions.phpに【box1】と【box2】のショートコードを追加します。

/**************************************************/
/* TinyMCEにショートコードを追加  */
/**************************************************/
function my_scode($postarr) {
 /* メモBOX *************************/
  /* 記述内容は省略 */
 /* BOX1 ***************************/
 $search = '【box1】';
 $replace= 
  '<div class="flex">
   <div class="flex_box1">
    <p>このBOXは段落替え(Enter)が使えます。</p>
   </div>
  </div>';
  $postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
  /* BOX2 ***************************/
  $search = '【box2】';
 $replace= 
  '<div class="flex">
   <div class="flex_box2">
    <p>1つ目のBOX</p>
   </div>
   <div class="flex_box2">
    <p>2つ目のBOX</p>
   </div>
  </div>';
   $postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
 /* 終了処理 ***************************/
 return $postarr;}
add_filter('wp_insert_post_data', 'my_scode'); 

※1.【box1】はflexboxの中に1要素が設定されています。
【box2】は2要素になっています。

※2.上記で設定されたBOXにどの様なCSSを設定するか?はCSSのタブを見て下さい。

my_editor-style.cssにはビジュアルエディタで利用するCSSを記述します。

/**********************************************************************/
/* flexboxを使ったCSS設定 */
/**********************************************************************/
div.flex{
 display:flex;
 justify-content:space-between;
 padding:0;
 margin:5px 0;}
div.flex_box1{	
 padding:5px;
 width:100%;
 border-radius:5px;
 border:1px dashed #8b8682;}
div.flex_box2{
 padding:5px;
 width:49.5%;
 border-radius:5px;
 border:1px dashed #8b8682;}
div.waku1{
 border-radius:5px;
 border:1px solid #8b8682;}
div.waku2{
 border-radius:5px;
 border:4px double #8b8682;}
div.link{
 cursor:pointer;}
div.waku1.link:hover{border:2px solid #9ed54c;}
div.waku2.link:hover{border:4px solid #9ed54c;}

※1.div要素のflexクラスをdisplay:flexにしてあるので、これに囲まれたflex_box1flex_box2は、1行で表示されます。

※2.【box1】や【box2】は「1px dashed #8b8682;(破線)」の枠が表示されます。

※3.スタイルからdiv.waku1(実線枠)及びdiv.waku2(2重線)を入れる事ができる設定にしています。

※4.スタイルからdiv.linkを入れた場合は、枠全体をポインタ表示にすると共にhover指定を加えています。

基本的にmy_editor-style.cssの設定と同様ですが、枠線の表示方法が異なります。

/**********************************************************************/
/* flexboxを使ったCSS設定 */
/**********************************************************************/
.contents div.flex{display:flex;justify-content:space-between;padding:0;margin:5px 0;}
.contents div.flex_box1{	
 padding:5px;
 width:100%;
 border:none;}
.contents div.flex_box2{
 padding:5px;
 width:49.5%;
 border:none;}
.contents div.waku1{border-radius:5px;border:1px solid #8b8682;}
.contents div.waku2{border-radius:5px;border:4px double #8b8682;}
.contents div.link{	cursor:pointer;}
.contents div.waku1.link:hover{border:2px solid #9ed54c;}
.contents div.waku2.link:hover{border:4px solid #9ed54c;}

※1.div.flex_box1とdiv.flex_box2のborderをnoneにする事により、枠線がないのBOXとしています。

 

最後はBOX全体をリンクBOXにする為のjqueryプログラムです。

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

header.phpの中で自作jqueryプログラムの場所を指定します

<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を作成し下記プログラムを設定します。

/*****************************************/
/* 自作のjqueryプログラム */
/*****************************************/	
/* link-boxの全体をリンクエリアにする設定 */
$(function(){
 $('.link').click(function(){
  var url=$(this).find('a').attr('href');
  var target= $(this).find('a').attr('target');
  if(target == '_blank'){window.open(url,'_blank');}
  else{window.location= url;}
  return false;
 });
});

※1.$(‘.link’).click(function(){×××});は「.link」がクリックされたらfunctionの×××を実行しなさい!という命令です。

※2.ビジュアルエディタでリンクを設定すると下記の様なコードが入ります。
<a href=”https://nw.myds.me” target=”_blank” >文字列等</a>
target属性はリンク作成時に新しいタブで開くをチェックするとtarget=”_blank”が入ります。
var url=$(this).find(‘a’).attr(‘href’);は、a要素を探しhref属性(リンク先)を変数urlに入れます。
var target= $(this).find(‘a’).attr(‘target’);は、target属性の値を変数targetに入れます。

※3.あとは上記のリンクの内容を判断し
新しいタブで開く場合はwindow.open(url,’_blank’);を実行します。
同じタブで開く場合はwindow.location= url;を実行します。

 

 3.使用例

3-1.見えないBOX1の例

ビジュアルエディタで【box1】を入力すると下記の様なBOXが表示されます。

このBOXを使って作成したドキュメントが下記になります。破線はHTTP表示では表示されません。

DOPPELGANGER Libero Series 411

私は右のロードバイクで図書館に通いながらこのサイトを構築しています。

ロードバイクの購入は2台目で今回購入した411は前輪にサスペンションが付いており、今までのロードバイクよりは乗り心地が良くなっています。

ギヤはシマノの21段ですが、実際の走行で使うのは7段で十分と思っています。

またブレーキは前輪がディスクブレーキ、後輪はダブルピボット式キャリパーブレーキなのでブレーキの効きは問題ありません

 メモ

上記の文字と画像をスマホでも綺麗に表示する為には幾つか気を付けなければならない箇所があります。

DOPPELGANGER Libero Series 411の所:これはフォントサイズを130%にしてあります。

理由はスマホで見た時に%表示だと文字サイズを小さくしてくれます。

次に画像の所は下記アイコンで幅を50%にしています。

その結果、スマホで見た場合の各サイズは下記になります。

・タイトル:14×1.3×0.75=13.65px

・本文  :14×0.75=10.5px

・画像  :ウィンドウ幅の50%

(0.75はCSS¥style.cssで設定したスマホのフォントサイズ値)

上記の設定でスマホで見ても画像や文字が小さくなって枠自体の体裁を保ってくれます。

3-2.リンクBOX1の例

①ビジュアルエディタで【box1】を呼び出す。

②スタイルから「div.waku2」と「div.link」を付加する。
(div.waku1を選択すると1重枠になります)

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

③コンテンツを完成させます。

下記はサンプルで、画像の所にURLリンクを設定してます。
よってBOXの何処をクリックしてもURLリンクします。

3-3.リンクBOX2の例

下記はリンクBOX2の例です。

①ビジュアルエディタで【box2】を呼び出す。

②左のBOXにはスタイルから「div.waku1」と「div.link」を付加します。

③右のBOXにはスタイルから「div.waku2」と「div.link」を付加します。

④文書を作成し、画像にURLリンクを入れます。

下記がサンプルBOXです。BOXの何処をクリックしてもURLリンクします。