WordPressでオリジナルテーマを開発している際、「カスタムHTMLブロック」内でテーマフォルダ内の画像（/img/など）を表示させたい場面があります。
しかし、カスタムHTML内ではPHPが使えないため、通常は絶対パス（https://…）を直書きしなければなりません。
これでは開発環境と本番環境でURLが異なる場合にリンク切れを起こしたり、移行作業が面倒になります。
この記事では、functions.phpに短いコードを追加するだけで、特定の相対パスを自動的にテーマディレクトリのURLに変換する方法を解説します。
目次
なぜ「直書き」は良くないのか？
カスタムHTMLブロックに https://example.com/wp-content/themes/my-theme/img/sample.jpg とフルパスで記述すると、以下のようなデメリットが生じます。
- 環境移行が大変: テスト環境から本番環境へ移行する際、ドメインをすべて置換する手間が発生します。
- 保守性の低下: テーマ名を変更したり、SSL化（httpからhttps）をしたりする際に、過去の投稿をすべて修正しなければなりません。
そこで、特定の文字列（例：="/img/）を検知して、自動でテーマのURLを補完する仕組みを作ります。
functions.phpに記述するコード
以下のコードを、使用しているテーマの functions.php の末尾に追記してください。
/**
* 投稿や固定ページのカスタムHTMLブロック内に書かれた画像パスを自動置換する
*/
function replace_relative_paths_to_theme($content)
{
// テーマのディレクトリURLを取得
$theme_url = get_stylesheet_directory_uri();
// 置換対象の属性（src, srcset, posterなど）
// 「="/img/」のように、引用符とスラッシュが連続する部分をテーマパスに書き換える
$search = array('="/img/', "='/img/");
$replace = array(
'="' . esc_url($theme_url . '/img/'),
"='" . esc_url($theme_url . '/img/')
);
$content = str_replace($search, $replace, $content);
return $content;
}
add_filter('the_content', 'replace_relative_paths_to_theme');使い方と仕組み
書き方
カスタムHTMLブロック内で画像を呼び出す際、以下のように記述します。
<img src="/img/sample.jpg" alt="サンプル画像">実際の出力
ページを表示する際、WordPressが自動的に以下のように変換して出力します。
<img src="https://example.com/wp-content/themes/your-theme/img/sample.jpg" alt="サンプル画像">コードのポイント
get_stylesheet_directory_uri(): 有効化されているテーマ（子テーマ含む）のURLを取得します。str_replace: 文字列を検索して置換します。ここでは="/img/というパターンを検索することで、意図しない箇所の書き換えを防いでいます。esc_url：サニタイズ化（無害化）のコードも入れることで、セキュリティ対策もしています。the_contentフィルター: データベースに保存された内容をブラウザに表示する直前に処理を挟んでいるため、データベース内のデータ自体は汚しません。
注意点
- 他のパスへの影響: もし
/img/という文字列を画像パス以外（テキストなど）で多用している場合、それも置換される可能性があります。より厳密に制御したい場合は、正規表現（preg_replace）の使用を検討してください。 - プラグインとの競合: キャッシュプラグインを使用している場合、コードを追加した後は一度キャッシュをクリアして反映を確認してください。
まとめ
この設定をしておくことで、カスタムHTMLブロックでもテンプレートファイル（PHP）と同じような感覚でパスを記述できるようになります。
テーマ制作の効率化と、環境移行に強いサイト作りにぜひ役立ててください。
