WordPressでHTML内の画像パスを相対パスからURLに変換する方法

WordPressでサイト制作する際、まずは静的HTMLでコーディングし、それをWordPressで構築していくことが多いと思います。

静的HTMLでは画像パスが「img/sample.jpg」のように相対パスになっているので、そのまま固定ページに流し込んでも画像が表示されません。そのため、メディアライブラリに画像をアップロードして、画像パスを画像URLに置き換えてあげる必要があります。

数ページだったらページ毎に画像パスを置き換えても大した手間ではないのですが、ページ数が多いと手作業でやっていくのはきついです。

Search RegexやBetter Search Replaceを使って画像パスを置換するという方法もありますが、今回はテーマ側で対応する方法をご紹介したいと思います。

WordPressでHTML内の画像パスを相対パスからURLに変換する方法

まずは、テーマディレクトリ内の「img」フォルダに必要な画像を入れておきます。そのうえで、functions.phpに以下のコードを追加します。

function my_path_replacement($content) {
  $content = str_replace('"img/', '"' . get_stylesheet_directory_uri() . '/img/', $content);
  return $content;
}
add_action('the_content', 'my_path_replacement');

コード内の「”img/」が「”https://example.com/wp-content/themes/テーマ名/img/」に置換されるので、画像パスがテーマ内に設置した画像のURLに置き換わり画像が表示されるようになります。

画像を設置しているフォルダ名を「img」以外にしている場合は、上記コードでも「img」の部分を変更してください。

また、上記の場合、投稿タイプを指定していないので、通常の投稿やカスタム投稿でも置換が実行されます。固定ページのみに限定したい場合は、以下のように条件分岐を追加します。

function my_path_replacement($content) {
  if (is_page()) {
    $content = str_replace('"img/', '"' . get_stylesheet_directory_uri() . '/img/', $content);
  }
  return $content;
}
add_action('the_content', 'my_path_replacement');

あとがき

画像パスの置換処理を追加することで、WordPressでのサイト構築を時短できますね。

静的HTMLでコーディングしたものをWordPress化することが多い方は、ぜひ参考にしていただければと思います。