【WordPress実践編】CSSとJavaScriptを読み込むための2つの方法について解説！

2025年9月7日2025年9月8日

※このブログはアフィリエイト広告を利用しています

こんにちは！キャメルコードブログのしゅんです。

今回の記事では、WordPress構築におけるCSSとJavaScriptファイルの読み込み方法について解説をしていきます！

具体的には

<head>タグで直接読み込む方法
functions.phpで読み込む方法

この2つの方法について解説をしていきます。

今回からWordPressの独自関数なども出てきます！

難しいと感じる部分もあるかもしれませんが、丁寧に説明していきますのでご安心ください^^

この記事でわかること

テンプレートファイルでCSSとJSファイルを読み込む方法が分かる
functions.phpによる読み込み方法が分かる

headタグでCSSとJavaScriptを読み込む方法

まずはファイルを確認してみましょう。フォルダ構成は以下のように作りました。

静的ファイルでは、CSSとJSは<head>タグ内で以下のように読み込んでいましたよね。

--index.html--

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

これを以下のように書き換えます。

--front-page.php--

<head>
 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">
 <script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>
</head>

<?php echo get_template_directory_uri(); ?>

この関数はテーマフォルダまでのパスを出力します。

上記の記述では、テーマ直下の「CSSフォルダの中のstyle.css」と「JSフォルダの中のmain.js」が読み込まれます。

これで完了です！

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

このまま<head>タグで読み込んでもいいのですが、CSSやJSはfunctions.phpで読み込むことが推奨されているので今回はその方法も解説します。

functions.phpに以下のように記述をしましょう。

--functions.php--

<?php   
function my_theme_script(){
  wp_enqueue_style('my', get_template_directory_uri().'/css/style.css', [], filemtime(get_theme_file_path('css/style.css')), 'all');
  wp_enqueue_script('my', get_template_directory_uri().'/js/main.js', ['jquery'], filemtime(get_theme_file_path('js/main.js')), true);
}
add_action('wp_enqueue_scripts', 'my_theme_script');
?>

なんか難しそう…

分かるように丁寧に解説していきますのでご安心ください^^

上記のコードでやっていることをまとめるとこんな感じです。

my_theme_script()という関数を作る（名前は任意）
wp_enqueue_style()とwp_enqueue_script()を使ってCSSとJSを読み込む
add_action(‘wp_enqueue_scripts’, ‘my_theme_script’)で「CSSやJSファイルを読み込むタイミング」でこの関数を実行するように指示

それでは一番上から順番に見ていきましょう！

まずは関数を定義します↓↓↓

--functions.php--

<?php   
function my_theme_script(){
  wp_enqueue_style('my', get_template_directory_uri().'/css/style.css', [], filemtime(get_theme_file_path('css/style.css')), 'all');
  wp_enqueue_script('my', get_template_directory_uri().'/js/main.js', ['jquery'], filemtime(get_theme_file_path('js/main.js')), true);
}
add_action('wp_enqueue_scripts', 'my_theme_script');
?>

難しそうに見えますが「my_theme_scriptという名前で関数を作るよ！」と宣言しているだけです。関数名は任意の名前でOKです！

関数の中身を詳しく見ていきましょう↓↓↓

--functions.php--

<?php   
function my_theme_script(){
  wp_enqueue_style('my', get_template_directory_uri().'/css/style.css', [], filemtime(get_theme_file_path('css/style.css')), 'all');
  wp_enqueue_script('my', get_template_directory_uri().'/js/main.js', ['jquery'], filemtime(get_theme_file_path('js/main.js')), true);
}
add_action('wp_enqueue_scripts', 'my_theme_script');
?>

--CSSを読み込むための記述--

wp_enqueue_style(
  'my', // ハンドル名（このCSSを識別するための任意の名前）
  get_template_directory_uri().'/css/style.css', // CSSファイルのパス
  [], // 依存関係（swiperなど他のCSSが必要ならここに書く。ここに書いたものが先に読み込まれる）
  filemtime(get_theme_file_path('css/style.css')), // バージョン（キャッシュ防止のために最終更新日時を自動で付与）
  'all' // メディアタイプ（画面/印刷/すべて 等）
);

-- JSを読み込むための記述 --

wp_enqueue_script(
  'my', // ハンドル名（このJSを識別するための任意の名前）
  get_template_directory_uri().'/js/main.js', // JSファイルのパス
  ['jquery'], // 依存関係（jQueryを先に読み込む）
  filemtime(get_theme_file_path('js/main.js')), // バージョン（キャッシュ防止のために最終更新日時を自動で付与）
  true // trueだと</body>直前で読み込む（falseだと<head>内）
);

wp_enqueue_styleとwp_enqueue_scriptでそれぞれCSSとJSを読み込んでいます。

filemtime(get_theme_file_path(‘ ‘))はキャッシュを防止するためのコードです。ファイルを更新するたびに変更が反映されるようになります。

最後にadd_action()について見ていきます。

--functions.php--

<?php   
function my_theme_script(){
  wp_enqueue_style('my', get_template_directory_uri().'/css/style.css', [], filemtime(get_theme_file_path('css/style.css')), 'all');
  wp_enqueue_script('my', get_template_directory_uri().'/js/main.js', ['jquery'], filemtime(get_theme_file_path('js/main.js')), true);
}
add_action('wp_enqueue_scripts', 'my_theme_script');
?>

これは「wp_enqueue_scriptsが読み込まれるタイミングでmy_theme_scriptを実行するよ！」という意味になります。

wp_enqueue_scriptsはフックと呼ばれるもので、CSSやJSを読み込む際に実行されます。

最初はよくわからないと思いますが、まずは「CSSやJSを読み込むときには wp_enqueue_scripts を使うんだ。」くらいに覚えておけばいいでしょう^^

functions.phpから読み込む場合には、headタグの以下の記述は必要ないので削除しておきましょう！

--front-page.php--

<head>
 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">
 <script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>
</head>