MENU

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

この記事では、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
$mediamedia属性を指定する
初期値はall

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

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()を使います。

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

  1. 親テーマのstyle.css
  2. 子テーマのstyle.css
  3. 親テーマのmain.js
  4. 子テーマの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');

まとめ

以上、WordPressテーマにCSSとJavaScriptを読むこむ記述方法でした。

  • cssとjsのファイルの読み込みはfunctions.phpに書く
  • CSSを読み込む時はwp_enqueue_style()、jsファイルを読み込む時はwp_enqueue_script()を使う
  • 子テーマにファイルを読み込む時には、get_stylesheet_directory_uri()で、子テーマのディレクトリからURLを取得する。
  • URLをコピーしました!

この記事を書いた人

元エンジニア・コンサルタント→フリーランスへ。
個人事業主さん向けにWordPress・HP作成の個人レッスンをしています。

目次