はじめに

はじめまして！
私は文系大学生でありなが、Web・Webアプリケーション作成やPythonを軸としたシステム開発・競プロが趣味で余暇時間はほとんどこれらに費やしています。
しかしながら、広く浅くで全てを触っているため詳しいことは他の方を参考にしていただければと思います！

やりたいこと

WordPressで自作テーマを作成している際、外部ファイルとして.jsファイルを読み込むために以前は直接front-page.phpなどに以下のように記述していました。

<script  type="text/javascript" src="<?php echo get_theme_file_uri('/js/main.js'); ?>"></script>

しかし、jQueryを使用する際はfunctions.phpにスクリプトを読み込むための関数である

wp_enqueue_script()

を使用して適切に読み込む必要があることを知り、これを使った方法でJavaScriptファイルを読み込むことにしました。

補足

wp_enqueue_script()の使い方について触れておきます。
各パラメーターは以下の通りです。

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

$handle（必須）

読み込むスクリプトのハンドル名を指定します。このハンドル名は重複読み込みを防ぐために使用するため、任意の一意なものにする必要があります。

$src（必須）

読み込むスクリプトのパスを指定します。

最低でもこの２つは必要となります。

使用例

wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js' );

$deps

先に読み込んで欲しいスクリプトがあれば、そのスクリプトのハンドル名を指定すると、指定先のスクリプトが読み込まれてからこのスクリプトが読み込まれるためスクリプト間の依存関係を示すことができます。

使用例

wp_enqueue_script( 'sub-js', get_template_directory_uri() . '/js/sub.js', array( 'main-js' ) );
wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js');
// この場合sub-jsの$depsにmain-jsが指定されているため、main-jsが読み込まれてからsub-jsが読み込まれます。

$ver

ここに指定したバージョンが出力されるjsファイルの末尾にクエリパラメータとして追加されます。
falseを指定するとWordPressのバージョンが指定されます。

使用例

wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', '1.7');

出力

<script  type="text/javascript" src="テーマまでのパス/js/main.js?ver=1.7"></script>

$arg

スクリプトをヘッダーで読み込むかフッターで読み込むかを指定できます。
trueにするとwp_footer()で出力、falseにするとwp_head()で出力されます。

参考Webサイト
wp_enqueue_script() – スクリプトを読み込む関数(参照日：2025/10/24)

ぶつかった壁

なぜかwp_enqueue_scriptで指定したスクリプトが読み込まれないという現象が起こりました。

functions.php

wp_enqueue_script(
    'main-js',
    get_template_directory_uri() . '/js/main.js',
    array(),
    null,
    true
);

確認したこと

その１. wp_footer()を記述しているか

パラメータでフッターに出力することとしているため、そもそもfront-page.phpでフッターを読み込んでそのフッターにwp_footer()がなければもちろん出力されません。

front-page.php

<?php get_header();?>
<!--
コンテンツ
-->
<?php get_footer();?>

footer.php

<?php wp_footer();?>
</body>
</html>

その２. ハンドル名が重複していないか

functions.php

wp_enqueue_script(
    'main-js', // この部分のハンドル名が他の場所やプラグインなどで重複していると読み込まれない可能性があるそう。
    get_template_directory_uri() . '/js/main.js',
    array(),
    null,
    true
);

その３. 指定したパスが合っているか

//　親テーマを使用している場合
get_template_directory_uri() . '/js/main.js'
// jsファイルが子テーマにある場合
get_stylesheet_directory_uri() . '/js/main.js'

私はパスが本当に合っているのか確認するためfront-page.phpでパスを出力しました。

front-page.php

<?php echo get_template_directory_uri() . '/js/main.js'; ?>

出力結果に指定したいパスが出力さていれば正しく出力できていると言えます。

その４. フックは適切か

functions.php

function main_enqueue_js() {
    wp_enqueue_script(
        'main-js',
        get_template_directory_uri() . '/js/main.js',
        array(),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'main_enqueue_js'); // add_actionで適切にフックが登録されているか確認

その５. functions.phpは読み込まれているか

functions.phpの一番上に以下を記述してトップページに「functions.php ok.」と出力されるかを確認します。出力されたら適切にfunctions.phpが読み込まれています。

functions.php

<?php echo 'functions.php ok.'; ?>

原因と解決

結論としてはwp_head()をheader.phpに記述すると解決できました。

header.php

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <?php wp_head(); ?> ←この部分！
  </head>

一見footerに出力するパラメータを設定しているため、headの部分は関係ないと思っていたのですが、どうやらWordPrsesのスクリプト読み込みの仕組みが関係しているそうです。

wp_enqueue_script(）のスクリプトはWordPress内の出力キューに登録され、その後テンプレートでwp_head()とwp_footer()が読み出された際htmlに出力されます。
そのためwp_head()が無いと出力キューからスクリプトを出力する機会がなくなるためうまく機能しないそう。
そのため、基本的にwp_head()とwp_footer()はセットで記述することが望ましいです。

あとがき

最後まで読んでいただきありがとうございます！
まさかwp_head()一行で解決するとは思わず、大きく遠回りをした結果半日は使ってしまいました。
半日をたったの1行で解決されるとこちらのメンタルは辛いものですが、決してこの半日は無駄になったとは思っていません。
私がプログラミングを好きな理由として、今回のような壁に当たって解決するのも楽しいのですが、遠回りをして他の付随する箇所を触ることも楽しみの1つなのです。
これからも積極的に更新できたらなと思っております。