このサイトが大規模になりつつあったので、CSSやJSの管理に困っていたところ、functions.phpで管理する方法を知りました。リニューアルにあたり、この機に複雑なタグ周りの整理を行いました。
CSSやJSを各固定ページや投稿ページで切り分けることによって、サイトコードの管理・保守面で効果的で、サイトの高速化に寄与するのでぜひ試してみてください。
この記事の目次
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');
$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の管理
続いて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_script( $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が使用されているかわかるので、管理・保守面で大きい効果があります。また、条件分岐で出力することで、サイトの高速化につながります。このブログ記事がほんの一助になれば幸いです！！
