HOME  /WordPress(応用)
 /ビジュアルエディタにリンクBOXを実装する
2020年03月29日

ビジュアルエディタにリンクBOXを実装する

ビジュアルエディタでBOXを作る方法には下記の2種類のやり方があります。

表を使う   :参考サイトはビジュアルエディタの表機能をカスタマイズする

スタイルを使う:参考サイトはビジュアルエディタで<Enter>が使えるBOXを作成する方法

どちらでも可能ですが、ここでは表を使う場合を解説していきます。

よって①の表の設定ができている事が前提となります。

 

下記がサンプルのBOXです。BOXの何処をクリックしても指定されたURLにジャンプします。

<横に1つのBOX>

■リンク先は画像に設定されています。

 

<横に2つ並んだBOX>

 

■左が3PXの枠線で、右が4pxの枠線です。

■リンク先は両方とも画像に設定されています。

 

1.CSSの設定

上記のリンクBOXを実現する始めの設定はCSSです。

 

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

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

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

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

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

 

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

/******************************************************************/
/* tableを使ったリンクBOX */
/*******************************************************************/
._____link_BOX________{}             /* スタイルの区切り線 */
td.link-waku3{                                  /* 枠線太さが3PXの設定 */
	padding:5px;
	border:3px solid #8b8682;
	cursor:pointer;          /* マウスがBOXに入るとカーソルが指マークになります */
}
td.link-waku4{                                  /* 枠線太さが4PXの設定 */
	padding:5px;
	border:4px solid #8b8682;
	cursor:pointer;
}
td.link-waku3:hover,
td.link-waku4:hover,{border-color:#9ed54c; /* マウスがBOXに入ると枠線のカラーが変わります */
}

■表のセル(tdタグ)に付与する枠線太さは3PXと4pxをスタイルで利用できる様にしています。

1px,2pxは線が細すぎるので上記設定としました。

■td.linkのスタイルは、マウスがBOXに入るとポインタが指マークに変わる事と枠線のカラーが変わる設定になります。

 

2-2.style.css にも同様な設定を追加します。

/******************************************************************/
/* tableを使ったリンクBOX */
/*******************************************************************/	
.entry-content td.waku3{
	padding:5px;
	border:3px solid #8b8682;
	cursor:pointer;}
.entry-content td.waku4{
	padding:5px;
	border:4px solid #8b8682;
	cursor:pointer;}
.entry-content td.link-waku3:hover,
.entry-content td.link-waku4:hover{border-color:#9ed54c;}	

 

以上の設定で見かけ上はBOXの中の何処をクリックしても、設定されたリンク先にジャンプできそうに見えます。

しかい現実はリンクが設定されている画像をクリックしない限りはジャンプできません。

そこでBOX内のどこをクリックしてもジャンプさせる為には下記のJqueryプログラムが必要となります。

 

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

­ ­jqueryプログラムとは

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

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

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

 

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

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

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

/*****************************************/
/* 自作のjqueryプログラム */
/*****************************************/	
/* link-boxの全体をリンクエリアにする設定 */
$(function(){
 $('.link-waku3,.link-waku4').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;
 });
});

上記プログラムで行っている内容は「.link-waku3」又は「.link-waku4」エリアがクリックされたら、aタグを検索し、href属性とtarget属性を取り出す。そしてtarget属性によりリンク先の表示方法を変えている。

<詳細解説>

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

②ビジュアルエディタのリンク設定画面の解説

■上図のURLにリンク先を入れると、href属性に「リンク先」が入ります

■リンクを新しいタブで開くを✔するとtarget属性に「_blank」が入ります。

var url=$(this).find(‘a’).attr(‘href’);

上記は、a要素を探しhref属性(リンク先)を変数urlに入れています。

var target= $(this).find(‘a’).attr(‘target’);

上記は、a要素を探しtarget属性の値(_blankか?)を変数targetに入れています。

⑤あとの処理は下記になります。
新しいタブで開く場合はwindow.open(url,’_blank’);を実行します。
現在のドキュメントを書き替える場合ははwindow.location= url;を実行します。

 

2-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」をデバイス側に送ります。

 

3.リンクBOXの作成手順

2BOXタイプのリンクBOXを作成する手順です。

①表作成で1×3の表を作成し、マウス操作で幅を調整します。

 

②各セルにカーソルを入れ、スタイルから「td.link-waku3」または「td.link-waku4」を設定する。

左が「td.link-waku3」で右が「td.link-waku4」です。

以上でリンクBOXの作成が完了しました。

 

③ボックスの中にコンテンツを書き込みます。

コンテンツを作成した後は、画像等にリンク先を設定します。

■新しいタブにリンク先を表示させる場合は「リンクを新しいタブで開く」に✔をいれます。

以上でリンクBOXは完成します。

 メモ

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

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

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

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


<関連記事一覧>

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

ここではビジュアルエディタでタブ切替のコンテンツを作成する方法を解説しています。しかしタブの単純な作り方ではスマホ表示でタブが複数行になる!等の問題が発生します。そこでflexboxの機能を使ってスマホでも使えるタブを実現しました。

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

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

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。
以前のサイトはあまり意味もわからず作成しましたが、この辺の意味が判ってきたのでここで解説します。

ここでは引用

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

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

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

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで作る方法を解説しています。

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

    とアンオーダーリスト

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