HOME  /WordPress(応用)
 /ビジュアルエディタにBOX全体がリンク対象(リンクBOX)を実装する
2020年04月20日

ビジュアルエディタにBOX全体がリンク対象(リンク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は完成します。

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

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


<関連記事一覧>

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

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

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

ここでは引用

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

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

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

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

ここではビジュアルエディタでタブ切替ができるコンテンツを作成方法を解説しています。更にここでは1ページに複数のタブ要素があっても対応できるjqueryプログラムにしてあります。

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画面やビジュアルエディタで使う方法を解説しています。