もくじ

【Wordpress】function.phpに記述してCSS、jsファイルを読み込む。CDN経由、更新時キャッシュクリアの方法。

ハウツー
コロのicon
コロ

wp_enqueue_stylewp_enqueue_scriptを使いstylesheetとscriptをキューに登録し、 読み込みます。

css, js読み込み方法の関数

function add_style_scripts() {	
  //スタイルシートの読み込み
  wp_enqueue_style( $handle, $src, $deps, $ver, $media);
 
  //JavaScriptの読み込み
  wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}

//アクションフック登録
add_action('wp_enqueue_scripts', 'add_style_scripts');

スタイルシート(CSS)を読み込む

function add_style_scripts() {	
  //スタイルシートの読み込み
  wp_enqueue_style( $handle, $src, $deps, $ver, $media);
}

//アクションフック登録
add_action('wp_enqueue_scripts', 'add_style_scripts');

wp_enqueue_styleのパラメーター

$handle
(必須)スタイルシートを識別するためのユニークな名前を指定。link 要素の id 属性の値として使用される。
$src
(初期値 空)スタイルシートの URLを指定。
$deps
依存するスタイルシートのハンドル名を配列で指定。依存関係がない場合は空の配列「array()」を指定。
$ver
(初期値 false)ファイル名の末尾にクエリパラメータとして追加される。NULLでパラメータなし。
$media
(初期値 'all')スタイルシートのメディアを指定。

記述例

get_stylesheet_uri()でテーマ階層直下のstyle.cssが読み込まれる。
function load_scripts() {	
  //スタイルload_scriptsの読み込み
  wp_enqueue_style( 'style', get_stylesheet_uri(), array(), '1.0' );
}

//アクションフック登録
add_action('wp_enqueue_scripts', 'load_scripts');
表示されるHTML
<link rel="stylesheet" id="style-css" href="[your-domain]/wp-content/themes/[your-theme]/style.css?ver=1.0" media="all">

■ クエリパラメーターを変更する

?ver=のクエリを変更する方法。

更新日時のクエリパラメータ付与

更新ごとに値が変わるのでキャッシュ削除にもなる
wp_enqueue_style( 
	'style', 
	get_stylesheet_uri(),
	array(), 
	filemtime(get_theme_file_path( '/style.css' )  // ← ここ
);

■ デフォルト以外のCSSを読み込む

wp_enqueue_style(
	'custom-style',
	get_theme_file_uri('/css/custom.css'), // テーマ内のスタイルシートを指定
	array(),
	filemtime(get_theme_file_path('/css/custom.css' ) // 更新日時のクエリパラメータ付与(キャッシュ削除)
));
<link rel="stylesheet" id="custom-style-css" href="[your-domain]/wp-content/themes/[your-theme]/css/custom.css?ver=1623997611" media="all">

■ CDN経由でBootstrapを読み込む

この方法でFontawesomeやその他スタイルライブラリをwordpressで使用できるようになります。
wp_enqueue_style(
  'bootstrap',
  '//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css',
  array(),
  ''
);
表示されるHTML
<link rel="stylesheet" id="bootstrap-css" href="//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css?ver=5.7.2" media="all">

■ ページを指定してスタイルを読み込む

is_page(), is_singular()など 🔗条件分岐タグ が使用できます
if(is_page('about')) {
	wp_enqueue_style( 'about-style', get_theme_file_uri( '/assets/css/about.css' ), [], '1.0' );
}
表示されるHTML
固定ページ /aboutにアクセスしたときだけ読み込まれる
<link rel="stylesheet" id="about-style-css" href="[your-domain]/wp-content/themes/[your-theme]/assets/css/about.css?ver=1.0" media="all">

スクリプト(js)を読み込む

function load_scripts() {
  wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}

//アクションフック登録
add_action('wp_enqueue_scripts', 'load_scripts');

wp_enqueue_script のパラメータ

$handle
(必須)スクリプトを識別するためのユニークな名前を指定する。
$src
(初期値 空)スクリプトの URLを指定。
$deps
依存するスクリプトのハンドル名を配列で指定。依存関係がない場合は空の配列「array()」を指定。
$ver
(初期値 false)ファイル名の末尾にクエリパラメータとして追加される。NULLでパラメータなし。
$in_footer
(初期値 false)true で </body> 終了タグの前に配置。↔ falseで <head> 内に配置される。

記述例

function load_scripts() {
  wp_enqueue_script(
    'common-js',  // ユニークな識別名
    get_theme_file_uri('/assets/js/common.js'),  // 読み込むjs
    array(),   // jqueryなど依存関連のscriptがあれば記述する
    '1.0.0', // バージョン指定
    false  // <head>に表示
  );
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );
表示されるHTML
<script src="[your-domain]/wp-content/themes/[your-theme]/assets/js/common.js?ver=1.0.0" id="common-js-js"></script>

■ クエリパラメータを変更する

?ver= 末尾に付与されるクエリを変更する方法。

バージョンを直書きする

wp_enqueue_script(
	'common-js',  
	get_theme_file_uri('/assets/js/common.js'), 
	array(),   
	'1.0.0',  // ← ここ
	false 
);

wordpressのバージョンと揃える

// 省略
wp_get_theme()->get( 'Version' ), // ← ここ
// 省略

更新時にキャッシュクリアのクエリを付与する

// 省略
filemtime( get_theme_file_path( '/assets/js/common.js' ) ),    // ← ここ
// 省略

■ デフォルトjQueryは使用せず、CDN経由でjQueryを読み込む場合

デフォルトで読み込まれるjQueryを読み込まず、任意のjQueryをCDN経由で読み込む方法です。

記述例

function load_scripts() {

  wp_enqueue_script(
   'common-js',
    get_theme_file_uri( '/assets/js/common.js' ),
    ['cdn-jquery'],   // 依存関係になるスクリプトの名前を指定。※ jqueryが先に読み込まれる
    '1.0.0',
    false
  );


  //WordPress 本体の jQuery を登録解除
  wp_deregister_script( 'jquery');

  //jQuery を CDN から読み込む
  wp_enqueue_script(
    'cdn-jquery',
    '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js',
    array(),
    '3.3.1',
    false
  );
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );
表示されるHTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js?ver=3.3.1" id="jquery-js"></script>
<script src="[your-domain]/wp-content/themes/[your-theme]/assets/js/common.js?ver=1.0.0" id="common-js-js"></script>

一つにまとめてかける

あまり多いと一つのfunctionが肥大化しますが、一気にまとめてアクションフックを実行することもできます。
function load_scripts()
{
  // SCRIPT
  wp_enqueue_script(
    'common-js',
    get_theme_file_uri('/assets/js/common.js'),
    ['cdn-jquery'],
    '1.0.0',
    false
  );

  //WordPress本体の jQuery を登録解除
  wp_deregister_script('jquery');

  //jQuery を CDN から読み込む
  wp_enqueue_script(
    'cdn-jquery',
    '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js',
    array(),
    '3.3.1',
    false
  );

  // STYLE
  wp_enqueue_style(
    'style',
    get_stylesheet_uri(),
    [],
    filemtime(get_theme_file_path('/style.css')),
  );

  wp_enqueue_style(
    'custom-style',
    get_theme_file_uri('/assets/css/custom.css'),
    array(),
    filemtime(get_theme_file_path('/assets/css/custom.css'))
  );

  //ページを指定してスタイルを読み込む
  if (is_page('about')) {
    wp_enqueue_style('about-style', get_theme_file_uri('/assets/css/about.css'), [], '1.0');
  }
}
add_action('wp_enqueue_scripts', 'load_scripts');
以上、function.phpでcss, jsファイルを読み込む方法でした。
コロのicon
コロ
飼い猫と食べ物のことを考えてたら1日が終わってます。Reactでいろいろ作りたい