この記事では、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');まとめ
以上、WordPressテーマにCSSとJavaScriptを読むこむ記述方法でした。
- cssとjsのファイルの読み込みはfunctions.phpに書く
- CSSを読み込む時はwp_enqueue_style()、jsファイルを読み込む時はwp_enqueue_script()を使う
- 子テーマにファイルを読み込む時には、get_stylesheet_directory_uri()で、子テーマのディレクトリからURLを取得する。
