ビジュアルエディタでBOXを作る方法には下記の2種類のやり方があります。
①表を使う ：参考サイトはビジュアルエディタの表機能をカスタマイズする
②スタイルを使う：参考サイトはビジュアルエディタで＜Enter＞が使えるBOXを作成する方法
どちらでも可能ですが、ここでは表を使う場合を解説していきます。
よって①の表の設定ができている事が前提となります。
下記がサンプルのBOXです。BOXの何処をクリックしても指定されたURLにジャンプします。
<横に1つのBOX>
| MAZDA2
全長(mm) 4,065 |
■リンク先は画像に設定されています。
＜横に２つ並んだBOX＞
|
Synology NAS
個人利用のNASから業務利用まで色々なタイプのNASを取り揃えています。 |
MAZDA
ガソリン車、クリーンディーゼル車まで幅広い車を用意しています。 |
■左が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×３の表を作成し、マウス操作で幅を調整します。
②各セルにカーソルを入れ、スタイルから「td.link-waku3」または「td.link-waku4」を設定する。
左が「td.link-waku3」で右が「td.link-waku4」です。
以上でリンクBOXの作成が完了しました。
③ボックスの中にコンテンツを書き込みます。
コンテンツを作成した後は、画像等にリンク先を設定します。
■新しいタブにリンク先を表示させる場合は「リンクを新しいタブで開く」に✔をいれます。
以上でリンクBOXは完成します。
