[WordPress]外部JavaScriptファイルを読み込んでjQueryなどのライブラリを使う方法

こんにちは。でんすけ（@notgeek_densuke）です。

WordPressで外部のJavaScriptファイルを読み込みたい、という場合の手法メモ。

投稿記事本文に書いちゃう

とりあえず「この記事だけで使えればいい」という場合は、
いっそ本文に書いちゃうのもアリです。
（きれいかどうかは置いといて）

使いたいライブラリのjsファイルを開いて、
テキストをコピーして、こんな感じで貼りつけるだけです。

<script>
<!--
/*! jQuery v3.3.1 | (c) JS Foundation and other contributors | jquery.org/license */
!function(e,t){"use strict";・・・
-->
</script>

例としてjQueryのコードを貼りつけてます。

注意点は、<script>タグで囲むことと、
コメントの<!–、–>を付けておくこと。

コメントを付けとかないと、WordPressが自動で<p>タグを付けたりしてくるので
どうやっても動かないことになります。

add_filterで記述する

WordPressのadd_filter関数を使って、jsファイルの読み込みをしても良いです。

たとえばこんな感じのコードを、functions.phpに書きます。

function load_myscripts() {
  	wp_enqueue_script( "jQuery", includes_url().'/js/mylib/jquery-3.3.1.min.js' );
}
add_action( 'wp_enqueue_scripts', 'load_myscripts' );

これで、自分の設置したファイルを読みに行ってくれるようになります。

注意点は、FTPソフトなどで、サーバー内の任意の場所にスクリプトファイルを置いておくことです。

includes_url()でWordPressのディレクトリ配下の「/wp-includes」までのパスを返してくれます。
さらにその下の「/js/mylib/jquery-3.3.1.min.js」を読みにいく、
というソースコードになっています。

ちゃんとその場所に、jsファイルを置いておきましょう。

さらにwp_enqueue_scriptについて

wp_enqueue_scriptの書式はこんな感じ。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

まとめ

外部JavaScriptファイルを読み込みたければ
wp_enqueue_script()を使うべし。
ということでした。

それではまたー。

WordPressプラグイン & WebAPI 活用ガイドブック [Version 3.x対応]

posted with カエレバ

星野 邦敏,西川 伸一 翔泳社 2013-01-29

Amazon

楽天市場

7net

jQuery最高の教科書

posted with カエレバ

株式会社シフトブレイン SBクリエイティブ 2013-11-26

Amazon

楽天市場

7net