WordPressでのCSS・JSの読み込み方法【コピペでOK！】

2020 9/19

2020.09.15 2020.09.19

WordPressテーマ化する際は数々の独自のお作法があります。

その中でも今回は【CSS・JSを読み込むお作法】をご紹介します！
一般的に使用されている方法をまとめていますので、初めてテーマ開発やカスタマイズする方や、オリジナルテーマを作成したいって方はぜひ読んでみてください。

クリブロ

最初は自分も、WordPress化した際に「CSSが読み込まないぞ！なんで。。」となりました。汗
今回はみんながやっているCSS・JSを読み込む方法を書き留めましたので、これでマスターしちゃってください！

表示されない理由は【ルートが変わるから】

HTMLで作った静的ページのサイトをWordpress化した時、「あれ？うまくいかない。。。」と落胆していました。

CSSが効かない

その理由はズバリ【ルートパス】が変更されるためでした。

HTMLで作った静的サイトはWordpress化すると階層が色々と変わってしまうのでそのままのコードでは問題が生じます。

クリブロ

よく考えてみれば、そうだなぁ。。

WordPressの一般的なCSSの読み込ませ方【functions.php】

HTML（静的サイト）は<head>の中に<link>でCSSを記載してますが、WordPressでは全てのテンプレート（page.phpとかsingle.phpとか）で一元管理できるようにfunctions.php記述する事が推奨されています。

CSSを読み込むためにはfunctions.phpにPHPのコードを書いていかなければならないですが、基本的な型は決まっているのでまずはコピペで対応して見ましょう。

CSSを読み込むお作法のコード

function my_scripts() {
	// サイト共通のCSSの読み込み
	wp_enqueue_style( 'style-name', get_template_directory_uri() . '/読み込みたいcssまでのパス', array(), '');
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

上記コードをコピペしてfunctions.phpに丸ごと入れてしまえば、簡単に全ページにcssを読み込ませる事ができます！
自分で書き換える場所は➡︎「/読み込みたいcssまでのパス」だけ。
PHPが分からない方でも一旦は「/読み込みたいcssまでのパス」さえ自分で書けてしまえば大丈夫！まずはお試しください。

ちなみに上記PHPコードを書くと、
実際には以下のように出力されます。

実際の出力結果のコード

<link rel='stylesheet' id='style-name-css'  href='http://demo.local/wp-content/themes/twentyseventeen/css/style.css' type='text/css' media='all' />

ついでにJSも同じ方法で読み込ませよう【functions.php】

実はjsも一般的に上記で説明したcssの読み込ませ方とほぼ同じ型で読み込ませています。基本的にはCSSとセットで一緒に記述できちゃいます。

CSSとJSを読み込むお作法コード

function my_scripts() {
	// サイト共通のCSSの読み込み
	wp_enqueue_style( 'style-name', get_template_directory_uri() . '/読み込みたいcssまでのパス', array(), '');
	// サイト共通のjsの読み込み
  wp_enqueue_script( 'script-name', get_template_directory_uri() . '/読み込みたいjsまでのパス', array(), '');
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

【応用】子テーマの読み込ませ方（ちょっとだけ違う）

さぁ、基本の型をマスターしたところで
ちょっと注意しておきたいのが「子テーマ」で制作している時です。
「子テーマ」の時はパスの書き方を変えなければ読み込まないので、下記のコードをコピペしてください。

子テーマでCSS・JSを読み込むコード

function my_child_scripts() {
	// サイト共通のCSSの読み込み（子テーマ編）
	wp_enqueue_style( 'style-child-name', get_stylesheet_directory_uri() . '/読み込みたいcssまでのパス', array(), '');
	// サイト共通のjsの読み込み（子テーマ編）
  wp_enqueue_script( 'script-child-name', get_stylesheet_directory_uri() . '/読み込みたいjsまでのパス', array(), '');
}
add_action( 'wp_enqueue_scripts', 'my_child_scripts' );

普通のテーマから何が変わったかと言うと、
get_stylesheet_directory_uri()の記述です。つまりパスを取得する関数を変える必要があります。
子テーマを使用している場合、このコードを使えば子テーマまでのパスを取得することができます！
ちょっとややこしいですが、一旦覚えやすいように簡単に下記のように書き留めておきます。

親テーマ・子テーマでの違い

親テーマにあるcssやjsを読み込みたい時
get_template_directory_uri()

子テーマにあるcssやjsを読み込みたい時
get_stylesheet_directory_uri()

まずは、このポイントを押さえておけば問題ないかと思います。
ちなみに、get_stylesheet_directory_uri()以外にも親テーマと子テーマで違う場所あるじゃんと思った方、一旦はそこまで重要ではないので気にせずコピペで対応して大丈夫です！今回はこの型の違いを押さえておきましょう！