WordPressの投稿内でJavaScriptを使う方法を下記オンラインマニュアルで確認しました。
Using Javascript
試しに現在時刻を表示するJavaScriptの関数を作成し、投稿内に使用した手順を示します。
※目次をクリックすると目次の下部にコンテンツが表示されます。
JavaScriptの関数を外部ファイルに記述
$ cd /var/www/html/wptest/wp-content/themes/twentytwelve/js
$ vi postjs.js
$ vi postjs.js
function disp(){
var now = new Date();
var hour = now.getHours(); // 時
var min = now.getMinutes(); // 分
var sec = now.getSeconds(); // 秒
var watch = hour + '時' + min + '分' + sec + '秒';
document.write("現在の時間は" + watch + "です。");
}
JavaScriptファイルのインクルード
１）テーマのテンプレートファイルのheader.php内でインクルードする場合
多くの投稿で使用するJavaScriptファイルをヘッダーでインクルードするなどの例があります。
$ cd /var/www/html/wptest/wp-content/themes/twentytwelve
$ vi header.php
<?php wp_head(); ?>にすぐ上に下記いずれかの方法でJavaScriptファイルをインクルードする。
①<script>タグを使用
<script src=”<?php echo get_template_directory_uri(); ?>/js/postjs.js” type=”text/javascript”></script>
②WordPressの”wp_enqueue_script”関数を使用
重複してインクルードされないように依存性を考慮して安全に取り扱ってくれるようで、こちらの方法が推奨されていました。
<?php wp_enqueue_script(‘postjs’, get_bloginfo(‘template_url’) . ‘/js/postjs.js’); ?>
２）投稿内でインクルードする場合
ある特定の投稿内でしか使用しないJavaScriptファイルであれば、ヘッダーに記載してすべての投稿でインクルードさせるより、使用する投稿のみでインクルードさせた方が効率的かと思います。
投稿編集画面のテキストエディタを使って、下記のようにJavaScriptファイルをインクルードする記述を追加します。
<script src=”http://example.com/wptest/wp-content/themes/twentytwelve/js/postjs.js” type=”text/javascript”></script>
※WordPressの関数が使えないのでファイルのパスの指定がヘッダーファイルに記載する場合と異なっています。
JavaScript関数の呼び出し
投稿編集画面のテキストエディタを使って、下記のようにJavaScriptファイル内に記述した関数を呼び出す記述をします。
CDATAセクションやコメントの記載方法などいくつか異なる記載方法がありました。違いがよく分からなかったので３つの方法を併記します。私が試した限りでは違いはありませんでした。
CDATAセクションやコメントの記載方法などいくつか異なる記載方法がありました。違いがよく分からなかったので３つの方法を併記します。私が試した限りでは違いはありませんでした。
<script type="text/javascript"> <!-- disp(); //--></script> <script type="text/javascript"> <!--//--><![CDATA[//><!-- disp(); //--><!]]></script> <script type="text/javascript"> // <![CDATA[ disp(); // ]]></script>