Wordpressのfunction.phpでCSSとJSを読みこむ方法

投稿日：2021/10/02 ｜最終更新：2021/10/04
Wordpress

Wordpressで自作テーマを利用する際、例えばheader.php内にCSS・JSを読み込むタグを入れることも可能ですが、WP公式ではfunction.phpを利用して読みこむことを推奨されています。
WordpressでCSS・JS読み込み関連でよく使う処理をまとめておきました。

wp_head()内のjQueryを読み込まない

wp_head()では、Wordpress本体内に含まれているjQueryを読み込みます。
この処理を削除する方法は下記の通りです。

/**
 * 不要なjQueryを読み込まない.
 */
function my_scripts_method() {
    wp_deregister_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

function.phpでCSSを読み込む方法

header.phpなどに<link rel="stylesheet" href="sample.css">などのタグを入れることでCSSの読み込みを行うことは可能ですが、function.phpで読み込む方法は下記の通りです。

wp_enqueue_style()関数を利用する

function.phpでスタイルシートを読み込むには、下記の関数を利用します。

function add_styles() {
      wp_enqueue_style( $handle, $src, $deps, $ver, $media );
}
add_action( 'wp_enqueue_scripts', 'add_styles' );

引数	内容	初期値	必須
$handle	スタイルシートを区別するハンドル名。半角英数・アンダーバー・ハイフンを利用可能。	string	○
$src	スタイルシートのURL。	string/bool
$deps	依存するスタイルシートのハンドル名。 $srcで指定したスタイルシートの前に読みこんでおくべきスタイルシートのハンドル名を指定できます。	array
$ver	スタイルシートのバージョン番号を指定する文字列。	string/bool
$media	スタイルシートのmedia属性。例） 'all'、'screen'、'handheld'、'print'	string/bool

wp_enqueue_style()の利用例

複数のCSSを読み込んでみます。
テーマファイル内に[css]ディレクトリを作成してスタイルシートファイルをまとめている想定です。
管理画面以外でのみCSSを読み込む形にしています。

/**
 * CSS追加
 */
function add_styles() {
    if ( ! is_admin() ) {
        // 読み込むCSSのハンドルとパスを配列に定義
        $css_array = array(
            'style-reset'       => '/css/reset.css',
            'style-common'      => '/css/common.css',
            'style-style'       => '/css/style.css',
            'style-editor'      => '/css/editor.css',
            'style-smp'         => '/css/smp.css',
        );
        if ( is_page() ) { // 固定ページでのみ読み込むCSS
            $css_array['style-page'] = '/css/page.css';
        }
        foreach ( $css_array as $key => $value ) {
            // ファイルの最終更新日をバージョン情報として挿入
            $last_modified = filemtime( get_template_directory() . $value );
            wp_enqueue_style( $key, esc_url( get_template_directory_uri() ) . $value, '', $last_modified, false );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'add_styles' );

function.phpでJSを読み込む方法

header.phpなどに<script type="text/javascript" src="sample.js"></script>などのタグを入れることでJSの読み込みを行うことは可能ですが、function.phpで読み込む方法は下記の通りです。

wp_enqueue_script()関数を利用する

function.phpでスタイルシートを読み込むには、下記の関数を利用します。

function add_script() {
      wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', 'add_script' );

引数	内容	初期値	必須
$handle	スクリプトを区別するハンドル名。半角英数・アンダーバー・ハイフンを利用可能。	string	○
$src	スクリプトのURL。	string
$deps	依存するスクリプトのハンドル名。 $srcで指定したスクリプトの前に読みこんでおくべきスクリプトのハンドル名を指定できます。	array
$ver	スクリプトのバージョン番号を指定する文字列。	string
$in_footer	スクリプトの配置。通常（false）`<head>`内に配置され、trueの場合`</body>`終了タグの前に配置される。	bool

wp_enqueue_script()の利用例

複数のJSを読み込んでみます。
テーマファイル内に[js]ディレクトリを作成してスクリプトファイルをまとめている想定です。
管理画面以外でのみJSを読み込む形にしています。

/**
 * JS追加
 */
function add_scripts() {
    if ( ! is_admin() ) {
        $js_array = array(
            'js-jquery' => '/js/jquery.min.js',
            'js-common' => '/js/cmd.js',
            'js-sp'     => '/js/sp.js',
        );
        if ( is_page() ) {
            $js_array['js-page'] = '/js/page.js';
        }
        foreach ( $js_array as $key => $value ) {
            $last_modified = filemtime( get_template_directory() . $value );
            wp_enqueue_script( $key, esc_url( get_template_directory_uri() ) . $value, '', $last_modified, false );
        }
    }
}
add_action( 'wp_print_scripts', 'add_scripts' );