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の出力に関しても上記の応用でしかありませんが、
普通にHTMLの複数行出力のように出力したいJavaScriptを張り付けるだけで、
ショートコードからの出力が行えるようになります。

<?php
function my_shortcode_js_handler($atts, $content=null) {
$str=<<<eot
<script type="text/javascript">
alert("JavaScriptも実行できます。");
</script>
eot;
	return $str;	
}
add_shortcode('my-shortcode_js', 'my_shortcode_js_handler');
?>

<?php

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

$str=<<<eot

alert("JavaScriptも実行できます。");

</script>

eot;

return $str;

}

add_shortcode('my-shortcode_js', 'my_shortcode_js_handler');

このショートコードでは[ my-shortcode_js ]というショートコードを投稿エリアに記述すると、
JavaScriptが実行されメッセージに「JavaScriptも実行できます。」と表示される単純なものです。

実際にショートコードを埋め込んで表示した例が以下のようになります。

ショートコードによるJavaScript出力

このようにして簡単にショートコードを定義して任意のJavaScriptなどを実行させることができます。

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

また、こうしたJavaScriptを外部ファイル化しショートコードから
外部ファイルのJavaScriptを読み込み実行できるようにする方法は以下でご紹介しています。
WordPressの独自ショートコードによって埋め込み外部ファイルを指定する

さいごに

この出力の方法はヒアドキュメント構文という記述方法を利用して、
出力を行いたいテキストを一括して定義する方法です。

こうして複数行を一気に書いてしまってから、
その内容を変数に格納し、ショートコードの戻り値に指定することで後から読んでも読みやすい記述が行えます。

ヒアドキュメント構文については以下のヘルプに記載されています。

参考

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

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

- WordPress WordPress

: GoogleAnalyticsの標準アナリティクスコードを取得する(追加)

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

: 13.Gravatar ホバーカード－Jetpack by WordPress.com

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

: wordpressでメディアページ(ギャラリー、gallery)を表示する方法

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

: 23.追加ウィジェット－Jetpack by WordPress.com

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

: リンクをdivエリアでクリック可能にするHTML・CSSをさらにショートコード化

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

: Pinterest™への共有をJetpack by WordPress.comで行う動作

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

: WordTwitの利用と導入(wordpressプラグイン)

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

: 19_01.投稿の一覧表示には、Jetpackのアーカイブ(archives)ショートコード埋め込み(各種条件指定例)

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

: LinkedIn™への共有をJetpack by WordPress.comで行う動作

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

: WordPressテーマファイルの編集に子テーマ利用

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

PREV: WordPressの独自ショートコードを設定し複数行HTMLを出力
NEXT: WordPressの独自ショートコード埋め込みにJavaScript外部ファイルを指定する

WordPressの独自ショートコードを設定しJavaScriptを出力

はじめに

ショートコードの定義とJavaScript出力

さいごに

参考

関連記事