広告 WordPress関連

jQuery load()を使ってTextやHTMLファイルをインクルードするショートコードの作成

スポンサーリンク

 

HTMLファイルを投稿ページに挿入するにはiframe を使う方法が一般的ですがjQuery load()メソッド を使うと投稿ページの指定id(又はclass)箇所に 外部HTML(or php)ファイルの全部、若しくはファイルの一部の要素をインクルード(取り込む)でき、またtextファイルもインクルード出来る様になります。 インクルードされた内容はインクルード元のファイルを直接編集できるのでWordPressを起動して編集すること無く、インクルード内容を変更することが出来て便利です。

今回は、この機能にプラスして、ボタンやリスト項目をクリックするとインクルード内容が表示できるショートコードを「Post Snippets Plugin」で作ってみました。 

load()セキュリティ上の配慮から、インクルード出来るファイルは、サーバー・ドメイン内のファイルに限定されます。

 

load()メソッドとは

jQuery日本語リファレンス によれば、 load( url, data, callback ) で記述しファイルをインクルードします。 3つの引数の内、今回使用するのはurl の部分です。 urlは、読み込むファイルのURLです。 例えばHTMLファイルの場合、要素の一部をインクルードする書式は、URLの後に半角スペースを開けて load("url #id > セレクタ")のように表記します。

jQuery load() はクライアントサイド(PCやスマホ) でインクルードが実行されますが、同じ様な機能を持つサーバサイドでインクルード出来る PHPのインクルード関数「include()、file_get_contents()等」を使う方法もあります。 しかし、外部ファイル要素の一部をインクルード指定することができ無いので、今回はjQuery load()メソッドを使うことにしました。

 

オペレータ
オペレータ
先ず、今回作成したショートコードを使った事例(デモ)を紹介します。 
使用したショートコードの作成は後述します。

 

HTMLファイルのインクルード(事例)

事例
1
HTMLファイルをインクルードした事例

インクルードされたHTMLファイル
↓↓↓↓↓↓↓↓↓↓

インクルード・エリア

使用したショートコード
[load_method func="func10()" onclick="off" list_flg="list_off" output="out10" load_url="ドメイン/HTML_test.html .test" style="margin-bottom:30px;"]
〜〜
赤字オプション説明
onclick="off"で、onclickをoffにしてページロード時にインクルードが表示されます。 
.testでインクルードするクラス要素を指定しています。 もし、id="test" なら #test になります。

事例
2
「読込み」ボタンで、HTMLファイルをインクルードする事例

インクルード・エリア

使用したショートコード
[load_method func="func11()" onclick="on" list_flg="list_off" output="out11" load_url="ドメイン/HTML_test.html .test" style="margin-bottom:30px;"]
〜〜
赤字オプション説明
「読込み」ボタンにonclick="func11()"を記述しているので、onclick="on"にすることでボタンクリックリでインクルード内容が表示されます。 
.testでインクルードするクラス要素を指定しています。

 

Textファイルのインクルード(事例)

事例
1
Textファイルをインクルードした事例

インクルードされたTextファイル
↓↓↓↓↓↓↓↓↓↓

インクルード・エリア

使用したショートコード
[load_method func="func20()" onclick="on" list_flg="list_off" output="out20" load_url="ドメイン/Text_test.txt" style="white-space: pre-wrap;"]
〜〜
赤字オプション説明
onclick="off"で、onclickをoffにしてページロード時にインクルードが表示されます。 
style="white-space: pre-wrap;"を記述しないと、改行が無くなり文字列が連続してしまいます。

事例
2
「読込み」ボタンで、Textファイルをインクルードする事例

更にインクルードしたTextの文字デザインを変えて見ました。

インクルード・エリア

使用したショートコード
[load_method func="func21()" onclick="on" list_flg="list_off" output="out21" load_url="ドメイン/Text_test.txt" style="white-space: pre-wrap;font-size:0.8em;font-weight:bold;color:navy;line-height:120%;"]
〜〜
赤字オプション説明
onclick="on"で、「読込み」ボタンにonclick="func21()"を記述しているので、ボタンクリックリでインクルード内容が表示されます。 
styleにCSSコードを記述して、文字デザインを変えることができます。

 

リスト項目をクリックしてインクルードさせる(事例)

リスト項目をクリックすると、インクルード内容が表示します。 

  • リストA:HTML_test.html ファイルをインクルード
  • リストB:Text_test.txtファイルをインクルード
  • リストC:当サイトのお知らせ(トピックス)をインクルード

インクルード・エリア

使用したショートコード
[load_method func="func51()" onclick="on" list_flg="list_on" output="out51" load_url="ドメイン/HTML_test.html .test" style=""]
-------
[load_method func="func52()" onclick="on" list_flg="list_on" output="out52" load_url="ドメイン/Text_test.txt" style="white-space: pre-wrap;"]
-------
[load_method func="func53()" onclick="on" list_flg="list_on" output="out53" load_url="ドメイン/ #newsin" style="margin:20px auto;"]
〜〜
赤字オプション説明
3項目のリストなのでインクルード・エリアに3本のショートコードを配置しています。
リストの li タグには onclick="func51()"〜"func53() "を記述します。 また、onclick="on" と list_flg="list_on" でリスト項目( li タグ )がクリックされるとインクルードされます。
styleにCSSコードを記述して、文字デザインを変えることができます。

 

「Post Snippets Plugin」を使ったショートコードの作成について

Post Snippetsプラグインのインストールや使い方は、「小技・事例集」を参照してください。

Post Snippets(バージョンは3.1.6) 設定画面は以下の通りで、エリアに番号を振った部分に従って説明します。 (Post Snippets の最新バージョンは4.xになっていますが、一部不具合と使い勝手が悪く3.1.6バージョンを使っています。)

blank

エリアにショートコードの名称を記入します。 ショートコード名を、load_method にしました。

エリアにHTMLコードとjQuery(下記)を記述します。 { } で囲まれた文字列が変数です。 この変数が、ショートコードオプションになります。

備考:
1行目:
id="{output}" でインクルードされる場所(要素)になります。
7行目:function {func} は、onclick時の呼び出す関数に対応します。 listの場合は排他的に表示されます。
注記:コードを見易くするためにスペースや改行を多用するとショートコードの挙動が乱れる場合があり、スペースや改行は最小限に止めています。

 

エリアのVariables(変数)に、上記コードの { } で囲われた文字列をカンマ区切りで、以下黄色マーカの文字列を記述しました。
   func=func1(),onclick=off,list_flg=list_off,output=out1,load_url,style

変数 変数の意味
func=func1() 関数名でデフォルトはfunc1()、関数名はページ内では重複の無く一意にすること。
onclick属性を使う時のfunction名になります。
onclick=off onclickを利用する時は、on にします。(デフォルトはoff)
list_flg=list_off リストでonclickを利用する時は list_on にします。
load_methodショートコードを利用したonclick付きリストは、複数設置はNGです。
output=out1 インクルード内容の出力先の id名でデフォルトは out1 にしています。ページ内では重複の無く一意にすること。
load_url インクルード先のファイルurlを指定。 htmlの場合半角スペースを開けて要素セレクタ名を付記できる。
style textファイルや要素を指定したHTMLのインクルードは、HTMLファイル側の<style></style>は反映されませんのでWordPress側でstyleを指定する必要があります。
onclickについて、
ボタンタグ、listのliタグやtableタグ等にonclick属性を記述することで、タグをクリックすれば、出力先のid名(ex. out1)の箇所にインクルード内容が表示されます。

エリアにショートコード化するので、レ点を入れます。 

エリアにはPHPを使っていないので無記入のままです。

エリアにショートコードの簡単な説明を記載します。(下記は参考です)

記載(例)
funcは関数名でfunc1()の様に定義する。 onclickが必要な時は、onに設定し、onclickで起動する場合はonclick="func1()"の様に指定する。リストでonclickを利用する場合は、list_flg=list_onにする。 outputは出力先の一意のID名を入力, load_urlはtxt or htmlのファイルアドレス, htmlの対象要素は、スペースを入れてhtmlのセレクタを指定(ex #index)

 

オペレータ
オペレータ
最後に、Post Snippetsの【Save】ボタンを押して「load_method」ショートコードの完成です。 

完成したショートコードを使うには、ビジュアルエディタから「Post Snippets」ボタンをクリックして、「load_method」を選択すると、編集領域に以下のショートコードが挿入されます。

 完成したshortcode
[load_method func="func1()" onclick="off" list_flg="list_off" output="out1" load_url="" style=""]

 

以上、jQuery load()を使ったショートコードの紹介でした。 onclick属性をlistのliタグに記述することで、liタグを押すと関連したファイルの内容がインクルードされる等、色々な場面で使えるのではないでしょうか?

 

 

スポンサーリンク

 

スポンサーリンク

 

Hi-Reco Blog オススメ

をクリック(タップ)してご覧ください。)