はじめに
WordPress では get_theme_file_uri() を使用するとテーマファイルの URL を取得できます。しかし、この関数は フルURL を返すため、場合によっては ホームURLを除いた相対パスが欲しい こともあるでしょう。
例えば、get_theme_file_uri('assets/css/style.css') を使用すると、以下のような絶対URLが返ります。
https://example.com/wp-content/themes/your-theme/assets/css/style.css
しかし、時には /wp-content/themes/your-theme/assets/css/style.css のような相対パス が必要になることがあります。
そこで今回は、WordPress 6.7.1（PHP 8.3.8）環境で テーマファイルの相対パスを取得する関数 を作成します！
cf_get_theme_file_relative_uri() の実装
以下の関数を functions.php に追加することで、WordPressの get_theme_file_uri() に対応する相対パス版の関数 を作ることができます。
/**
* 指定したテーマファイルの相対URIを取得する関数
*
* WordPressの `get_theme_file_uri()` はフルURLを返すが、
* この関数はホームURLを除いた「相対パス」を返す。
*
* @param string $file 取得したいテーマファイルのパス（例: 'assets/css/style.css'）
* @return string 相対パス（例: '/wp-content/themes/your-theme/assets/css/style.css'）
*/
function cf_get_theme_file_relative_uri($file = '') {
// 現在のテーマディレクトリのURLを取得（例: https://example.com/wp-content/themes/your-theme）
$theme_uri = get_template_directory_uri();
// サイトのホームURLを取得（例: https://example.com）
$home_url = home_url();
// ホームURLを削除し、相対パスを取得
// 例: 'https://example.com/wp-content/themes/your-theme/assets/css/style.css' →
// '/wp-content/themes/your-theme/assets/css/style.css'
$relative_path = str_replace($home_url, '', $theme_uri . '/' . ltrim($file, '/'));
return $relative_path;
}
使い方
例 1: CSS ファイルの相対パスを取得
echo cf_get_theme_file_relative_uri('assets/css/style.css');
出力結果
/wp-content/themes/your-theme/assets/css/style.css
例 2: JavaScript ファイルの相対パスを取得
echo cf_get_theme_file_relative_uri('assets/js/script.js');
出力結果
/wp-content/themes/your-theme/assets/js/script.js
この関数のメリット
✅ WordPressの公式関数と直感的に対応
get_theme_file_uri()の相対パス版として、直感的に使える
✅ URLのハードコーディングを防ぐ
home_url()を省略できるため、サイトの移行時にも便利
✅ WordPressの公式関数との衝突を防ぐためにプレフィックス付き
cf_をつけることで、他のプラグインやテーマと競合しにくい
まとめ
WordPress でテーマファイルのパスを取得する際、get_theme_file_uri() ではフルURLになってしまいます。しかし、相対パスが必要な場合は cf_get_theme_file_relative_uri() を活用すると便利です！
この関数を functions.php に追加しておくと、様々な場面で活用できるので、ぜひ試してみてください！🎯
コメント