1. ホーム
  2. WordPress

【WordPress】get_template_directory_uri と get_stylesheet_directory_uri の違いと使い方

2026.06.16

Share

テーマ内から CSS や JavaScript、画像を読み込もうとしたとき、URL をどう組み立てればいいか迷ったことはないでしょうか。WordPress では get_template_directory_uri() と get_stylesheet_directory_uri() という、よく似た名前の2つの関数が用意されています。違いは「親テーマを指すか、有効なテーマ（子テーマがあれば子テーマ）を指すか」だけですが、この差を知らないと子テーマ運用でファイルが読み込めない、といったトラブルにつながります。この記事では、2つの関数の違いと使い分け、さらに URL ではなくサーバー上のパスを返す関連関数まで、テーマ開発でそのまま使えるコード付きで解説します。テーマを自作している初心者〜中級者の方が対象です。

2つの関数が返すもの

どちらの関数も「テーマフォルダの URL」を返しますが、基準となるテーマが違います。get_template_directory_uri() は常に親テーマのフォルダ URL を返します。一方 get_stylesheet_directory_uri() は現在有効なテーマのフォルダ URL を返し、子テーマを有効化していればその子テーマを指します。

関数返す URL
get_template_directory_uri()親テーマ（template）のフォルダ URL
get_stylesheet_directory_uri()有効なテーマ（stylesheet）のフォルダ URL。子テーマがあれば子テーマ

WordPress の用語では、親テーマを「template」、有効なテーマ（外側のテーマ）を「stylesheet」と呼びます。関数名の template / stylesheet は、この呼び方に対応していると覚えると区別しやすくなります。子テーマを使っていない場合は、親テーマ＝有効なテーマなので両者は同じ URL を返します。違いが現れるのは子テーマを有効化したときだけです。

子テーマを使うとどう変わるか

たとえば親テーマ mytheme の中に子テーマ mytheme-child を作り、子テーマを有効化している状況を考えます。このとき、それぞれの関数が返す URL は次のようになります。

関数返り値の例
get_template_directory_uri()https://example.com/wp-content/themes/mytheme
get_stylesheet_directory_uri()https://example.com/wp-content/themes/mytheme-child

ここがポイントです。親テーマに入れてあるファイル（共通の画像やライブラリなど）を読み込みたいなら get_template_directory_uri()、子テーマ側に置いたファイルを読み込みたいなら get_stylesheet_directory_uri() を使います。どちらの関数も末尾にスラッシュは付きません。パスを連結するときは get_stylesheet_directory_uri() . '/css/style.css' のように、自分で / を補う必要があります。

CSS・JavaScript を読み込む

もっとも多い使いどころが、wp_enqueue_style() / wp_enqueue_script() でアセットを登録する場面です。子テーマで運用するテーマなら、子テーマ側のファイルを読みたいので get_stylesheet_directory_uri() を基準にします。

functions.php
function mytheme_enqueue_assets() {
    // 有効なテーマ（子テーマがあれば子テーマ）の CSS を読み込む
    wp_enqueue_style(
        'mytheme-style',
        get_stylesheet_directory_uri() . '/css/style.css', // 末尾スラッシュは付かないので自分で補う
        array(),
        '1.0.0'
    );

    // 有効なテーマの JavaScript を読み込む
    wp_enqueue_script(
        'mytheme-script',
        get_stylesheet_directory_uri() . '/js/main.js',
        array(),   // 依存関係
        '1.0.0',   // バージョン
        true       // フッターで読み込む
    );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

一方、親テーマがあらかじめ用意している共通ライブラリ（たとえば親テーマの js/lib.js）を、子テーマからそのまま読み込みたいときは get_template_directory_uri() を使います。子テーマ側で get_stylesheet_directory_uri() を使ってしまうと、子テーマには存在しないファイルを指してしまい 404 になります。

functions.php（親テーマのファイルを読む）
function mytheme_enqueue_lib() {
    // 親テーマに置いてある共通ライブラリを読み込む
    wp_enqueue_script(
        'mytheme-lib',
        get_template_directory_uri() . '/js/lib.js',
        array(),
        '1.0.0',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_lib' );

「子テーマで上書きしたいファイルは get_stylesheet_directory_uri()、親テーマ共通のファイルは get_template_directory_uri()」と整理しておくと、どちらを使うか迷わなくなります。

テンプレート内で画像を表示する

テンプレートファイルから images フォルダの画像を表示する場合も考え方は同じです。URL を直接書かず、関数で組み立てます。出力時は esc_url() でエスケープしておくと安全です。

header.php
<img
  src="<?php echo esc_url( get_stylesheet_directory_uri() . '/images/logo.png' ); ?>"
  alt="サイトロゴ">

子テーマでロゴだけ差し替えたいなら、子テーマの images に画像を置いて get_stylesheet_directory_uri() で参照すれば、親テーマを変更せずに見た目を上書きできます。これが子テーマ運用の基本的な考え方です。

URL を返す関数とパスを返す関数

ここまでは _uri が付いた「URL を返す関数」を見てきました。WordPress にはこれと対になる、サーバー上の絶対パス（ディレクトリ）を返す関数もあります。名前から _uri を取った get_template_directory() / get_stylesheet_directory() がそれです。

関数返す値主な用途
get_template_directory_uri()親テーマの URLブラウザが読む CSS・JS・画像
get_stylesheet_directory_uri()有効なテーマの URL同上（子テーマ優先）
get_template_directory()親テーマの絶対パスPHP で読み込む require / include
get_stylesheet_directory()有効なテーマの絶対パス同上（子テーマ優先）

_uri 付きは https://example.com/wp-content/themes/mytheme のようなURLを、_uri なしは /var/www/html/wp-content/themes/mytheme のようなサーバー上の絶対パスを返します。使い分けはシンプルで、ブラウザに読ませるファイル（CSS・JS・画像）は _uri 付き、PHP からファイルを読み込む（require や file_get_contents() など）ときは _uri なしを使います。パスに URL を渡したり、その逆をしたりすると正しく動かないので注意してください。

functions.php（PHPファイルを読み込む）
// テーマ内の PHP ファイルを読み込むときはパス（_uri なし）を使う
require_once get_stylesheet_directory() . '/inc/setup.php';

ファイルが読み込まれない原因

子テーマで親テーマの関数を使っている

子テーマで get_template_directory_uri() を使い、子テーマにしか存在しないファイルを指してしまうと、親テーマのフォルダを探しに行くため 404 になります。子テーマ側に置いたファイルを読みたいなら get_stylesheet_directory_uri() です。逆に、親テーマに置いた共通ファイルを子テーマから読むときは get_template_directory_uri() が正しい、という対応関係を意識しましょう。

末尾スラッシュを二重に付けている

これらの関数は末尾にスラッシュを付けずに URL を返します。get_stylesheet_directory_uri() . 'css/style.css' のようにスラッシュを補い忘れると themescss/style.css とつながってしまいます。逆に '/' を二重に書くと theme//css になり、サーバー設定によっては読めなくなることがあります。連結部分のスラッシュは一つだけ、と決めておくと安全です。

URL とパスを取り違えている

src 属性やエンキューに get_stylesheet_directory()（パス）を渡すと、ブラウザには /var/www/... という意味のない文字列が出力され、画像やスクリプトが表示されません。反対に require に _uri 付きの URL を渡すと、ファイルを開けずエラーになります。「ブラウザ向けは _uri、PHP のファイル読み込みは _uri なし」を徹底すれば、この取り違えは防げます。

まとめ

get_template_directory_uri() と get_stylesheet_directory_uri() は、テーマのアセットを読み込むときの基本関数です。要点を振り返ります。

  • get_template_directory_uri() は親テーマ、get_stylesheet_directory_uri() は有効なテーマ（子テーマ優先）の URL を返す
  • 子テーマで上書きするファイルは get_stylesheet_directory_uri()、親テーマ共通のファイルは get_template_directory_uri()
  • _uri 付きは URL、_uri なしはサーバー上の絶対パスを返す。ブラウザ向けは前者、PHP の読み込みは後者
  • 末尾にスラッシュは付かないので、連結時は自分で / を補う

子テーマを使うかどうかで適切な関数が変わります。まずは「自分のテーマは子テーマか」を確認し、上書きしたいファイルには get_stylesheet_directory_uri() を使うところから始めると、アセットの読み込みで迷わなくなります。

参考ページ