WordPressの子テーマでCSSとJSを読み込ませる方法
WordPressで子テーマを使う場合、親テーマのCSSやJSの内容の一部を子テーマの方で上書きするというケースがほとんどかと思います。
上書きするには、WordPressが子テーマのCSSを読み込む前に親テーマのCSSを読み込む必要があるわけですが、子テーマのCSSの冒頭で@importで読み込ませる方法は推奨されていません。
また無理やりな方法ですが、親テーマのCSSを子テーマへ全コピーしてしまったら子テーマを使うメリットはほとんどなくなってしまいます。
ということで、今回は子テーマでCSSとJSを読み込む方法についてご紹介したいと思います。
親テーマと子テーマのCSSとJSを読み込むソース
サンプルソースはこちらです。
functions.phpに追記してください。
- functions.php
-
//親テーマと子テーマのCSSとJSを読み込む add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' ); function theme_enqueue_scripts() { //親テーマのreset.css wp_enqueue_style( 'reset', get_template_directory_uri() . '/css/reset.css' ); //親テーマのslick.css wp_enqueue_style( 'slick', get_template_directory_uri() . '/js/slick/slick.css' ); //親テーマのstyle.css wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' ); //子テーマのstyle.css wp_enqueue_style( 'style-child', get_stylesheet_directory_uri() . '/style.css', array( 'style' ) ); //親テーマのslick.js wp_enqueue_script( 'slick', get_template_directory_uri() . '/js/slick/slick.min.js' ); //親テーマのfunctions.js wp_enqueue_script( 'functions', get_template_directory_uri() . '/js/functions.js' ); //子テーマのfunctions.js wp_enqueue_script( 'functions-child', get_stylesheet_directory_uri() . '/js/functions.js', array( 'functions' ) ); }
WordPressテーマで使用しているCSSやJSが複数ある場合は、子テーマの方でそれらの読み込み順を指定する必要があります。
そのため、子テーマの方で内容を変更する必要がないファイルに関しても、上記ソースのように読み込ませたい順番にwp_enqueue_style関数とwp_enqueue_script関数(後述)を使って記述していきます。
上記ソースはテーマのテンプレートファイル(header.phpなど)のwp_head関数で下記のようなソースを生成します。
分かりやすいように子テーマのファイルを読み込む記述はインデントしてありますが、実際には必要ありません。
- HTML
-
<link rel='stylesheet' id='reset-css' href='http://xxxxxx.com/wp-content/themes/yourtheme/css/reset.css?ver=x.x.x' type='text/css' media='all' /> <link rel='stylesheet' id='slick-css' href='http://xxxxxx.com/wp-content/themes/yourtheme/js/slick/slick.css?ver=x.x.x' type='text/css' media='all' /> <link rel='stylesheet' id='style-css' href='http://xxxxxx.com/wp-content/themes/yourtheme/style.css?ver=x.x.x' type='text/css' media='all' /> <link rel='stylesheet' id='style-child-css' href='http://xxxxxx.com/wp-content/themes/yourthemechild/style.css?ver=x.x.x' type='text/css' media='all' /> <script type='text/javascript' src='http://xxxxxx.com/wp-includes/js/jquery/jquery.js?ver=x.x.x'></script> <script type='text/javascript' src='http://xxxxxx.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=x.x.x'></script> <script type='text/javascript' src='http://xxxxxx.com/wp-content/themes/yourtheme/js/slick/slick.min.js?ver=x.x.x'></script> <script type='text/javascript' src='http://xxxxxx.com/wp-content/themes/yourtheme/js/functions.js?ver=x.x.x'></script> <script type='text/javascript' src='http://xxxxxx.com/wp-content/themes/yourthemechild/js/functions.js?ver=x.x.x'></script>
子テーマで使用する関数
- wp_enqueue_style関数とwp_enqueue_script関数
- 「enqueue」とは「列に加える」というような意味で、wp_enqueue_style関数とwp_enqueue_script関数はそれぞれスタイルファイルとスクリプトファイルを順番に追加するためのものです。
上でも書きましたが、テーマで使用しているCSSなどが複数ある場合、読み込み順が崩れてしまうと表示や動作に不具合が出てしまうことがあります。
それを避けるため、子テーマの方でこの2つの関数を使って読み込み順を指定した上で親テーマの同名ファイルを直後に子テーマのファイルで上書きするよう順序を保って読み込むようにしておきましょう。
- get_template_directory_uri関数とget_stylesheet_directory_uri関数
- もう一つ注意して頂きたいのは、get_template_directory_uri関数とget_stylesheet_directory_uri関数の使い分けです。
get_template_directory_uri関数は親テーマのディレクトリURIを返し、get_stylesheet_directory_uri関数はそのテーマのスタイルシートがあるディレクトリのURIを返します。
そのため、子テーマのfunctions.phpで親テーマのファイルを読み込む際にはget_template_directory_uri関数を、子テーマのファイルを読み込む際にはget_stylesheet_directory_uri関数を使っています。
子テーマを使わない場合、この2つの関数に違いはあまり感じられないかと思いますが、子テーマを使う場合はこの2つの使い分けが重要になります。
