WordPress CSSとjavascriptを動的読み込みする方法

Pocket

CSSファイルやJavascriptファイルを呼び出す際、HTMLではhead内やbodyの直前に直接記述します。Wordpressでも同じように記述可能ですが、ページごとに呼び出すファイルを変更したい場合にheadの記述が非常に長くなってしまい見づらくなることも。

そこでこの記事では、Wordpressの公式テーマ制作でも推奨されているCSSとJavascriptファイルの動的読み込み方法を紹介します。

CSSとjavascriptファイルの動的読み込みする方法

wp_enqueue_style と wp_enqueue_scriptの使い方、呼び出し方

WordPressでCSSスタイルやJavascriptを動的に読み込むには、wp_enqueue_stylewp_enqueue_scriptという関数を使ってファイルを指定する必要があります。

関数の使い方はとても簡単。ファイルの名前とパスを指定するだけです。テーマのスタイルシートの場合はこんな感じ。

// メインのスタイルシートを読み込み
wp_enqueue_style( 'theme-style', get_stylesheet_uri() );

Bootstrapなどの外部ファイルの読み込みはこんな感じ。

// Bootstrapの読み込み
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');

上記のコードはfunctions.php内に関数を作って記述します。

function themeslug_enqueue_style() {
    wp_enqueue_style( 'theme-style', get_stylesheet_uri() ); 
}

function themeslug_enqueue_script() {
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js'  );
}

ここまででファイルとパスの指定ができました。あとはこれを呼び出すだけ。

functions.phpで記述したCSSやJavascriptファイルを動的に呼び出すには、wp_enqueue_scriptsというフックを使用します。これを使うとhead内に設定したファイルが出力されるようになります。先ほど作った関数を呼び出すには以下のように記述すればOK。

function themeslug_enqueue_style() {
    wp_enqueue_style( 'theme-style', get_stylesheet_uri() ); 
}

function themeslug_enqueue_script() {
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js'  );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );

デフォルトではすべてhead内に出力されるので、Javascriptだけをフッターで呼び出したい場合はwp_enqueue_scriptのパラメータを変更する必要があります。

wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array(), false, true );

wp_enqueue_style と wp_enqueue_script のカスタマイズ

先ほどはフッターにJavascriptを出力してみましたが、wp_enqueue_scriptwp_enqueue_styleは他にもいろいろ設定できる箇所があります。簡単にまとめるとこんな感じ。

  • $handle: ファイルの名前
  • $src: ファイルのパス
  • $deps: 必須(依存?)ファイルの読み込み
  • $ver: ファイルのバージョン
  • $in_footer: フッターで読み込むかどうか

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

$verではバージョン番号を設定できます。デフォルトではfalseになっており、Wordpressのバージョン番号が出力されるようなので、削除する場合はnullと記入しておきましょう。また、ファイルのバージョン番号を入れることもできます。

wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array(), '1.0.0' ); 

$depsはBootstrap.jsのようにjQueryが必要なファイルの場合に使用します。array()を使って記述すればOK。

wp_enqueue_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), false, true);