特定のページのみにも対応！WordPressで独自のスタイルシート、jQueryを呼び出す方法

テーマ内で使うスタイルシート、jQueryはそれぞれ header.php、footer.php などの
タグの中、の上などに記載すれば読み込ませることができます。
そのように直接書き込んでも動作はしますが、管理画面でも使用したいとなると話は別です。
また管理画面で使わなくても、条件分岐で特定のページにのみ適用、など始めると header.php、footer.php のコードが肥大化し、どんどん見づらくなってしまいます。

今回は独自のCSS、jQueryをWordPress内のどこでも呼び出せる方法をご紹介します。

WordPress全体で独自のjQueryを読み込む

javascrpitの場合は、wp_enqueue_script 関数を使うことで、エンキューしてスクリプトを読み込ませることができます。
アクションフックは wp_enqueue_scripts を使います。

WPの管理画面以外でjQueryを読み込む方法

以下の例では全体で呼び出すスクリプトを指定しています。

<?php
// JSファイルを読み込む
function add_enqueue_scripts() 
{
    // jQueryの読み込み
    wp_enqueue_script( 'custom', get_template_directory_uri().'/js/custom.js', "", "20210907", false );
}
add_action('wp_enqueue_scripts', 'add_scripts');
?>

これで管理画面を除くWP全体で custom.js が呼び出されるようになりました。

WPの管理画面でjQueryを読み込む方法

管理画面で読み込みたい場合、admin_enqueue_scripts というアクションフックが用意されています。
このアクションフックを使えば、管理画面にのみスクリプトが読み込まれるようになります。

<?php
// 管理画面でJSファイルを読み込むようにする
function add_admin_enqueue_scripts() 
{
    // jQueryの読み込み
    wp_enqueue_script( 'admin_custom', get_template_directory_uri().'/js/admin_custom.js', "", "20210907", false );
}
add_action('admin_enqueue_scripts', 'add_admin_enqueue_scripts');
?>

WPのデフォルトで使用されているもの以外のjQueryを読み込む

wp_deregister_script を使うことで、スクリプトを読み込む対象から除外することができます。

<?php
// 別のjQueryを読み込むようにする
function add_enqueue_scripts() 
{
    // WordPress提供のjquery.jsを読み込まない
    wp_deregister_script('jquery');

    // jQueryの読み込み
    wp_enqueue_script( 'jquery', '//code.jquery.com/jquery-3.6.0.min.js', "", "20210825", false );
}
add_action('wp_enqueue_scripts', 'add_scripts');
?>

WordPress全体で独自のCSSを読み込む

今度はスタイルシートを読み込んでみます。
スタイルシートの場合は、アクションフックはjQueryと同じ wp_enqueue_scripts を使いますが、
スタイルを渡す関数は wp_enqueue_style を使います。

WPの管理画面以外でCSSを読み込む方法

以下の例ではWordPress全体で呼び出すスタイルシートを指定しています。

<?php
// CSSファイルを読み込む
function add_enqueue_styles() 
{
    // サイト共通のCSSの読み込み
    wp_enqueue_style( 'custom_css', get_template_directory_uri().'/css/custom.css', "", '20210907' );
}
add_action('wp_enqueue_scripts', 'add_enqueue_styles');
?>

WPの管理画面でCSSを読み込む方法

jQueryと同様、アクションフックは admin_enqueue_scripts です。

<?php
// 管理画面でCSSファイルを読み込むようにする
function add_admin_enqueue_styles() 
{
    // 管理画面でのCSS読み込み
    wp_enqueue_style( 'admin_custom_css', get_template_directory_uri().'/css/admin_custom.css', "", "20210907", false );
}
add_action('admin_enqueue_scripts', 'add_admin_enqueue_styles');
?>

サイト制作から部分的なカスタマイズならサイトマネージ

WordPressでBootstrapを読み込む方法

上記のやり方を利用してbootstrapを読み込む場合はこうなります。

<?php 
// JS・CSSファイルを読み込む
function add_files() 
{
    // WordPress提供のjquery.jsを読み込まない
    wp_deregister_script('jquery');

    wp_enqueue_script( 'jquery', '//code.jquery.com/jquery-3.6.0.min.js', "", "20210825", false );
    wp_enqueue_script( 'bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', "", "20210825", false );
    wp_enqueue_style( 'bootstrap-custom', get_template_directory_uri(). '/css/bootstrap-custom.css', "", '20210825' );
}
add_action('wp_enqueue_scripts', 'add_files');
?>

特定のページでのみCSS、JSを読み込む方法

このように、テーマ上と同じように条件分岐を使えば、さまざまな条件で対応が可能です。

特定の固定ページでのみCSSを呼び出す

<?php 
// ログイン状態でのみJS・CSSファイルを読み込む
function add_user_files() 
{
	if ( is_page('ranking') === TRUE )
	{
		wp_enqueue_script( 'ranking_custom', get_template_directory_uri().'/js/ranking_custom.js', "", "20210907", false );
		wp_enqueue_style( 'ranking_custom_css', get_template_directory_uri().'/css/ranking_custom_css.css', "", "20210907", false );
	}
}
add_action('wp_enqueue_scripts', 'add_user_files');
?>

ログイン状態でのみスタイル、スクリプトを読み込む

<?php 
// ログイン状態でのみJS・CSSファイルを読み込む
function add_user_files() 
{
	if ( is_user_logged_in() === TRUE )
	{
		wp_enqueue_script( 'user_custom', get_template_directory_uri().'/js/user_custom.js', "", "20210907", false );
		wp_enqueue_style( 'user_custom_css', get_template_directory_uri().'/css/user_custom.css', "", "20210907", false );
	}
}
add_action('wp_enqueue_scripts', 'add_user_files');
?>