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

2014/03/11 2014/11/22

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

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

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

はじめに

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

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

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

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

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

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

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

JavaScriptファイルの参照出力

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

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

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

<?php
function my_shortcode_exjs_handler($atts, $content=null) {
	return '<script type="text/javascript" src="http://algorhythnn.jp/pblic_js/algorhythnn_alert.js"></script>';	
}
add_shortcode('my-shortcode_exjs', 'my_shortcode_exjs_handler');
?>

<?php

function my_shortcode_exjs_handler($atts, $content=null) {

return '<script type="text/javascript" src="http://algorhythnn.jp/pblic_js/algorhythnn_alert.js"></script>';

}

add_shortcode('my-shortcode_exjs', 'my_shortcode_exjs_handler');

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

alert("Works!");

1	alert("Works!");

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

JavaScriptの単一行読み込み

参照出力時の複数行記述

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

<?php
function my_shortcode_ex2js_handler($atts, $content=null) {
$str=<<<eot
<script type="text/javascript" src="http://algorhythnn.jp/pblic_js/algorhythnn_alert.js"></script>
<script type="text/javascript" src="http://algorhythnn.jp/pblic_js/algorhythnn_testjs.js"></script>
<script type="text/javascript">
testrun("関数呼び出しによるメッセージです");
</script>
eot;
	return $str;	
}
add_shortcode('my-shortcode_ex2js', 'my_shortcode_ex2js_handler');
?>

<?php

function my_shortcode_ex2js_handler($atts, $content=null) {

$str=<<<eot

testrun("関数呼び出しによるメッセージです");

</script>

eot;

return $str;

}

add_shortcode('my-shortcode_ex2js', 'my_shortcode_ex2js_handler');

※[<<<eot　～　eot]部分はヒアドキュメント構文（本文末参照）

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

function testrun(disp){
	alert(disp);
}

function testrun(disp){

alert(disp);

}

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

JavaScriptの複数行読み込み

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

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

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

<?php
function my_shortcode_ex3js_handler($atts, $content=null) {
	$str = file_get_contents("http://algorhythnn.jp/pblic_js/algorhythnn_testjs_import.js");
	return $str;
}
add_shortcode('my-shortcode_ex3js', 'my_shortcode_ex3js_handler');
?>

<?php

function my_shortcode_ex3js_handler($atts, $content=null) {

$str = file_get_contents("http://algorhythnn.jp/pblic_js/algorhythnn_testjs_import.js");

return $str;

}

add_shortcode('my-shortcode_ex3js', 'my_shortcode_ex3js_handler');

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

<script type="text/javascript" src="http://algorhythnn.jp/pblic_js/algorhythnn_alert.js"></script>
<script type="text/javascript" src="http://algorhythnn.jp/pblic_js/algorhythnn_testjs.js"></script>
<script type="text/javascript">
	testrun("関数呼び出しによるメッセージです");
</script>

testrun("関数呼び出しによるメッセージです");

</script>

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

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

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

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- lunit_TEST -->
<ins class="adsbygoogle"
     style="display:inline-block;width:200px;height:90px"
     data-ad-client="ca-pub-87xxxxxxxxxxxx16"
     data-ad-slot="75xxxxxx86"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"

style="display:inline-block;width:200px;height:90px"

data-ad-client="ca-pub-87xxxxxxxxxxxx16"

data-ad-slot="75xxxxxx86"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

さいごに

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

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

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

参考

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

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

- WordPress WordPress

: WordPressのサイドバーにGoogle™サイト内検索(カスタム検索エンジンv2)を設置する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: 電子メール(email)への共有をJetpack by WordPress.comで行う動作

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: StatCounter無料アクセス解析の利用にStatCounter_v1.6.5－wordpressプラグインを利用

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: phpMyAdminでMySQLデータをサーバー上からインポートする

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: WelCart専用テーマPayPal Vermilionのインストールと有効化手順

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: 22.Beautiful Math－Jetpack by WordPress.com

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: 15.Google+ プロフィール－Jetpack by WordPress.com

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: WordPressでTOPに固定ページ、リンク先に最新投稿を表示する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: GoogleAdSense,ウェブマスターツール(WMT)の確認にGoogle Publisher Plugin-v0.1.0Betaを利用

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: JetPackのサイト統計が初期化(0pv)にされる理由がなんとなくわかった

Google or AdMax Promotion(it) 禁断の機能がau公式 …

PREV: WordPressの独自ショートコードを設定しJavaScriptを出力
NEXT: PHPをインストール後に[msvcr71.dllがないためプログラムを開始できません]という場合

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

はじめに

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

JavaScriptファイルの参照出力

参照出力時の複数行記述

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

さいごに

参考

関連記事