【WordPress】get_template_directory_uri()とget_stylesheet_directory_uri()の違い

2025年4月10日

閲覧ありがとうございます。

ページテーマ

WordPressでURLを呼び出しているのに動かないを解消

ｊｓを使用したくてfunction.phpにコードを書いたのに動かない…

そんな問題解決につながれば嬉しいです。

\ このサイトで利用しています /

おすすめテーマ

おすすめサーバー

ｊｓが動かない問題と解消の経緯

私はテーマを「SWELL」と「Lightning」の二つを使っていますが、最近ｃｓｓアニメーションの実行タイミングなどｊｓを使いたい場面があります。

「SWELL」ではそのままｊｓコードを記述・反映できるのですが「Lihgtning」ではできないのでｊｓファイルを用意してfunction.phpで呼び出すコードを記述して実行しようとしました。

ところがファイルはあるはずなのに４０４エラー（URLが見つからない）。試行錯誤の結果、今回の解決策につながりました。

同じトラブルに会うこともあるかと思いますので備忘録として残しておきます。

結論（動作するｐｈｐコードはこちら）

今回の記事の内容の対象となっているサイトのテーマは「Lightning」で子テーマを使っています。

WordPressにはディレクトリのURLを取得する関数があります。

その関数を使って初めに作ったｊｓファイル読み込みコードがこちら↓

/*jsファイル読み込み*/
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script( 
        'my-custom_script', 
        get_template_directory_uri() . '/js/custom.js', //ディレクトリ内のjsフォルダにあるjsファイルを指定
        array('jquery'), // 依存関係を指定
        null, // バージョン番号を指定（nullの場合はバージョン管理しない）
        true // フッターで読み込む
    );
} );
/*ここまで*/

これでは動作しませんでした。そして修正後がこちら↓

/*jsファイル読み込み*/
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script( 
        'my-custom_script', 
        get_stylesheet_directory_uri() . '/js/custom.js', //ディレクトリ内のjsフォルダにあるjsファイルを指定
        array('jquery'), // 依存関係を指定
        null, // バージョン番号を指定（nullの場合はバージョン管理しない）
        true // フッターで読み込む
    );
} );
/*ここまで*/

５行目の“get_template_directory_uri()”を“get_stylesheet_directory_uri()”に変更して解決しました。