そんなにGeekじゃないエンジニアブログ

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

calendar

こんにちは。でんすけ(@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 );
$handle スクリプトの識別名。任意で付けられるけど、すでに読み込まれているスクリプトと被らないように注意。
なお、これ以外の引数は全てオプションなので、無くてもいい。
$src スクリプトの場所。URLを記述。
$deps 依存するスクリプトを配列で指定。jQueryを利用するスクリプトなら、array( ‘jquery’ )のように書く。無かったら空でarray()。
$ver バージョン。 ‘1.0.0’みたいな感じ。
$in_footer trueを指定すると、</body>終了タグの前にスクリプト読み込みされる。指定なし、もしくはfalseで、</head> タグ内で読み込み。

まとめ

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

それではまたー。

この記事をシェアする

コメント

コメントはありません。

down コメントを残す




CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください