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

WordPressの独自ショートコード埋め込みにJavaScript外部ファイルを指定する

      2014/11/22

Google or AdMax Promotion(it)

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

そんなときに利用すると便利なのがショートコードです。
ショートコードをfunctions.phpに対して定義した際にJavaScriptを出力したい場合もあるでしょう。

そんなショートコードでJavaScriptを外部ファイルから読み込みを行って出力する方法をご紹介します。

はじめに

functions.phpの編集やショートコードの埋め込みと聞いて、
面倒くさそうとしりごみしてしまう方もおられるかもしれませんが、
実際にやってみると難しいものではありません。

ショートコードの埋め込みにあたっては、
WordPressの子テーマも合わせて利用するとカスタマイズとは関係のない部分を、
誤って触ってしまうこともなく便利です。

子テーマを利用したfunctions.phpのカスタマイズについては以下でご紹介しています。
WordPressのfunctions.php編集には子テーマを利用

ショートコードの定義と外部JavaScriptファイルの読み込み

ショートコードを指定して、あらかじめ定義したHTMLなどを出力する方法は以下でご紹介しています。

WordPressで独自のショートコードをプラグインレスで設定
WordPressの独自ショートコードを設定し複数行HTMLを出力

またJavaScriptを直接ショートコードの出力に
割り当てて出力する方法は以下でご紹介しています。
WordPressの独自ショートコードを設定しJavaScriptを出力

JavaScriptファイルの参照出力

ここでご紹介する外部JavaScriptの読み込みといっても、

<script type=”text/javascript” src=”~”></script>

を、HTMLとして出力してしまえば、単純に外部JavaScriptの読み込みとしては事足ります。
実際にこの方法でショートコードを定義すると以下のようになります。

※直接ファイルを参照する方法については後述しています、あくまでもこれは一般的な方法のご紹介です。

なお読み込みを行っている[algorhythnn_alert.js]ファイルは以下のようなものです。

 

ページを表示して確認すると、アラートが表示されます。

01_JavaScriptの単一行読み込み

JavaScriptの単一行読み込み   

参照出力時の複数行記述

ちなみに、複数行を一括して読み込ませたいといった場合には、 以下のような記述方法が利用できます。

※[<<<eot ~ eot]部分はヒアドキュメント構文(本文末参照)

5行目で読み込んでいる[algorhythnn_testjs.js]は以下のようなファイルです。

 

実際にページを表示すると以下のように2回ダイアログが表示されます。

02_JavaScriptの複数行読み込み

JavaScriptの複数行読み込み

外部ファイルとしてJsファイルの読み込み

上記の例でも十分に利用できる読み込みの方法ではありますが、
<script type=”text/javascript” src=”~”></script>や、
<script type=”text/javascript”>~</script>といった記述が多く出てきてしまったり、
ショートコードを定義するたびに実際にショートコードとして埋め込んで動作確認をする形になったりします。

そうした場合には<script type=”text/javascript”>~</script>で記述されているファイルで、
そのまま外部ファイル化してしまい、その外部ファイルをそのまま読み込んで記述すると、
ショートコード内の記述がすっきりします。

3行目で読み込んでいる[algorhythnn_testjs_import.js]は以下のようなファイルです。

実際にページを表示すると以下のように2回ダイアログが表示されます。

03_JavaScriptの外部ファイル読み込み

JavaScriptの外部ファイル読み込み

パッと見は、特にメリットは感じられないかもしれません。 しかし、これは以下のようなAdSenseコードなどの埋め込みコードを、 サイト内に設置する際には、提供されたJavaScriptを個々にファイル化し、 条件などに応じてファイル名を切り替えて参照するだけで、コードの入れ替えが行えることを示しています。

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

今回はメッセージの表示でしたが、外部のWebサービスなどを利用するにあたって提供される、
JavaScriptコードなどの埋め込みを行って表示することなどに利用できます。

こうしたサイト上に読み込む可能性のあるスクリプトファイルを、
別ファイルとして保存しておきショートコードで読み込むようにすると、
コードも一元管理できかつ、ショートコードのメンテナンスも
functions.phpの一箇所で行うことができるようになります。

複数行の一括出力に利用した、ヒアドキュメント構文については以下のヘルプに記載されています。

参考

PHP: 文字列 – Manual #ヒアドキュメント構文


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

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


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


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

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

Pitta Promotion

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

AdMax Promotion

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

Rakuten Promotion

 - WordPress

  関連記事