技術メモ
WordPressのfunctions.phpでサイトのCSSとJavaScriptを条件分岐で管理する

このサイトが大規模になりつつあったので、CSSやJSの管理に困っていたところ、functions.phpで管理する方法を知りました。リニューアルにあたり、この機に複雑なタグ周りの整理を行いました。
CSSやJSを各固定ページや投稿ページで切り分けることによって、サイトコードの管理・保守面で効果的で、サイトの高速化に寄与するのでぜひ試してみてください。

CSSの管理

WordPressのfunctions.phpでサイトのCSSを条件分岐で管理する

まずは、CSSについて見ていきます。
下記が、当事業サイトで記載しているfunctions.phpです。

functions.phpのCSSコードを紹介

functions.php

//CSS管理
if ( !is_admin() ) {
	function add_styles() {
		wp_deregister_style('contact-form-7');
		wp_deregister_style('print_embed_styles');
		wp_enqueue_style('base', get_bloginfo('template_directory').'/css/base.css');
		wp_enqueue_style('style', get_bloginfo('template_directory').'/style.css');
		wp_enqueue_style('spmenu', get_bloginfo('template_directory').'/css/spmenu.css');
		if (is_front_page()) {
			wp_enqueue_style('top', get_bloginfo('template_directory').'/css/top.css');
			wp_enqueue_style('swiper-bundle', 'https://unpkg.com/swiper/swiper-bundle.min.css'); 
			wp_enqueue_style('simplebar', 'https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css'); 
		} elseif (is_page()) {
			wp_enqueue_style('page', get_bloginfo('template_directory').'/css/page.css');
		} elseif (is_singular('blog') || is_post_type_archive('blog') || is_tax('blogcat') ) {
			wp_enqueue_style('embed-styles', get_bloginfo('template_directory').'/css/blog.css');
		} 
	}
	add_action('wp_print_styles', 'add_styles');
}

functions.phpの記述の結果、HTMLに出力されるコードは下記となります。サイトの必要に応じてカスタマイズして使ってください。

HTMLに出力される共通のCSS

<link rel="stylesheet" id="base-css" href="https://livalest.com/wp-content/themes/livalest/css/base.css?ver=5.9.2" type="text/css" media="all">
<link rel="stylesheet" id="style-css" href="https://livalest.com/wp-content/themes/livalest/style.css?ver=5.9.2" type="text/css" media="all">
<link rel="stylesheet" id="spmenu-css" href="https://livalest.com/wp-content/themes/livalest/css/spmenu.css?ver=5.9.2" type="text/css" media="all">

wp_deregister_style関数を使って不要なCSS削除

では、コードの解説をしていきます。まずは、WordPress既存のstyleなどを削除するためにwp_deregister_style関数を使用します。
wp_deregister_styleでハンドル名を指定して登録されているスタイルシートを削除します。

functions.php

wp_deregister_style('contact-form-7');
wp_deregister_style('print_embed_styles');

当サイトでは、Contact Form 7を使用していますが、そのデフォルトのCSSを使用していないため、wp_deregister_styleで削除しています。また、WordPressでデフォルトで挿入されるスタイルシートも削除しています(ここのコード以外にも削除しているスタイルシートはあります)。

wp_enqueue_style関数でCSS登録する

functions.php

function add_my_files() {	
  //スタイルシートの読み込み
  wp_enqueue_style( $handle, $src, $deps, $ver, $media);
//アクションフック(wp_enqueue_scripts)への登録
add_action('wp_enqueue_scripts', 'add_my_files');
$handle:スタイルシートを区別するハンドル名を指定します(idとして出力されます)。この引数は必須のパラメータです。
$src:スタイルシートのURLを指定します。
$deps:依存スタイルシートのハンドル名を配列で指定します。この引数で読み込み順を制御できます。
$ver:任意のバージョンを指定します。バージョン情報はスクリプトのURLにパラメータとして追加されるので、ブラウザキャッシュ対策としても使えます。
$media:スタイルシートのメディア属性を指定します。

当サイトでは、スタイルシートに関しては、$deps、$ver、$mediaの設定はしていません。また、全体で読み込む必要があるものと固定ページや投稿ページ各種によって条件分岐をして読み込んでいます。

functions.php

wp_enqueue_style('base', get_bloginfo('template_directory').'/css/base.css'); //ページ全体
wp_enqueue_style('style', get_bloginfo('template_directory').'/style.css'); //ページ全体
if (is_front_page()) { //トップページのみ
	wp_enqueue_style('top', get_bloginfo('template_directory').'/css/top.css');
	wp_enqueue_style('swiper-bundle', 'https://unpkg.com/swiper/swiper-bundle.min.css'); 
	wp_enqueue_style('simplebar', 'https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css'); 
		} elseif (is_page()) {  //固定ページのみ
			wp_enqueue_style('page', get_bloginfo('template_directory').'/css/page.css');
		} elseif (is_singular('blog') || is_post_type_archive('blog') || is_tax('blogcat') ) { //カスタム投稿のブログのアーカイブ、シングル、タクソノミー
			wp_enqueue_style('embed-styles', get_bloginfo('template_directory').'/css/blog.css'); } 

不必要なスタイルシートを読み込むことを避け、管理のしやすさとサイトの高速化を実現しています。また、CDNなどの外部ファイルでも上記のように記載すれば問題なく出力されます。

JavaScriptの管理

WordPressのfunctions.phpでサイトのJavaScriptを条件分岐で管理する

続いてJavaSciptの管理について見ていきます。

functions.phpのJSコードを紹介

functions.php

//JS管理
if ( !is_admin() ) {
	function add_scripts() {
		wp_deregister_script('jquery');
		wp_deregister_script( 'wp-embed' );
		wp_enqueue_script('main', get_bloginfo('template_directory').'/js/main.js','','', true);
		wp_enqueue_script('micromodal', 'https://unpkg.com/micromodal/dist/micromodal.min.js','','', false);
		wp_enqueue_script('spmenu', get_bloginfo('template_directory').'/js/spmenu.js','','', true);
		if (is_front_page()) {
			wp_enqueue_script('simplebar', 'https://unpkg.com/simplebar@latest/dist/simplebar.min.js','','', true); 
			wp_enqueue_script('swiper-bundle', 'https://unpkg.com/swiper/swiper-bundle.min.js','','', true); 
			wp_enqueue_script('top', get_bloginfo('template_directory').'/js/top.js','','', true); 
		} elseif (is_page()) {
			wp_enqueue_script('fontawesome', 'https://use.fontawesome.com/6e44a73eac.js','','', true);
		} elseif (is_singular('blog')) {
			wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js','', '', true);
			wp_enqueue_script('embed', 'https://livalest.com/wp-includes/js/wp-embed.min.js','','', false);
			wp_enqueue_script('clipboard', 'https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js','','', true);
			wp_enqueue_script('single-blog', get_bloginfo('template_directory').'/js/single-blog.js','','', true);
			wp_enqueue_script('prettify', 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js','', '', true);
		}
	}
	add_action('wp_enqueue_scripts', 'add_scripts');
}

wp_deregister_script関数を使って不要なJS削除

では、コードの解説をしていきます。まずは、不要なJSを削除するために、wp_deregister_script関数を使用します。wp_deregister_scriptでハンドル名を指定して登録されているスクリプトを削除します。

functions.php

wp_deregister_script('jquery');
wp_deregister_script('wp-embed');

当サイトでは、WordPressでデフォルトで挿入されるjQueryとwp_embed.min.jsを全体で読み込むことを回避するため、一旦ここで削除しています。

wp_enqueue_script関数でJSを登録する

functions.php

function add_scripts() {	
  //スクリプトの読み込み
  wp_enqueue_style( $handle, $src, $deps, $ver, $in_footer);
  //アクションフック(wp_enqueue_scripts)への登録
add_action('wp_enqueue_scripts', 'add_scripts()');

$handle:スクリプトを区別するハンドル名を指定します(idとして出力されます)。この引数は必須となります。
$src:スクリプトのURLを指定します。
$deps:依存スクリプトのハンドル名を配列で指定します。この引数で読み込み順を制御できます。
$ver:任意のバージョンを指定します。バージョン情報はスクリプトのURLにパラメータとして追加され、ブラウザキャッシュ対策としても使用可能です。
$in_footer:スクリプトの読み込み位置を指定します。trueで閉じbodyタグ前、falseでheadの閉じタグ前に出力されます。初期値はfalseです。

当サイトでは、CSS同様にサイト全般に共通するJSと、各ページにのみ使用するJSと条件分岐して導入しています。コードの管理のしやすさとサイトの高速化のためです。$depsと$verは特に指定していません(読み込み順序は、上から読み込まれるのでコントロールでする必要性がないので)。

functions.php

wp_enqueue_script('main', get_bloginfo('template_directory').'/js/main.js','','', true); // ページ全体
wp_enqueue_script('micromodal', 'https://unpkg.com/micromodal/dist/micromodal.min.js','','', false); // ページ全体
wp_enqueue_script('spmenu', get_bloginfo('template_directory').'/js/spmenu.js','','', true); // ページ全体
	if (is_front_page()) { // トップページのみ
		wp_enqueue_script('simplebar', 'https://unpkg.com/simplebar@latest/dist/simplebar.min.js','','', true); 
		wp_enqueue_script('swiper-bundle', 'https://unpkg.com/swiper/swiper-bundle.min.js','','', true); 
		wp_enqueue_script('top', get_bloginfo('template_directory').'/js/top.js','','', true); 
		} elseif (is_page()) { // 固定ページのみ
		wp_enqueue_script('fontawesome', 'https://use.fontawesome.com/6e44a73eac.js','','', true);
		} elseif (is_singular('blog')) { // ブログのシングルページのみ
		wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js','', '', true); // jQuery再読み込み
		wp_enqueue_script('embed', 'https://livalest.com/wp-includes/js/wp-embed.min.js','','', false); // wp-embed.min.js再読み込み
		wp_enqueue_script('single-blog', get_bloginfo('template_directory').'/js/single-blog.js','','', true);
		}
	}
	add_action('wp_enqueue_scripts', 'add_scripts');
}

$in_footerの引数がtrueとfalseが混在している理由は、falseだと一部効かなかったり、CSSより早く読み込んでしまいエラーとなったからです。この辺りは、適宜順番を変えたり、出力先を変えることで対応できることもあります。JSでもCDNなどの外部ファイルも問題なく出力することができます。

script_loader_tag関数でasync・defer属性を付与する

当サイトでは、defer属性を付与しているため、その説明をしていきます。

functions.php

add_filter( 'script_loader_tag', 'defer_scripts', 10, 3 );
function defer_scripts( $tag, $handle, $src ) {
	$defer_scripts = array( 
		'main','micromodal','spmenu','jquery','single-blog' // 属性をつけたいバンドル名を配列に含める
	);
	if ( in_array( $handle, $defer_scripts ) ) {
		return '<script id="' . $handle . '" defer src="' . $src . '""></script">' . "\n";// 間にdefer属性をつけて出力するように記載
	}    
	return $tag;
}

HTMLに出力されたスクリプト例

<script id="micromodal" defer src="https://unpkg.com/micromodal/dist/micromodal.min.js?ver=5.9.2"></script>
<script id="main" defer src="https://livalest.com/wp-content/themes/livalest/js/main.js?ver=5.9.2"></script>
<script id="spmenu" defer src="https://livalest.com/wp-content/themes/livalest/js/spmenu.js?ver=5.9.2"></script>
<script id="jquery" defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js?ver=5.9.2"></script>
<script id="single-blog" defer src="https://livalest.com/wp-content/themes/livalest/js/single-blog.js?ver=5.9.2"></script>

これで「defer」をつけた形でJavaScriptを出力することできました。

まとめ

サイトが複雑化してくるとそれに伴い、CSSとJavaScriptも複雑化してくるものです。今回は事業サイトのリニューアルをきっかけに、トップページやブログページでCSSとJavaScriptの出力を分けたいと思ったことがきっかけでした。

テーマで直書きするよりも、functions.phpで管理することで、どのページでどのCSSとJavaScriptが使用されているかわかるので、管理・保守面で大きい効果があります。また、条件分岐で出力することで、サイトの高速化につながります。このブログ記事がほんの一助になれば幸いです!!

同じ技術メモカテゴリーのログ

tech

ホームページ制作ご対応エリア

LIVALESTは、個人のフリーランスとして活動しています。全国対応ではなく、大阪を中心とした関西圏の直接お会いできる距離を重要視しています。

直接、お話をお伺いすることで、広く深くクライアント様のビジネスを理解し、ホームページを通じて、要望を実現いたします。

  • 大阪府:
  • 池田
  • 泉大津
  • 泉佐野
  • 和泉
  • 茨木
  • 大阪狭山
  • 旭区
  • 阿倍野区
  • 生野区
  • 北区
  • 此花区
  • 城東区
  • 住之江区
  • 住吉区
  • 大正区
  • 中央区
  • 鶴見区
  • 天王寺区
  • 浪速区
  • 西区
  • 西成区
  • 西淀川区
  • 東住吉区
  • 東成区
  • 東淀川区
  • 平野区
  • 福島区
  • 港区
  • 都島区
  • 淀川区
  • 貝塚
  • 柏原
  • 交野
  • 門真
  • 河内長野
  • 岸和田
  • 四條畷
  • 吹田
  • 摂津
  • 泉南
  • 高石
  • 高槻
  • 大東
  • 豊中
  • 富田林
  • 寝屋川
  • 羽曳野
  • 阪南
  • 東大阪
  • 枚方
  • 藤井寺
  • 松原
  • 箕面
  • 守口
  • 八尾
  • 兵庫県:
  • 神戸
  • 姫路
  • 尼崎
  • 明石
  • 西宮
  • 洲本
  • 芦屋
  • 伊丹
  • 相生
  • 豊岡
  • 加古川
  • 赤穂
  • 西脇
  • 宝塚
  • 三木
  • 高砂
  • 川西
  • 小野
  • 三田
  • 加西
  • 丹波篠山
  • 養父
  • 丹波
  • 南あわじ
  • 朝来
  • 淡路
  • 宍粟
  • 加東
  • たつの
  • 京都府:
  • 京都
  • 福知山
  • 舞鶴
  • 綾部
  • 宇治
  • 宮津
  • 亀岡
  • 城陽
  • 向日
  • 長岡京
  • 八幡
  • 京田辺
  • 京丹後
  • 南丹
  • 木津川
  • 和歌山県:
  • 和歌山
  • 海南
  • 橋本
  • 有田
  • 御坊
  • 田辺
  • 新宮
  • 紀の川
  • 岩出
  • 奈良県:
  • 奈良
  • 大和高田
  • 大和郡山
  • 天理
  • 橿原
  • 桜井
  • 五條
  • 御所
  • 生駒
  • 香芝
  • 葛城
  • 宇陀
  • 滋賀県:
  • 大津
  • 彦根
  • 長浜
  • 近江八幡
  • 草津
  • 守山
  • 栗東
  • 甲賀
  • 野洲
  • 湖南
  • 高島
  • 東近江
  • 米原

ホームページ制作やWeb集客、
リニューアルやサイトの管理・運用・更新まで、
あなたのご相談・ご依頼をお待ちしております。

お電話でのお問い合わせ

050-5604-7128 平日12:00 ~ 18:00

24時間以内に必ず、ご連絡させていただきます。

ホームページ制作実績一覧