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

2019-06-19WordPress

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

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

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

wp_enqueue_script 関数

書き方

テーマ/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 のバージョンによって使える関数が異なる。

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 ファイル版で、使い方や機能は似ている。

書き方

テーマ/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_script と wp_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 ）にアクション名を指定する。
指定するアクション名によって、読み込む画面（タイミング）が変わる。