【WordPress】サイトにwp_enqueue_styleを使ってCSSを読み込ませる

f:id:alysantwanet:20170704012156j:plain
今日も今日とてWordPress初心者メモ。
headにCSSを読み込ませる方法について書きます。

サイトのheadにCSSを読み込ませる時はfunction.phpにwp_enqueue_styleを使います。
詳しい情報はCodexに載ってます。
関数リファレンス/wp enqueue style - WordPress Codex 日本語版
が、できるだけ簡単にわかりやすく書いてみます。

wp_enqueue_styleの書き方

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

$handle（必須）

任意の名前をつけます

$src

（オプション）スタイルシートの URLを記入します。

$deps

（オプション）このスタイルシートより前に読み込まれる必要があるスタイルシートのハンドル名を記入します。

$ver

（オプション）スタイルシートのバージョン番号を指定する文字列 (存在する場合) 。

$media

（オプション）スタイルシートが定義されているメディアを指定する文字列。

$srcの書き方について

外部のURLを書く時は関数は使わずに記入してしまえば大丈夫ですが、テーマ内のURLを記入したい時は下記の関数を使用してURLを取得します。

get_stylesheet_uri()

テーマの直下のstyle.cssを読み込ませる時

get_stylesheet_directory_uri()

有効化しているテーマまたは子テーマのテーマディレクトリの URL を取得する

get_template_directory_uri()

有効化しているテーマの親テーマ、または子テーマのテーマディレクトリのURLを取得する

get_stylesheet_directory_uri()とget_template_directory_uri()がややこしいのですが、簡単に使い分けるのであればget_stylesheet_directory_uri()は子テーマで開発してる時に使い、get_template_directory_uri()は親テーマで開発してる時にに使うようにするのがわかりやすいかもしれません。

関数リファレンス/get template directory uri - WordPress Codex 日本語版
 関数リファレンス/get stylesheet directory uri - WordPress Codex 日本語版

cssフレームワークなどを使用してサイトを作っている場合

たとえばCDN（ネットからコードを読み込んでる場合）でFoundationを使用し、テーマの直下のstyle.cssを続けて読み込ませたい場合。

function hoge_scripts() {
	wp_enqueue_style( 'foundation', 'https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.css', array(), '6.2.4' );//foundationのcdn読み込み
	wp_enqueue_style( 'base-style', get_stylesheet_uri(), array('foundation') );//foundationのcssの次に/style.css読み込み
}
add_action( 'wp_enqueue_scripts', 'hoge_scripts' );

ハンドル名の「hoge_scripts」とか「foundation」とか「base_style」とかの部分は任意の名前をつけてください。
FoundationのコードはCDNで読み込んでいるので、ソースコードを書く時に関数は使わなくても大丈夫です。（get_なんちゃらかんちゃらとかいらない）
ここではテーマ直下のstyle.cssよりも先にfoundationのコードを読み込ませたいので、ハンドル名'base-style'のarray()の中には「foundation」を記入しています。array()のなかにハンドル名を書く時は''を忘れないようにしてください。

テーマフォルダ内に作ったassetsフォルダにあるcssを追加で読み込ませたい場合

テーマ直下のstyle.cssの次に/assets/css/custom.cssを読み込ませたい場合は下記のように書きます。

function hoge_scripts() {
	wp_enqueue_style( 'foundation', 'https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.css', array(), '6.2.4' );//foundationのcdn読み込み
	wp_enqueue_style( 'base-style', get_stylesheet_uri(), array('foundation') );//foundationのcssの次に/style.css読み込み
	wp_enqueue_style( 'custom-style', get_template_directory_uri(). '/assets/css/custom.css', array('base-style') );//assets/css/custom.cssを'base-style'の次に読み込み
}
add_action( 'wp_enqueue_scripts', 'hoge_scripts' );