エンジニアブログ

WordPressでスタイルシートやJavaScriptを効果的に管理するためには、wp_enqueue_styleとwp_enqueue_script関数の適切な使用が重要です。この記事では、これらの関数の詳細な使い方を解説します。

wp_enqueue_style、wp_enqueue_scriptとは？

wp_enqueue_styleは、WordPressでスタイルシート（CSSファイル）を効果的に管理し、テーマやプラグインからスクリプトを読み込むための関数です。この関数を使用することで、スタイルの読み込み順序や依存関係を適切に管理でき、WordPressサイトのパフォーマンスを向上させることができます。

なぜ推奨されているのか？

WordPressではwp_enqueue_styleやwp_enqueue_scriptなどの関数を使用してスタイルシートやスクリプトを読み込むことが推奨されています。これにはいくつかの理由があります。

バージョン管理

wp_enqueue_styleやwp_enqueue_scriptを使用すると、スタイルシートやスクリプトにバージョン番号を付与できます。これにより、ファイルが更新された際にキャッシュを回避し、最新のファイルがブラウザに読み込まれるようになります。キャッシュの問題を回避するため、ブラウザが新しいファイルをダウンロードしやすくなります。

依存関係の管理

wp_enqueue_styleやwp_enqueue_scriptでは、他のスクリプトやスタイルに依存している場合に、それらの依存関係を指定できます。順序を正確に管理することができ、不要な依存関係を排除することができます。

条件付き読み込み

wp_enqueue_styleやwp_enqueue_scriptを使用すると、特定の条件が満たされた場合のみスクリプトやスタイルを読み込むことができます。例えば、特定のページや投稿の場合のみ読み込むなどの条件を指定できます。

これらの理由から、wp_enqueue_styleやwp_enqueue_scriptを使用してファイルを読み込むことがWordPressの開発標準となっています。これにより、コードの整理やメンテナンス性の向上、セキュリティの向上が実現されます。

使い方

以下は、wp_enqueue_style関数の基本的な使用例です。具体的な方法はこの後、ご説明します。
functions.phpに記載します。

define("DIRE", get_template_directory_uri()); //テーマディレクトリまでのURLを定数DIREに格納

function my_enqueue_scripts(){ //wp_enqueue_styleを実行する為の関数
    wp_enqueue_style('my_style', DIRE.'/css/style.css', array(), filemtime(get_theme_file_path('/css/style.css')), 'all');
    wp_enqueue_script('my_script', DIRE.'/js/script.css', array('jquery'), filemtime(get_theme_file_path('/js/style.css')), true);
}

add_action('wp_enqueue_scripts', 'my_enqueue_scripts'); //wp_enqueue_scriptsというイベント時に第二引数の関数を実行

ここでは、wp_enqueue_styleの他にアクションフックと呼ばれるカスタムな処理を実行しています。
アクションフックとは、WordPressが特定の出来事（イベント）が発生したときに、カスタムな処理（コード）を実行できるようにするものです。

例えば、ウェブサイトのページが読み込まれた瞬間や新しい投稿が保存されたときなど、さまざまなイベントがあります。これらのイベントに「フック」（hook）と呼ばれるポイントを設け、そのフックに対して特定の処理を関連付けることができます。

今回は、ウェブサイトが読み込まれるときに特定の処理を実行したいので、wp_enqueue_scriptsというアクションフックを使用できます。このフックにカスタムな関数を関連付けることで、その関数がウェブサイトの読み込み時に実行されます。

wp_enqueue_style()

wp_enqueue_style($handle, $src, $deps, $ver, $media);

引数
説明
初期値
$handle
スタイルの一意の名前。他のスタイルと区別するために使用されます。
なし
$src
スタイルシートのファイルパスまたはURL。
''"
$deps
依存関係。指定されたスタイルが読み込まれる前に先に読み込まれるべきスタイルの配列。
array()
$ver
スタイルのバージョン。通常はテーマやプラグインのバージョンを使用。
false
$media
スタイルが適用されるメディアタイプ。'all'、'screen'、'print'などが一般的。
'all'

wp_enqueue_script()

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

最後に

wp_head()、wp_footer()を記述していないと実行されないため、ご注意ください。
ありがとうございました。