始める

Release |

functions.phpからCSSとJavaScriptを読み込む方法

WordPressでWebサイトを構築する際、CSSやJavaScriptをどこで読み込んでいますか？
HTMLで記述するのと同じ要領で<head>内に直接記述して、header.phpなどのテンプレートファイルから読み込んではいないでしょうか？

<head>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/style.js"></script>
</head>

実は、WordPressの公式ユーザードキュメントでは、<link>や<script>タグでの読み込みは非推奨とされているんです。

では、テンプレートファイルから読み込むことによって、どんなデメリットがあるのでしょうか？

テンプレートファイルから読み込むことのデメリットと推奨される方法

header.phpなどのテンプレートファイルから読み込みをしても問題なく表示されます。ただし、見た目上は問題がないように見えていても、裏側で問題が発生している可能性があります。

テンプレートファイルから読み込むことのデメリット

例えば、以下のようなデメリットがあります。

  • プラグインとの競合：
    プラグインの中には外部のJavaScriptライブラリを使用している場合があります。もしheader.phpで同じライブラリを読み込んでいた場合、ファイルが重複、競合を起こしてしまい、プラグインが正しく動作しないことがあります。
  • 保守性の低下：
    「一部のJavaScriptはfooter.phpで読み込みたい」「ヘッダーテンプレートが複数ある」などの場合、CSSやJavaScriptの読み込みを複数ファイルに記述して管理することになり、保守性が低下してしまいます。

推奨される方法はfunctions.phpでの読み込み

そこで、functions.phpに記述することによって、デメリットであるファイルの重複読み込みや競合を回避することができます。また、CSSやJavaScriptを一元管理できるため、保守性の向上につながります。

さらに、「特定のJavaScriptをfooter直下に出力したい」「特定のページだけに特定のCSSを読み込ませたい」なども対応可能です。

では実際に、functions.phpから読む込む方法を解説していきます！

functions.phpから読み込み（wp_enqueue_scripts）

以下のコードが、functions.phpからCSS, JavaScriptを読み込む記述例です。

// 外部ファイルの読み込み
function add_files() {

  // CSSの読み込み
  wp_enqueue_style( 'reset_style',　get_stylesheet_directory_uri().'/css/reset.css' );
  wp_enqueue_style( 'common_style', get_stylesheet_directory_uri().'/css/style.css', array('reset_style'));

  // JavaScriptの読み込み
  wp_enqueue_script( 'common_script', get_template_directory_uri().'/js/script.js', array('jquery'), false, true );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

WordPressの提供する「wp_enqueue_script()」や「wp_enqueue_style()」関数を使用し、「add_action(‘wp_enqueue_scripts’, ‘関数名’);」というアクションフックを使用します。

WordPressには、ファイルを読み込むタイミングとマークアップを生成する関数を決定するための特定のフックが用意されているので、これを使うことにより、WordPress、アクティブなプラグイン、テーマがすべてうまく連携して動作するようになります。

さらに詳しく見ていきましょう！

CSSの読み込み（wp_enqueue_style）

「wp_enqueue_style」は、WordPressで使用するCSSをキューに追加する関数です。この関数を使うことで、どのファイルを読み込むのかの指定や、テーマやプラグインが正しい順序でスタイルシートを読み込みこんでくれたります。

以下のような引数が用意されています。

wp_enqueue_style( 
  string $handle, 
  string $src           = '', 
  string[] $deps        = array(), 
  string|bool|null $ver = false, 
  string $media         = 'all'
);
引数概要初期値
$handleハンドル名（任意の名前）。他のファイルと重複しないよう設定する。
※必須		なし
$srcCSSのファイルURL。
※必須		ブランク
$deps依存関係のある他のCSS。このファイルより前に読み込む必要があるファイルのハンドル名を設定する。配列で記述するため複数設定可能。array()
$verCSSファイルのバージョン番号。CSSファイルの末尾にクエリ文字列のバージョン（例：?ver=1.0.0）が付与される。false
$mediamedia属性。all, screen, print などが指定可能。all

以下のように記述すると、ファイルを更新するたびにバージョン番号を更新してくれます。

wp_enqueue_style(
  'style',
  get_template_directory_uri().'/css/style.css',
  '',
  date('YmdGi', filemtime( get_template_directory().'/css/style.css' )),
  ''
);

JavaScriptの読み込み（wp_enqueue_script）

「wp_enqueue_script」は、WordPressで使用するJavaScriptをキューに追加する関数です。以下のような引数が用意されています。

wp_enqueue_script( 
  string $handle, 
  string $src           = '', 
  string[] $deps        = array(), 
  string|bool|null $ver = false, 
  array|bool $in_footer = false
);
引数概要初期値
$handleハンドル名（任意の名前）。他のファイルと重複しないよう設定する。
※必須		なし
$srcJSのファイルURL。
※必須		ブランク
$deps依存関係のある他のCSS。このファイルより前に読み込む必要があるファイルのハンドル名を設定する。配列で記述するため複数設定可能。array()
$verJSファイルのバージョン番号。JSファイルの末尾に付与される。false
$in_footer読み込み位置の設定。<head>に配置する場合はfalse、</body>直前に配置する場合はtrueを指定する。false

JSを実行するタイミングは、基本的にはHTMLの読み込みが完了してからの方が望ましいので、$in_footerの値をtrueにして</body>直前で読み込むようにしましょう。

特定のページでのみ読み込み

特定のページにだけ読み込ませたい場合は、「if文」を記述することで解決できます。

以下がその例です。

function add_files() {

  // トップページのみ読み込み
  if( is_front_page() ){
    wp_enqueue_style( 'index_style', get_template_directory_uri().'/css/style.css' );
  }

  // コンタクトページのみ読み込み
  if ( is_page('contact') ) {
	wp_enqueue_script( 'contact_js', get_stylesheet_directory_uri().'/js/contact.js' );
  }

}
add_action( 'wp_enqueue_scripts', 'add_files' );

GoogleFontsの読み込み

GoogleFontsを読み込みたい場合、以下のように記述します。以下は、Noto Sans JP というフォントを読み込む場合のコード例です。

wp_enqueue_style(
  'google-fonts_style',  // ハンドル名
  'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap',  // URL
  array('reset_style')  // 依存関係
);

また、２種類以上のGoogle Fontsを使用したい場合は、$ver（バージョンパラメーター）に「null」を渡す必要があります。
以下は、Noto Sans JP と Noto Serif JP の2種類のフォントを指定しています。

wp_enqueue_style(
  'google-fonts_style',  // ハンドル名
  'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap',  // URL
  array('reset_style'),  // 依存関係
  null // 2種類以上読み込む時はバージョンがないと読み込まれない
);

さいごに

以上、functions.phpからCSS, JavaScriptを読み込む方法の紹介でした。

今回ご紹介したのは、WordPressを安全に使用するために必要な知識ですので、しっかりと身につけていきましょう！

こちらの記事もいかかですか？

記事の一覧はこちら！

すべての記事一覧へ

  1. HOME
  2. functions.phpからCSSとJavaScriptを読み込む方法