WordPressの子テーマでCSSとJSを読み込ませる方法

2017.03.21 2017.11.13WordPress
WordPressの子テーマでCSSとJSを読み込ませる方法

WordPressで子テーマを使う場合、親テーマのCSSやJSの内容の一部を子テーマの方で上書きするというケースがほとんどかと思います。

上書きするには、WordPressが子テーマのCSSを読み込む前に親テーマのCSSを読み込む必要があるわけですが、子テーマのCSSの冒頭で@importで読み込ませる方法は推奨されていません。

また無理やりな方法ですが、親テーマのCSSを子テーマへ全コピーしてしまったら子テーマを使うメリットはほとんどなくなってしまいます。

ということで、今回は子テーマでCSSとJSを読み込む方法についてご紹介したいと思います。

親テーマと子テーマのCSSとJSを読み込むソース

サンプルソースはこちらです。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関数で下記のようなソースを生成します。分かりやすいように子テーマのファイルを読み込む記述はインデントしてありますが、実際には必要ありません。

<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つの使い分けが重要になります。

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら