WordPressのテーマにcssとjsを読み込む書き方

2022 7/15

2018-08-03 2022-07-15

この記事では、WordPressテーマをカスタマイズする際に行う、CSSやJSの読み込みを方法について解説します。

WordPressテーマにCSSファイルを読み込む

functions.phpで読み込みたいcssファイルを記述します。

// CSSファイルの読み込み
function add_stylesheet() {
    wp_enqueue_style(
        'style',
        get_template_directory_uri().'/css/style.css'
    );
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );

保存したら、ページをひらくとhead内にCSSファイルへのリンクが表示されます。

<link rel='stylesheet' id='style' type=‘text/css’ href='http://テーマのファイル/css/style.css' media='all' />

CSSを読み込む関数：wp_enqueue_style()関数

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

$handle	スタイルの名前
$src	スタイルシートのURL
$deps	このスタイルを読みこむ前に、読みこむCSSファイル array(‘parent-style’)のように名前を指定する初期値はarray()
$ver	バージョン番号初期値はfalse
$media	media属性を指定する初期値はall

基本的には、スタイルの名前と、スタイルシートのURLの２つを設定すればオッケーです。

enqueはキュー（列）に入れるという意味です。

CSSファイルの読込み順序に気をつける

function add_stylesheet() {
    wp_enqueue_style(
        'bootstrap', // 読み込み名
        get_template_directory_uri() . '/css/bootstrap.css'
    );
    wp_enqueue_style(
        'style',
        get_template_directory_uri() . '/css/style.css',
        array('bootstrap') // style.cssの前にbootstrap.cssを読み込む
    );
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );

WordPressテーマにJSファイルを読み込む

functions.phpで読み込みたいjavascriptファイルを記述します。

function add_scripts() {
    wp_enqueue_script(
        'main',
        get_template_directory_uri().'/js/main.js',
    );
}
add_action( 'wp_enqueue_scripts', 'add_scripts');

このコードによって、head内にこんな風にjavascriptのファイルが表示されます

<script type=‘text/javascript’ scr='http://テーマのファイル/js/main.js'></script>

Javascriptを読み込む関数：wp_enqueue_script関数

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

$handle	スクリプトの名前
$src	スクリプトのURL
$deps	このスタイルを読みこむ前に、読みこむjsファイル array(‘parent-js’)のように、スクリプトの名前を指定する初期値はarray()
$ver	バージョン。初期値はfalse
$in_footer	スクリプトの配置位置。 trueだと</body>の直前。 falseだと</head>タグ内に表示される初期値はfalse. ※基本、最初に読み込まなくて良ければtrueを設定する

【応用編】読み込み順序とスクリプトの表示位置を指定する記述例

[prism class=”php”]//functions.php function add_scripts() { wp_enqueue_script( ‘bootstrap’, get_template_directory_uri().’/js/bootstrap.min.js’, array( ), false, true // /body前に出力 ); wp_enqueue_script( ‘main’, get_template_directory_uri().’/js/main.js’, array(‘bootstrap’), // bootstrapの後に読み込む false, true // /body前に出力 ); } add_action( ‘wp_enqueue_scripts’, ‘add_scripts’);[/prism]

子テーマでcssとjsを読み込むときの注意点

WordPressで子テーマにCSSとJavascriptファイルを読み込む場合には、子テーマのfunctions.phpに記述していきます。

子テーマでは、URLを取得する関数が変わる

テーマファイルのURLを取得する関数は二種類あります

get_template_directory_uri()
get_stylesheet_directory_uri()

親テーマのみの場合、どちらも親テーマのディレクトリになります。

子テーマを有効化している場合は、それぞれ取得結果のURLが変わります。

get_template_directory_uri()関数	親テーマのディレクトリ
get_stylesheet_directory_uri()関数	子テーマのディレクトリ

子テーマをカスタマイズするときには、get_stylesheet_directory_uri()を使います。

ファイルの読み込み順を指定する

親テーマのstyle.css
子テーマのstyle.css
親テーマのmain.js
子テーマのmain.js

親テーマのCSSとJSを読み込んだ後に、子テーマのCSSとJSを読み込むことでファイルを上書きます。

//functions.php
function add_files() {
    // 親テーマのstyle.cssを読み込む
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri().'/css/style.css'
    );
    // 子テーマのstyle.cssを読み込む
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri().'/css/style.css',
        array('parent-style')　// 親テーマのファイルを先に読み込む
    );
    wp_enqueue_script(
        'parent-js',
        get_template_directory_uri().'/js/main.js',
        array(),
        false,
        true
    );
    wp_enqueue_script(
        'child-js',
        get_stylesheet_directory_uri().'/js/main.js',
        array('parent-js'),　　// 親テーマのファイルを先に読み込む
        false,
        true
    );
}
add_action( 'wp_enqueue_scripts', 'add_files');