[WordPress] JavaScriptやCSSファイルを読み込む方法

2019-06-19WordPress

WordPress で作っているサイトで、jQueryのプラグインとか、自作のjsやスタイルシート(cssファイル)を使いたいときの読み込み方法。CDNから読み込むこともできる。
WordPressを使っていないときは、HTMLにscriptタグやlinkタグを書けばいいのだが、WordPressにはWordPress流の方法がある。header.phpにlinkタグとかを埋め込むこともできるし、ググるとそのような方法も出てくるが、WordPressには外部ファイルを読み込むための関数が用意されているので、それを使おう。

スポンサーリンク

スクリプトファイルの読み込み方

WordPress で用意されている、wp_enqueue_script 関数を使う。これは、functions.php に書く。

wp_enqueue_script 関数

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

重複出力を回避したり、依存関係の順序と、出力場所を(ヘッダーかフッター)を制御して JS ファイルを読み込んでくれる関数
(実際には、JS ファイルをキューに追加していく関数)

引数説明
$handle必須。スクリプトの名前(識別するための名前)
$src省略可(省略時は false となる)。スクリプトの URL(スクリプトファイルがおいてある場所)
$deps省略可(省略時は array() となる)。依存するスクリプトの名前(このスクリプトより前に読み込まれる必要があるスクリプトの名前( $handle で指定した名前))
$ver省略可(省略時は false となる)。スクリプトのバージョン番号。 NULL にした場合、バージョン番号は追加されない。日時を指定して、キャッシュの有無に関わらず常に最新バージョンを読み込ませることができる。
$in_footer省略可(省略時は false となる)。 false の場合、<head> タグ内で出力される。 true の場合、</body> タグの前で出力される。

* wp_register_script 関数に登録済みの場合は、ハンドル名を渡すだけでキューへ追加される。
* 第一引数の $handle は、同じ名前は使えない(重複する名前をつけてはいけない)。
* スクリプトの読み込みは、レイアウトとか画面表示に影響しないなら、</body> タグの前で読み込んだほうが、表示速度が速くなると言われている

書き方

テーマ/jsフォルダ内に、自作した myscript.js というファイルと、「jquery.cookie.js」という jQuery ライブラリを CDN を使って読み込む場合、

function my_scripts() {
  // 自作jsファイルの読み込み
	wp_enqueue_script( 'my-script', get_theme_file_uri('/js/myscript.js') );
  // CDNから「jquery.cookie.js」を読み込む
	wp_enqueue_script( 'jquery-cookie', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js', array('jquery'), '1.4.1', true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

* CDN から「jquery.cookie.js」を読み込む箇所では、第二引数に CDN のリンク先、第三引数で jQuery 読み込みの後に「jquery.cookie.js」を読み込むよう指定(「jquery.cookie.js」は、先に jQuery を読み込んでおく必要があるため)、第三引数でバージョンは常に '1.4.1' をロードするよう指定、第五引数で wp_footer で出力するよう指定している。

* 第三引数のバージョンについて、常に最新版を読み込ませるには日時を入れる。

wp_enqueue_script( 'example', get_theme_file_uri('js/example.js'), array(), date('U'));

第二引数 $src でのパスの指定方法

ローカル(自サーバー)にスクリプトファイルをおいている場合、URL をそのまま書くべきではない。
テーマディレクトリの URI を取得する関数を使おう。WP のバージョンによって使える関数が異なる。

WordPress 4.7 以上なら、「get_theme_file_uri( $file )」関数を使う

WordPress 4.7 以前なら、
1. 子テーマフォルダにスクリプトファイルをおいている場合、「get_stylesheet_directory_uri()」を使う
   上記例なら、get_stylesheet_directory_uri() . '/js/myscript.js' と書く。
2. 親テーマフォルダにスクリプトファイルをおいている場合、「get_template_directory_uri()」を使う
   上記例なら、get_template_directory_uri() . '/js/myscript.js' と書く。

get_theme_file_uri( $file ) とは

WordPress 4.7 で追加された、テーマフォルダ内にあるファイルの URL を取得する関数。
引数「$file」部分には、テーマフォルダ以降のパスを指定する。
バージョン 4.7 以前は、親テーマと子テーマの URL 取得関数は2つに分かれていたが、get_theme_file_uri( $file ) は、$file に指定したファイルが、親と子テーマの両方に存在している場合、子テーマのファイル URL を取得し、子になければ親テーマのファイル URL を取得する。

引数なしにするとテーマフォルダまでの URL が返ってくる。

echo get_theme_file_uri();
// http://サイト.com/wp-content/themes/twentyseventeen

CSSファイルの読み込み方

wp_enqueue_style 関数を使う。これは、functions.php に書く。

wp_enqueue_style 関数

wp_enqueue_script 関数の CSS ファイル版で、使い方や機能は似ている。

wp_enqueue_style( $handle, $src, $deps, $ver, $media )

CSS ファイルをキューに追加していく関数で、重複出力を回避したり、依存関係の順序を制御していい感じに読み込んでくれる

引数説明
$handle必須。スタイルシートの名前(識別するための名前)
$src省略可(省略時は空文字となる)。スタイルシートの URL ( CSS ファイルがおいてある場所)
$deps省略可(省略時は array() となる)。依存するスタイルシートの名前(このスタイルシートより前に読み込まれる必要があるスタイルシートの名前( $handle で指定した名前))
$ver省略可(省略時は false となる)。スタイルシートのバージョン番号。日時を指定して、キャッシュの有無に関わらず常に最新バージョンを読み込ませることができる。
$media省略可(省略時は all となる)。スタイルシートが定義されているメディア( link タグの media 属性)

* wp_register_style関数に登録済みの場合は、ハンドル名を渡すだけでキューへ追加される。
* 第一引数の $handle は、同じ名前は使えない(重複する名前をつけてはいけない)。
* 第二引数 $src の書き方は、第二引数 $src でのパスの指定方法の項を参照すること。

書き方

テーマ/cssフォルダ内に、自作した mystyle.css という CSS ファイルと、「Font Awesome5」を CDN を使って読み込む場合、

function my_style() {
  // 自作cssファイルの読み込み
  wp_enqueue_style( 'my-css', get_theme_file_uri('/css/mystyle.css'), array(), date('YmdGis',filemtime( get_theme_file_path( '/css/mystyle.css' ) ) );
  // CDNから「Font Awesome5」を読み込む
  wp_enqueue_style( 'fontawesome5', 'https://use.fontawesome.com/releases/v5.6.1/css/all.css' );
}
add_action( 'wp_enqueue_scripts', 'my_style' );

* 「自作cssファイルの読み込み」では、第二引数に get_theme_file_uri 関数を使ってファイル URL を、第四引数のバージョンには filetime() を使ってファイルの最終更新日時を指定している。filetime() は Unix タイムスタンプを返すので、date() を使って分かりやすいフォーマットに変換している。
第三引数に指定はないけど、第四引数を書くために空の配列を指定している。

js と css ファイルを一括読み込み

wp_enqueue_scriptwp_enqueue_style を実行関数に一緒に書くことができ、1回のアクションフックで読み込むことができる。また、条件分岐を用いて特定のページでのみ読み込ますこともできる

function my_files() {
  // jsファイルの読み込み
  wp_enqueue_script( 'jquery-cookie', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js', array('jquery'), '', true);
  // CSSファイルの読み込み
  wp_enqueue_style( 'fontawesome5', 'https://use.fontawesome.com/releases/v5.6.1/css/all.css' );
  // お問い合わせページで専用スタイルシートを読み込む
  if ( is_page( array('contact') ) ) {
    wp_enqueue_style( 'contact-css', get_theme_file_uri('/css/contact.css') );
  }
}
add_action( 'wp_enqueue_scripts', 'my_files' );

アクションフックの種類

add_action() はアクションフックと呼ばれ、第一引数( $hook )にアクション名を指定する。
指定するアクション名によって、読み込む画面(タイミング)が変わる。

wp_enqueue_scriptsフロントページ(公開ページ)で読み込み
login_enqueue_scriptsログイン画面で読み込み
admin_enqueue_scripts管理画面で読み込み

Posted by Agopeanuts