WordPressのスタイルシートのURLを取得する場合に使用するget_theme_file_uri、get_parent_theme_file_uri、get_stylesheet_directory_uri、get_template_directory_uriの動作の違いを見ていきます。また、関数が返すのがURLなのかパスなのかを比較します。

スタイルシートのURL取得関数の比較

get_theme_file_uri	アクティブなテーマディレクトリ内にあるファイルのURLを取得。 指定されたファイルが子テーマに存在すれば優先的にそのURLを、子テーマにファイルが存在しなければ親テーマの指定されたファイルのURLを返す。 get_theme_file_uri('/css/style.css'));
get_theme_file_path	アクティブなテーマディレクトリ内にあるファイルの絶対パスを取得。 指定されたファイルが子テーマに存在すれば優先的にそのパスを、子テーマにファイルが存在しなければ親テーマの指定されたファイルのパスを返す。 filemtime( get_theme_file_path( '/css/style.css' ) );
get_parent_theme_file_uri	子テーマから親テーマのファイルの URL を取得。 get_parent_theme_file_uri('/images/sample.png');
get_parent_theme_file_path	子テーマから親テーマのファイルの絶対パスを取得。 get_parent_theme_file_path( '/inc/custom.php' ));
get_stylesheet_directory	現在のテーマまたは子テーマのスタイルシートディレクトリの絶対サーバーパスを取得。 /home/user/public_html/wp-content/themes/my_theme
get_stylesheet_directory_uri	テーマのスタイルシートディレクトリURIを取得。 子テーマを使用している場合は、子テーマのディレクトリの URIを取得。
get_stylesheet_uri	有効テーマで使われているスタイルシートの URI（ファイル名を含む）を返す。
get_template_directory()	アクティブなテーマのテンプレートディレクトリパスを取得 子テーマが使用されている場合には、親テーマのディレクトリへの絶対パスが返す。  /home/user/public_html/wp-content/themes/my_theme
get_template_directory_uri()	親テーマのテンプレートディレクトリURI を取得。

試してみよう

parent-themeとchild-themeを作成し、スタイルシート読み込み関数の比較を行う。

• themes
  • parent-theme
    • functions.php
    • index.php
    • style.css
  • child-theme
    • functions.php
    • index.php
    • style.css

get_theme_file_uriは、アクティブなテーマディレクトリを返す

アクティブなテーマ	関数の記述テーマ	get_theme_file_uri
親テーマ	親テーマ	http://test.local/wp-content/themes/parent-theme
親テーマ	子テーマ	結果なし
子テーマ	親テーマ	http://test.local/wp-content/themes/child-theme
子テーマ	子テーマ	http://test.local/wp-content/themes/child-theme

get_parent_theme_file_uriは、親テーマのファイルのURLを返す

アクティブなテーマ	関数の記述テーマ	get_parent_theme_file_uri
親テーマ	親テーマ	http://test.local/wp-content/themes/parent-theme
親テーマ	子テーマ	結果なし
子テーマ	親テーマ	http://test.local/wp-content/themes/parent-theme
子テーマ	子テーマ	http://test.local/wp-content/themes/parent-theme

get_stylesheet_directory_uriは、テーマのスタイルシートディレクトリURIを返す

アクティブなテーマ	関数の記述テーマ	get_stylesheet_directory_uri
親テーマ	親テーマ	http://test.local/wp-content/themes/parent-theme
親テーマ	子テーマ	結果なし
子テーマ	親テーマ	http://test.local/wp-content/themes/child-theme
子テーマ	子テーマ	http://test.local/wp-content/themes/child-theme

get_stylesheet_uri()は、アクティブなテーマで使われているスタイルシートのファイルを含むURLを返す

アクティブなテーマ	関数の記述テーマ	get_stylesheet_uri()
親テーマ	親テーマ	http://test.local/wp-content/themes/parent-theme/style.css
親テーマ	子テーマ	結果なし
子テーマ	親テーマ	http://test.local/wp-content/themes/child-theme/style.css
子テーマ	子テーマ	http://test.local/wp-content/themes/child-theme/style.css

get_template_directory_uri()は、親テーマのテンプレートディレクトリURIを返す

アクティブなテーマ	関数の記述テーマ	get_template_directory_uri()
親テーマ	親テーマ	http://test.local/wp-content/themes/parent-theme
親テーマ	子テーマ	結果なし
子テーマ	親テーマ	http://test.local/wp-content/themes/parent-theme
子テーマ	子テーマ	http://test.local/wp-content/themes/parent-theme

関数の使い分け

get_stylesheet_directory_uriとget_template_directory_uriの使い分け方

• get_stylesheet_directory_uri：テーマのスタイルシートディレクトリURIを取得。子テーマを使用している場合は、子テーマのディレクトリの URIを取得
• get_template_directory_uri：親テーマのディレクトリのURLを取得

get_theme_file_uriとget_template_directory_uriの使い分け方

• get_theme_file_uri：指定されたファイルが子テーマに存在すれば優先的にそのURLを、子テーマにファイルが存在しなければ親テーマの指定されたファイルのURL
• get_template_directory_uri：親テーマのディレクトリのURLを取得

テーマ作成時の使い分け

親テーマを有効化し、親テーマのstyle.cssを適用する場合

// 親テーマ 書き方1
// get_template_directory_uri()
// ディレクトリを返すためファイル名を追加する
function my_parent_enqueue_styles() {
    wp_enqueue_style(
		'parent-style',
		get_template_directory_uri() . '/style.css'
	);
}
add_action('wp_enqueue_scripts', 'my_parent_enqueue_styles');

// 親テーマ 書き方2
// get_theme_file_uri()
// ファイル名を引数として渡す
function my_parent_enqueue_styles() {
    wp_enqueue_style(
		'parent-style',
		get_theme_file_uri('/style.css')
	);
}
add_action('wp_enqueue_scripts', 'my_parent_enqueue_styles');

// 親テーマ 書き方3
// get_stylesheet_uri()
// ファイル名を含めたスタイルシートのURLを返す
function my_parent_enqueue_styles() {
    wp_enqueue_style(
		'parent-style',
		get_stylesheet_uri()
	);
}
add_action('wp_enqueue_scripts', 'my_parent_enqueue_styles');

子テーマを有効化し、親テーマと子テーマのstyle.cssを適用する場合、依存関係を指定しないと、スタイルシートの読み込み順が子テーマ、親テーマの順になってしまうため、依存関係の記述は必須。

// 親テーマ
function my_parent_enqueue_styles() {
    wp_enqueue_style(
		'parent-style',
		get_template_directory_uri() . '/style.css'
	);
}
add_action('wp_enqueue_scripts', 'my_parent_enqueue_styles');

// 子テーマ 書き方1
// get_theme_file_uri()
// ファイル名を引数として渡す
function my_child_enqueue_styles() {
    wp_enqueue_style(
		'child-style',
		get_theme_file_uri('/style.css'),
		array('parent-style')
	);
}
add_action('wp_enqueue_scripts', 'my_child_enqueue_styles');

// 子テーマ 書き方2
// get_stylesheet_uri()
// ファイル名を含めたスタイルシートのURLを返す
function my_child_enqueue_styles() {
    wp_enqueue_style(
		'child-style',
		get_stylesheet_uri(),
		array('parent-style')
	);
}
add_action('wp_enqueue_scripts', 'my_child_enqueue_styles');

親テーマでget_theme_file_uriを使用すると、子テーマ有効時にスタイルシートが読み込まれない

// 親テーマ
function my_parent_enqueue_styles() {
    wp_enqueue_style(
		'parent-style',
		get_theme_file_uri('/style.css')
	);
}
add_action('wp_enqueue_scripts', 'my_parent_enqueue_styles');

// 子テーマ
function my_child_enqueue_styles() {
    wp_enqueue_style(
		'child-style',
		get_theme_file_uri(),
		array('parent-style')
	);
}
add_action('wp_enqueue_scripts', 'my_child_enqueue_styles');

// 結果：親テーマのスタイルは適用されず、子テーマのスタイルのみ適用される

子テーマ有効時、子テーマで再度親テーマのスタイルシートを読み込んでも適用されない。

// 親テーマ
function my_parent_enqueue_styles() {
    wp_enqueue_style(
		'parent-style',
		get_template_directory_uri() . '/style.css'
	);
}
add_action('wp_enqueue_scripts', 'my_parent_enqueue_styles');

// 子テーマ
function my_child_enqueue_styles() {
	wp_enqueue_style(
		'parent-style',
		get_template_directory_uri() . '/style.css'
	);
    wp_enqueue_style(
		'child-style',
		get_stylesheet_uri(),
		array('parent-style')
	);
}
add_action('wp_enqueue_scripts', 'my_child_enqueue_styles');

// 結果：
'parent-style'、'child-style'の順に一度ずつ読み込まれる

最適な関数

子テーマにおいては、使い分けを考慮しなくても良いget_theme_file_uriが便利だが、親テーマにおいてはget_template_directory_uriを使用したい。

リファレンス

• https://developer.wordpress.org/reference/functions/get_theme_file_uri/