WordPressでCSSとJavaScriptを正しく追加する方法【初心者向け完全ガイド】

WordPressでオリジナルテーマを作成するときや、カスタマイズをする際などに皆さんはどのようにCSSやJavaScriptを読み込んでいますか？

実は間違った方法で追加してしまうと、サイトの表示速度が遅くなったり、テーマやプラグインと競合して不具合が起こることもあります。

最初はかなりつまづくポイントなので、初心者でも正しくCSSとJavaScriptを追加できるよう、基本の考え方から最適な方法までを詳しく解説します！

WordPressでCSS・JavaScriptを追加する基本の考え方
1. 直接テーマファイルに書く方法（初心者向け）
正しい追加方法「wp_enqueue_style」「wp_enqueue_script」で読み込む方法
「wp_enqueue_style」「wp_enqueue_script」の関数解説
外部CSS（Google Fontsなど）を追加する
子テーマのCSSを読み込む方法
BootstrapなどをCDN経由で追加する
ページやカテゴリーごとに読み込むCSSを変える方法
まとめ

WordPressでCSS・JavaScriptを追加する基本の考え方

WordPressでCSSやJavaScriptを追加するには、いくつかの方法があります。

直接テーマファイルに書く方法（初心者向け）

最も簡単な方法は、CSSやJavaScriptのコードをテーマファイルに直接書き込むことです。

CSSを追加する場合

style.css ファイルに直接CSSを追加することで、すぐに反映されます。

body {
    background-color: #f5f5f5;
}

また、header.php 内の <style> タグ内に記述することも可能です。

JavaScriptを追加する場合

header.php や footer.php 内に <script> タグを記述すると、JavaScriptを簡単に追加できます。

<script>
    alert('Hello, WordPress!');
</script>

header.php内の<head>内にCSSやJavaScriptのファイルを読み込む方法ですが、静的なHTMLでは一般的な方法ですが、WordPressではこれをこの方法を推奨していません。

理由としては以下の点が挙げられます。

テーマを更新すると、追加したコードが消えてしまう。
他のプラグインやテーマと競合する可能性がある。
保守性が低く、コード管理が難しくなる。

そこで、WordPressでは公式に推奨される「wp_enqueue_style と wp_enqueue_script」を使って読み込むようにしましょう。

正しい追加方法「wp_enqueue_style」「wp_enqueue_script」で読み込む方法

WordPressでCSSやJavaScriptを追加する正しい方法は、functions.php を使って wp_enqueue_style や wp_enqueue_script を利用することです。

メンテナンス性の向上やJavaScriptの読み込み位置の変更などCSSやJavaScriptを一元管理することが可能になります。

以下はfunction.phpで読み込む場合の記述例です。

function add_ccs_js()
{
  // CSSの読み込み
  wp_enqueue_style('style', get_stylesheet_directory_uri() . '/css/style.css');
  wp_enqueue_style('reset', get_stylesheet_directory_uri() . '/css/reset.css');
  
  // JavaScriptの読み込み
  wp_enqueue_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'add_ccs_js');

「wp_enqueue_style( )」と「wp_enqueue_script( )」は「add_ccs_js（名前は任意）」という関数にまとめます。

add_ccs_jsは任意の名前で大丈夫です。

そして10行目の「add_action( ’wp_enqueue_scripts’, ‘関数名’ ); 」というアクションフックに関数名を記述して読み込みます。

「wp_enqueue_style」「wp_enqueue_script」の関数解説

wp_enqueue_style（CSSの読み込み）

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

引数	説明	初期値
$handle	・ハンドル名（任意の名前）・他のCSSファイルの名前と重複しないように設定します	なし
$src	・CSSファイルの参照パス	空文字列
$deps（省略可能）	・依存関係のあるファイル・このファイルより事前に読む込む必要があるファイルをハンドル名（$handle）で設定します・配列で記述するので複数設定することが可能です	array( )
$ver（省略可能）	・バージョン番号・CSSファイルの末尾に付きます	false
$media（省略可能）	・メディア属性	all

wp_enqueue_script（JavaScriptの読み込み）

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

引数	説明	初期値
$handle	・ハンドル名（任意の名前）・他のJSファイルの名前と重複しないように設定します	なし
$src	・JSファイルの参照パス	false
$deps（省略可能）	・依存関係のあるファイル・このファイルより事前に読む込む必要があるファイルをハンドル名（$handle）で設定します・配列で記述するので複数設定することが可能です	array( )
$ver（省略可能）	・バージョン番号・JSファイルの末尾に付きます	false
$in_footer（省略可能）	・読み込み位置の設定・<head>に配置する場合はfalse、</body>直前に配置する場合はtrueを指定します	true

jQueryの読み込み順を調整する（footer に追加）

デフォルトでは、WordPressのjQueryは <head> 内に読み込まれることが多いですが、footer に読み込むことでページの表示速度を向上させることができます。

function add_ccs_js()
{ 
  // JavaScriptの読み込み
  wp_enqueue_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'add_ccs_js');

$in_footer に true を指定することで、jQueryが footer に読み込まれるようになります。

読み込むファイルの順番を指定する方法

読み込むファイルの順番を指定したい時は$handleで任意の名前をつけて、$depsで指定のファイルよりも先に読み込めるようにします。

以下のように記述することで、style.cssをreset.cssよりも先に読み込むことができます。

function add_ccs_js()
{
  // CSSの読み込み
  wp_enqueue_style('style', get_stylesheet_directory_uri() . '/css/style.css');
  wp_enqueue_style('reset', get_stylesheet_directory_uri() . '/css/reset.css', array('style'));
}
add_action('wp_enqueue_scripts', 'add_ccs_js');

複数のJavaScriptのファイルを読み込む際も同様です。

JavaScriptの場合、jqueryなどを利用する時はCDNやファイルを先に読み込む必要があるので、arrayには以下のようにjqueryと記述しておきましょう。

function add_ccs_js()
{ 
  // JavaScriptの読み込み
  wp_enqueue_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'add_ccs_js');

不要なCSS・JavaScriptを削除する

WordPressがデフォルトで読み込む不要なCSSやJavaScriptを削除するには、wp_dequeue_style や wp_dequeue_script を使います。

function add_ccs_js() {
    wp_dequeue_style('wp-block-library'); // ブロックエディターのCSSを削除
    wp_dequeue_script('jquery'); // jQueryを削除（必要ない場合）
}
add_action('wp_enqueue_scripts', 'add_ccs_js', 100);

外部CSS（Google Fontsなど）を追加する

外部のスタイルシート（Google Fontsなど）を利用したい場合は、以下のように wp_enqueue_style を使って追加します。

function add_ccs_js() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null);
}
add_action('wp_enqueue_scripts', 'add_ccs_js');

子テーマのCSSを読み込む方法

子テーマを使うことで、親テーマの変更を避けながらカスタマイズが可能になります。

子テーマの style.css を適切に読み込むために、functions.php に以下のコードを追加しましょう。

function add_ccs_js() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'add_ccs_js');

BootstrapなどをCDN経由で追加する

外部のJavaScriptライブラリ（例: Bootstrap）をCDN経由で追加する場合、以下のように記述します。

function add_ccs_js() {
    wp_enqueue_script('bootstrap-cdn', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'add_ccs_js');