【WordPress】投稿編集画面で画像（メディア）を追加する際に挿入されるURLを相対URLにする

WordPress の投稿編集画面で、「メディアを追加」ボタンを使って画像（メディア）を追加する際、挿入されるHTMLコードのURL部分は 絶対URL になります。

しかし、これだと不便なので「相対URL にしよう！」という内容です。

1. まずは素直に画像を挿入してみます

(1) 「メディアを追加」ボタンを押し…

(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関数は、置換を行う際に任意の処理が使えるので便利です。
• The Perfect URL Regular Expression – URL Regex
  • URLを表す正規表現を正確に書こうとすると、このリンク先にあるようなものすごく複雑な表現になります。それは大変なので、今回のコードではもっと簡単な表現を使ってURLのマッチングを行っています。
• wp_make_link_relative() | Function | WordPress Developer Resources
  • WordPress が用意している「絶対URLを相対URLにする関数」です。このリンク先を見ると分かりますが、内部では preg_replace関数を使っているだけのシンプルな関数です。
• 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のコードを書いて、すぐに実行したい場合は、この手のウェブサイトが便利です。