wordpressのfunctions.phpでJSやCSSを一元管理する
CSSやJavaScriptの読み込みはheader.phpに書くこともできますが、functions.phpでwp_enqueue_style()、wp_enqueue_script()をアクションフックに登録して読み込むことが推奨されています。CSSやJavaScriptの重複読み込みを回避できたり、functions.php内で一元管理できることなどが挙げられます。
基本一元管理
cssの読み込み
利用例
function add_files() {
// サイト共通のCSSの読み込み
wp_enqueue_style( 'main', get_template_directory_uri() . '/css/main.css', "", '20210201' );
}
add_action( 'wp_enqueue_scripts', 'add_files' );
出力例
<link rel='stylesheet' href='https://.../wp-content/themes/themename/main.css?ver=20210201' type='text/css' media='all' />
Javascriptの読み込み
利用例
function add_scripts() {
wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '20210201', true );
}
add_action('wp_print_scripts', 'add_scripts');
出力例
<script type='text/javascript' src='http://.../wp-content/themes/themename/js/main.js?ver=20210201'></script>
cssとJavascriptを同時で読み込み
cssとJavascriptを一緒に記入する参考例になります。
条件分岐を利用して読み込むページを指定する方法もあわせて書いてありますので参考までに
function add_files() {
//CSSの読み込みはここから
wp_enqueue_style('main-style',get_template_directory_uri().'/style.css' );
//header部分のcssを読み込み
wp_enqueue_style('bootstrap-style','//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' );
wp_enqueue_style('awesome-style','//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' );
//全てのページにcss/store.cssを読み込み
wp_enqueue_style('main-style', get_template_directory_uri().'/css/main.css');
//固定ページスラッグcontact か カスタム投稿タイプcustom-postの記事 か カスタム投稿タイプadd_newsの一覧だった場合、css/custom-post.cssを読み込み
if (is_page('contact') || is_singular('custom-post') || is_post_type_archive('custom-post')) {
wp_enqueue_style('custom-post-style', get_template_directory_uri().'/css/custom-post.css');
}
//固定ページスラッグaboutだった場合、css/about.cssを読み込み
if (is_page('about')) {
wp_enqueue_style('about-style', get_template_directory_uri().'/css/about.css');
}
//トップページにslider.css
if (is_home()) {
wp_enqueue_style('slider-style', get_template_directory_uri().'/css/slider.css');
}
//画面サイズが768pxから1112pxまではここを読み込む
wp_enqueue_style('tablet_style', get_template_directory_uri() . '/css/tablet.css', array(), false, '(min-width:768px) and ( max-width:1112px)');
//画面サイズが320pxから¥767pxまではここを読み込む
wp_enqueue_style('sp_style', get_template_directory_uri() . '/css/sp.css', array(), false, '(min-width:320px) and ( max-width:767px)');
//JavaScriptの読み込みはここから
wp_enqueue_script('lodash-script', '//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js', array( 'jquery' ), '', true);
//header部分のjavascriptを読み込み
wp_enqueue_script('header-script', get_template_directory_uri().'/js/header.js', array( 'jquery' ), '', true);
//トップページにjs/main.jsを読み込み
if (is_home()) {
wp_enqueue_script('swiper-script', '//cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js', array( 'jquery' ), '', true);
wp_enqueue_script('slider-script', get_template_directory_uri().'/js/slider.js', array( 'jquery' ), '', true);
}
}
//関数名add_scripts()を表側で呼び出す
add_action('wp_enqueue_scripts', 'add_files');
まとめ
CSSとJavaScriptをfunctions.phpで読み込み、ヘッダーやフッターで出力する方法をご紹介しました。
functions.phpにまとめて記述することが推奨されているためhead内ではなくfunctions.php内に記述したほうが管理もしやすくなりますので一度試してみてください！
この記事を書いた人
connecti
CONNECTIは人と人を繋ぐ架け橋になるという思いで創業しました。
