WordPressの独自ショートコード埋め込みにパラメータで指定したJavaScript外部ファイルを指定する

WordPress™の投稿本文内に対して埋め込み挿入を行いたいものがあるときに、
投稿本文内では動作しない場合はよくあります。

そんなときに利用すると便利なのがショートコードです。
ショートコードをfunctions.phpに対して定義しJavaScriptを出力するような場合に、
１つのスクリプトを読み込むたびにショートコードを定義するのでは非効率です。

ここではショートコードにパラメータを指定して、
指定した外部JavaScriptをファイルから読み込みを行って出力する方法をご紹介します。

はじめに

ショートコードの埋め込みは一度利用したものを流用したり、
投稿本文エリアが汚れずに好きなタグを埋め込むことができ非常に便利です。

ここでは、ショートコードに対してファイル名やURLなどを指定して、
指定されたファイルを読み込んでWordPressの投稿エリアに対して埋め込む方法をご紹介します。

ショートコードの定義と埋め込み

これまでの投稿については以下でざっとご紹介しておきます。

これまでの経緯

さて、ここまででショートコードから外部ファイルとして配置したJavaScriptを
ショートコードから読み込んで実行する方法をご紹介してきましたが、

このままでは、１ファイルの読み込みごとにショートコードを別に定義する必要があります。

ショートコードを１つのみ定義し読み込むファイルのURLを渡す

実際に行いたいこととしては、１つのショートコードを定義して、
渡すパラメータに応じたスクリプトタグを読み込んで表示するといったことがしたいのです。

ちょうど、挿入する広告ユニットをパラメータ指定で切り替えるといったことです。

JetPackなどを利用していると独自のショートコードタグが利用できるようになり、
そうしたショートコードではパラメータがサポートされているものもあります。
19.ショートコード埋め込み－Jetpack by WordPress.com

このようなパラメータを受け取るショートコードを独自に定義します。

ショートコードパラメータのヘルプ

ショートコードでパラメータを利用するにはヘルプに以下のように明記されています。

ショートコード API – WordPress Codex 日本語版#概観　（中略抜粋）

the_content が表示されるとき、ショートコード API は [my-shortcode] のような登録されたショートコードをパースし、属性と (存在するならば) コンテンツをパースして分離し、対応するショートコードハンドラ関数に渡します。 ショートコードハンドラによって返される文字列は、ショートコードの代わりに記事本体に挿入されます。

以下のようなショートコードの属性は、

[my-shortcode foo="bar" baz="bing"]

1	[my-shortcode foo="bar" baz="bing"]

以下に示す連想配列に変換され、$atts パラメータとしてハンドラ関数に渡されます。

PHP

array( 'foo' => 'bar', 'baz' => 'bing')

1	array( 'foo' => 'bar', 'baz' => 'bing')

配列のキーは属性名で、値は対応する属性値です。

ショートコード API – WordPress Codex 日本語版#属性　（抜粋）

生の $atts 配列には、ユーザーが指定した任意の属性が含まれている可能性があります。 欠けている属性にデフォルト値を付与し、ショートコードで認識されない属性をすべて取り除くために、API には shortcode_atts() 関数が用意されています。

shortcode_atts() は、wp_parse_args() 関数に似ていますが、重要な違いがあります。そのパラメータは、以下のとおりです。

PHP

shortcode_atts( $defaults_array, $atts );

1	shortcode_atts( $defaults_array, $atts );

両方のパラメータが必須です。 $defaults_array は、認識される属性名とそのデフォルト値を指定する連想配列です。$atts は、ショートコードハンドラに渡される生の属性配列です。shortcode_atts() は、$defaults_array のキーを全て含み、$atts 配列からの値が存在すればその値を付与された正規化された配列を返します。例を以下に示します。

PHP

$a = shortcode_atts( array( 'title' => 'My Title' 'foo' => 123, ), $atts );

1 2 3 4

$a = shortcode_atts( array(    'title' => 'My Title'    'foo' => 123,    ), $atts );

$atts が array( 'foo' => 456, 'bar' => 'something' ) を含むならば、出力 $a は array( 'title' => 'My Title', 'foo' => 456 ) になります。$atts['foo'] の値は、デフォルト値 123 を上書きします。$atts['title'] は設定されていないので、デフォルト値 ‘My Title’ が使用されます。デフォルト配列には ‘bar’ 要素は含まれていないので、出力に含まれません。

サンプルソース

上記のヘルプのようにショートコードでパラメータを、
受け取るように定義すると以下のようになります。

このショートコードでは、urlとfilenameというパラメータを受け取ることができます。
またパラメータを省略した際にはデフォルト値を利用するように指定しています。

shortcode_atts()関数に関してはパラメータに渡されるデフォルトの値を定義し、
パラメータに値が渡された場合にはその渡された値を、
パラメータが指定されなかった場合には、デフォルト値を利用するという配列操作の関数です。

パラメータデフォルト値による実行

ショートコードを投稿エリアに以下のように指定します。

デフォルト値で読み込みを行うファイルは、ショートコードに定義された以下の行の

$a = shortcode_atts( array(
'url' => 'http://algorhythnn.jp/pblic_js/',
'filename' => 'algorhythnn_testjs_import.js'
), $atts );

algorhythnn_testjs_import.js ファイルになります。

algorhythnn_testjs_import.js

algorhythnn_alert.js

algorhythnn_testjs.js

実際にパラメータを省略して表示すると以下のようにダイアログが２回表示されます。
これはalgorhythnn_testjs_import.jsにて、
algorhythnn_alert_disp.jsが読み込まれダイアログが１回表示されます。
その後、algorhythnn_testjs_import.jsに関数呼び出しされたダイアログ表示が１回実行されているためです。

ショートコードパラメータを省略時

実際にJavaScriptが読み込まれ、ソースにも表示されています。

パラメータ省略時の出力ソース

パラメータ指定による実行

では、実際にパラメータを指定して読み込みを行います。
ショートコードを投稿エリアに対して以下のように指定します。

パラメータで指定して読み込みを行うファイルは、以下のようなファイルになります。

実際にパラメータを指定して表示すると以下のようにダイアログが１回表示されます。
これはalgorhythnn_alert_disp.jsにてダイアログの表示が１回実行されているためです。

ショートコードパラメータを指定時

実際にJavaScriptが読み込まれ、ソースにも表示されています。

パラメータ指定時の出力ソース

このようにして、パラメータを指定して実行する場合と、
パラメータを省略して実行した場合の両方を指定することで、
ショートコードの振る舞いを変えることができるようになります。

さいごに

こうしたパラメータを利用したショートコードを定義することで、
挿入を行いたいAdSenseコードや各種広告ユニットなどの様々なコードを、
パラメータで切り替えて挿入することができるようになります。

それも、ショートコード自体は編集が不要で、
必要なファイルをアップロードするだけで利用できるようになります。

WordPressはWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください

最後までお読みいただきありがとうございました。

お勧めさせて頂きたい投稿です

• 【巧妙な仕組】Google+へAndroidの写真が勝手にアップロードされてしまう流れは設定ミスではない

• JetPackサイト統計データが消えた場合に復活する手順(してもらう)

• 【待望】WALLET ポイントがauID(au電話番号)間で相互にやりとりできるようになりました

• 禁断の機能がau公式解禁！WALLETポイントの現金化がついに開放。

• 何もしないと、auポイントが2014/05月分以降は携帯利用料から付与されなくなります

• au WALLET™カードはauを解約してもプリペイドとして使い続けられるが、有効期限には注意

• じぶん銀行が動いた！コンビニATM利用が無料・他行振込無料（回数制限なし）で使える

• 【旬】「白すぎる」と賛否両論？姫路城見るなら今秋がおすすめ！その理由は？｜castlehimeji.com

• Google+の投稿が勝手に自動でブログになっていくPluCialが便利



アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介

すべて展開 | すべて省略

Rakuten Promotion

ページ

すべて展開 | すべて省略