WordPress

  1. HOME
  2. WordPress
  3. 【WordPress】functions.phpでCSS・JavaScriptファイルを読み込む方法

【WordPress】functions.phpでCSS・JavaScriptファイルを読み込む方法

WordPress

【WordPress】functions.phpでCSS・JavaScriptファイルを読み込む方法

WordPressでCSS・JavaScriptのファイルを読み込むには、header.phpに記述するのではなく「functions.php」を使用します。
WordPressの公式マニュアル「WordPress Codex」には、「ヘッダーテンプレートにテーマのスタイルシートをリンクしないでください」と書いてあるので、WordPressが推奨するやり方でテーマを作成する必要があります。

記述する方法はとても簡単です。
CSSは「wp_enqueue_style」、JavaScriptは「wp_enqueue_script」という関数を使用します。
それでは具体的な記述方法について説明します。

「CSS」を読み込む場合

function add_files(){
  //swiper
  wp_enqueue_style('style_swiper','//cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css');

  //style
  wp_enqueue_style('style', get_template_directory_uri().'/assets/css/style.css');
}
add_action('wp_enqueue_scripts','add_files');

上記の例では「swiper」というプラグインのCSS（CDN）ファイルの読み込みと、テーマのディレクトリ階層にあるCSSファイルの読み込みをしています。

このようにfunctions.phpに記述することでCSSを読み込むことができます。
続いて記述内容の詳細について解説していきます。

CSSの記述方法について解説

CSSの読み込みは「wp_enqueue_style」という関数を使用します。

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

引数に関してはこちらを参照ください。

引数説明初期値
$handle任意の名前なし
$srcCSSファイルのパス空文字列
$depsこのファイルより前に読み込むファイルarray()
$ver任意のバージョンfalse
$mediaメディア属性‘all’

「$handle」に任意の名前を入れますが、複数のCSSファイルを読み込む時は、名前が被らないようにしてください。これは次に紹介するJavaScriptも同様です。
「$deps」は、このファイルよりも先に読み込みたいファイルを指定することができます。

もっと詳しく知りたい方はWordPress Codex関数リファレンスをご覧ください。
関数リファレンス/wp enqueue style

「JavaScript」を読み込む場合

function add_files(){
  //swiper
  wp_enqueue_script('script_swiper','//cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js',array(), '1.0.0', true);

  //script
  wp_enqueue_script('script', get_template_directory_uri().'/assets/js/script.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts','add_files');

上記の例では「swiper」というプラグインのJavaScript（CDN）ファイルの読み込みと、テーマのディレクトリ階層にあるJavaScriptファイルの読み込みをしています。

このようにfunctions.phpに記述することでJavaScriptを読み込むことができます。
続いて記述内容の詳細について解説していきます。

JavaScriptの記述方法について解説

JavaScriptの読み込みは「wp_enqueue_script」という関数を使用します。

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

引数に関してはこちらを参照ください。

引数説明初期値
$handle任意の名前なし
$srcJavaScriptファイルのパスfalse
$depsこのファイルより前に読み込むファイルarray()
$ver任意のバージョンfalse
$in_footer</body>終了タグの前に配置false

先に紹介したCSSの引数とほとんど同じですが「wp_enqueue_script」関数には「$in_footer」があります。「$in_footer」に何も設定しないと<head>タグ内に配置されますが、これを「true」にすることで</body>終了タグの前に配置することができます。

もっと詳しく知りたい方はWordPress Codex関数リファレンスをご覧ください。
関数リファレンス/wp enqueue script

任意の「jQuery」を読み込む場合

function add_files(){
  //jQuery
  if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery','//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js',array(), '1.0.0', true);
  }
}
add_action('wp_enqueue_scripts','add_files');

WordPressはデフォルトで「jQuery」が読み込まれていますが、任意のjQuery（CDN）を読み込みたい場合は上記のように記述します。

「if (!is_admin())」としているのは、管理画面以外で読み込む必要があるためです。
WordPressの管理画面はデフォルトの「jQuery」で動作するシステムがありますので、そこに影響がないように管理画面以外で読み込むようにしてます。

「wp_deregister_script(‘jquery’)」で、デフォルトの「jQuery」を取り除くことができます。

「Google Fonts」を読み込む場合

例えば「Google Fonts」で「Noto Sans Japanese」と「Montserrat」の2つのフォントを読み込む場合、次のような埋め込みリンクが生成されます。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Sans+JP&display=swap" rel="stylesheet">

上記コードの上から2つの<link>タグはCSSファイルを読み込んでいないので、header.php等のファイルで埋め込みます。functions.phpで読み込めるのは、3つ目の<link>タグになります。
次のように記述してください。

function add_files(){
  //Google Fonts
  wp_enqueue_style('style_fonts_noto','//fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
  wp_enqueue_style('style_fonts_montserrat','//fonts.googleapis.com/css2?family=Montserrat&display=swap');
  }
}
add_action('wp_enqueue_scripts','add_files');

Google Fontsで生成された埋め込みコードのhref属性は「//fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap」となっていますが「wp_enqueue_style」関数で2つのフォントを同時に読み込めないため、一つの関数につき一つのフォントを読み込む必要があります。

まとめ

functions.phpでCSSとJavaScriptを読み込む方法をご紹介しました。
header.phpやfooter.phpでファイルを読み込むのではなく、functions.phpという一つのファイルで読み込むことで、ファイルを一括管理しやすくなると思います。
よかったら参考にしてみてください。

あなたにおすすめの記事