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

投稿日:2018年6月20日 更新日:

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ではなく、

http://example.com/wp-content/uploads/2018/04/food_risotto_tomato.png

以下のような相対URLで、画像のHTMLコードが挿入されるとラクなのです。「メディアを追加」ボタンによって挿入された HTML内の絶対URLを、毎回手動で相対URLにするのは大変です。

/wp-content/uploads/2018/04/food_risotto_tomato.png

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になります。

相対URLになっている
相対URLになっている

4. おわりに

絶対URL を使うより、相対URLを使った方が変化には強いと思います。手順もシンプルですし、是非試してみて下さい。

5. 関連資料

-Tips

執筆者:fitallright

関連記事

Xserver

エックスサーバーの「動作確認URL設定」機能

エックスサーバーの「動作確認URL設定」機能について書いています。

エックスサーバーの phpMyAdmin にログインできない?

エックスサーバーの phpMyAdmin にログインできない場合の対応策

エックスサーバーの phpMyAdmin にログインできない場合の対応策を紹介します。

エックスサーバーに tig コマンドを導入する

エックスサーバーに tig コマンドを導入する

エックスサーバーに tig コマンドを導入する手順について説明します。

レンタルサーバーのTips

Windows で、.htaccess(先頭がドットで始まり拡張子を持たないファイル名の)ファイルを作成する方法

レンタルサーバーでは、.htaccess ファイルを使ってサーバー側の設定を変更することが許されているものが多くあります。 そこで、この機能を利用しようと思い Windows のエクスプローラー上で …

WordPress に Font Awesome 5 を導入する方法

WordPress に Font Awesome 5 を導入する方法

WordPress に Font Awesome 5 を導入する方法について説明します。 目次1. はじめに本ページで説明する方法について2. 導入手順「SVG with JS」の導入手順「Web F …

ロリポップ!「スタンダードプラン」