頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(it)

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

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

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

はじめに

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

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

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

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

これまでの経緯

ショートコードを埋め込むにはfunctions.phpに対して、
ショートコードを定義することで利用することができるようになりますが、
その際には子テーマを利用して、
現在利用しているテーマとは切り離した環境で導入されることをお勧めします。
WordPressのfunctions.php編集には子テーマを利用

また、単純HTMLを出力するショートコードの定義に関しては以下でご紹介しています。
WordPressで独自のショートコードをプラグインレスで設定

HTMLの複数行を一括してショートコードから出力する方法もご紹介しています。
WordPressの独自ショートコードを設定し複数行HTMLを出力

そのうえで、JavaScriptを出力するように改変を行ったショートコードは以下でご紹介済みです。
WordPressの独自ショートコードを設定しJavaScriptを出力

本投稿のひとつ前の手順として外部JavaScriptファイルを
ショートコードから読み込んで実行する方法についても以下でご紹介しています。
WordPressの独自ショートコード埋め込みにJavaScript外部ファイルを指定する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

両方のパラメータが必須です。 $defaults_array は、認識される属性名とそのデフォルト値を指定する連想配列です。$atts は、ショートコードハンドラに渡される生の属性配列です。shortcode_atts() は、$defaults_array のキーを全て含み、$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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

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

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


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

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


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - jetpack, WordPress

  関連記事