functions.phpでCSS、JSファイルを読み込む方法
WordPress制作において、CSSやJavaScriptなどの外部ファイルはfunctions.phpで読み込むことが推奨されています。その方法を解説します。
header.php内に直接書き込むことも可能ですが、WordPressでは非推奨とされています。
詳しくは後ほど述べさせていただきます。
functions.phpでCSS、JSファイルを読み込むコード
function add_files(){
<!-- CSSを読み込む -->
wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array(), false, 'all' );
wp_enqueue_style( 'reset', get_template_directory_uri() . '/css/reset.css', array(), false, 'all' );
<!-- JS（jQuery）を読み込む -->
wp_enqueue_script('base', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), false, true );
wp_enqueue_script('script',get_template_directory_uri().'/js/script.js',array(),false, true);
}
add_action('wp_enqueue_scripts','add_files');
一つずつ解説していきます。
関数を作成
まずはfunctions.php内に関数を作成してください。名前は任意のもので大丈夫ですが、わかりやすい方がいいと思います。今回はadd_filesとしています。
function add_files(){
}
add_action('wp_enqueue_scripts','add_files');
この中にCSS、JSを読み込むコードを書いていきます。
まずはCSSを読み込むコードからです。
wp_enqueue_style()
CSSを読み込む場合はwp_enqueue_style()という関数を用います。
書くのは5つで、カンマ（ , ）で区切っていきます。
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
1つ目の$handleでは名前をつけます。（今回はstyleと、resetという名前をつけています）
名前は何でもいいですが、他と被らないようにしてください。
$srcで、実際にファイルを読み込みます。ディレクトリの前にget_template_directory_uri() .と記述します。
CDNなどはURLをそのまま書いてください。
$depsは依存関係のあるファイルを指定します。デフォルトはArray（）で、Array()の中に$handleでつけた名前を入れるとArray（ $handle ）の中のファイルが先に読み込まれます。
$verではバージョン番号があればそれを指定します。falseに設定すると、インストールされているWordPressのバージョンと同じバージョン番号が自動的に追加されます。デフォルトはfalseで、迷ったらfalseに設定しておけばいいと思います。
mediaでは、このスタイルシートが定義されているメディアを指定します。デフォルトは allです。
function add_files(){
wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array(), false, 'all' );
wp_enqueue_style( 'reset', get_template_directory_uri() . '/css/reset.css', array(), false, 'all' );
}
add_action('wp_enqueue_scripts','add_files');
wp_enqueue_script()
JSを読み込む場合はwp_enqueue_script()という関数を用います。
wp_enqueue_script( $handle, $src, $deps, $ver, $args );
書き方は最後の$argsの部分を除き、先述したCSSの読み込みと同じです。
$argsでは、JSファイルをどこで読み込むかを指定します。<head>に配置する場合はfalse、</body>直前に配置する場合はtrueを指定します。デフォルトはfalseです。
function add_files(){
wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array(), false, 'all' );
wp_enqueue_style( 'reset', get_template_directory_uri() . '/css/reset.css', array(), false, 'all' );
wp_enqueue_script('base', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), false, true );
wp_enqueue_script('script',get_template_directory_uri().'/js/script.js',array(), false, true );
}
add_action('wp_enqueue_scripts','add_files');
なぜfunctions.phpでの読み込みが推奨されているのか
こちらは私も勉強中なので自信はないのですが、一つの理由として、functions.php内で一元管理できるからです。cssはheadタグ内、jsはbodyタグが終わる直前で読み込みますが、それをfunctions.phpで一括で管理できます。
また、特定のページに特定のCSS、JSを読み込ませたいと言う場合も、functions.phpに記述することでその制御が可能になリます。
参考にした記事
Discussion