WordPress の投稿編集画面で、「メディアを追加」ボタンを使って画像(メディア)を追加する際、挿入されるHTMLコードのURL部分は 絶対URL になります。
しかし、これだと不便なので「相対URL にしよう!」という内容です。
1. まずは素直に画像を挿入してみます
(1) 「メディアを追加」ボタンを押し…
![[メディアを追加]ボタンを押します](/wp-content/uploads/2018/06/2018-06-20_100a.min_-300x185.png)
(2) 画像ファイルを追加するか選択して、「投稿に挿入」ボタンを押します。

今回は、「リンク先」に「メディアファイル」を指定します。これにより、img
タグが a
タグで囲まれた状態のコードが挿入されます。
(3) この画像を表す HTMLコードが挿入されました。
少し分かりづらいですが、a
タグの href
属性と、img
タグの src
属性のどちらも 絶対URL で指定されています。

抜き出してインデントを入れるとこんな感じになります。
<a href="http://example.com/wp-content/uploads/2018/04/food_risotto_tomato.png">
<img src="http://example.com/wp-content/uploads/2018/04/food_risotto_tomato-300x281.png"
alt="" width="300" height="281"
class="alignnone size-medium wp-image-5" />
</a>
2. 相対URL にしたい
ということで、WordPress はそのままで画像を追加すると 絶対URL のHTMLコードを挿入されます。
しかし、絶対URLになっていると、ドメインを変えた場合、HTML内のURLを修正しなければいけません。
また、サイトをSSL化した際には、a
タグのhref
属性や img
タグのsrc
属性に “http://…” のURLが残っているとウェブブラウザが警告を出してしまいます。
ですので、以下のような絶対URLではなく、
以下のような相対URLで、画像のHTMLコードが挿入されるとラクなのです。「メディアを追加」ボタンによって挿入された HTML内の絶対URLを、毎回手動で相対URLにするのは大変です。
3. 画像を追加する際に、相対URLのHTMLが挿入されるようにする
いろいろやり方はあるのでしょうが、今回紹介する方法は functions.php
に以下のコードを追記します。
/**
* 画像を追加する際に生成されるURLを相対URLにする。
*
* @param string $html The image HTML markup to send.
* @param int $id The attachment id.
* @param array $attachment An array of attachment metadata.
*
* @return string
*/
function convert_url_to_relative($html, $id, $attachment)
{
$html_new = preg_replace_callback(
'@(href|src)="(https?://[^\s"]+)"@i',
function ($matches) {
$relativeurl = wp_make_link_relative($matches[2]);
return $matches[1] . '="' . $relativeurl . '"';
},
$html
);
return $html_new;
}
add_filter('media_send_to_editor', 'convert_url_to_relative', 10, 3);
何をしているのかと言いますと、エディタ上で画像のHTMLが挿入される際に、href
属性と src
属性に指定されている絶対URLを相対URLに置換しています。
手順はたったこれだけで終了です。
これにより、挿入されるHTML内のURLが相対URLになります。

4. おわりに
絶対URL を使うより、相対URLを使った方が変化には強いと思います。手順もシンプルですし、是非試してみて下さい。
5. 関連資料
- 関数リファレンス/add filter – WordPress Codex 日本語版
- PHP: preg_replace_callback – Manual
- PHP の
preg_replace_callback
関数は、置換を行う際に任意の処理が使えるので便利です。
- PHP の
- The Perfect URL Regular Expression – URL Regex
- URLを表す正規表現を正確に書こうとすると、このリンク先にあるようなものすごく複雑な表現になります。それは大変なので、今回のコードではもっと簡単な表現を使ってURLのマッチングを行っています。
- wp_make_link_relative() | Function | WordPress Developer Resources
- WordPress が用意している「絶対URLを相対URLにする関数」です。このリンク先を見ると分かりますが、内部では
preg_replace
関数を使っているだけのシンプルな関数です。
- WordPress が用意している「絶対URLを相対URLにする関数」です。このリンク先を見ると分かりますが、内部では
- ajax-actions.php in tags/4.9.6/src/wp-admin/includes – WordPress Trac
media_send_to_editor
というフィルタフックを実行している部分のソースコードです。
- PHP Sandbox, test PHP online, PHP tester
- 簡単な PHPのコードを書いて、すぐに実行したい場合は、この手のウェブサイトが便利です。