【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

関連記事

WordPressのウィジェットに特定のカテゴリの最近の投稿を表示する

WordPress のウィジェットに、特定のカテゴリの「最近の投稿」を表示する方法

WordPress において、特定のカテゴリ内の「最近の投稿」をウィジェットに表示する方法をご紹介します。 目次WordPress のウィジェットとは?手順設定方法TitleFilterPost de …

no image

ロリポップ!マネージドクラウドを使ってみた感想と記録

ここでは、ロリポップ!マネージドクラウド を使ってみた時のメモを書いていきます。(2018年10月時点) 目次疑問点ディスク容量についてメモリについて転送量の目安メモコンテナの起動時間SSHログイン後 …

【VPS, クラウドサーバー】MySQL (MariaDB) が突然停止する場合は、innodb_buffer_pool_size が大きすぎるかもしれません

VPS や クラウドサーバー(OS は Linux)を借りて、MySQL (MariaDB) を使っている場合のお話しです。 目次現象調査my.cnf で innodb_buffer_pool_siz …

レンタルサーバーの Tips

【エックスサーバー】サイトを編集する時は、mod_pagespeed をオフにしましょう

2019年3月27日:「mod_pagespeed設定」機能の新規設定の受付が終了しました。 「mod_pagespeed設定」機能の新規設定の受付終了について – 2019/03/27 …

エックスサーバーに tree コマンドをインストールする

エックスサーバーに tree コマンドをインストールする

エックスサーバーは、SSH を使ってターミナルエミュレータでログインすることができますが、tree コマンドが使えません。 ということで、tree コマンドを導入する手順を紹介します。 目次1. tr …

ロリポップ!「スタンダードプラン」
さくらのレンタルサーバ「スタンダードプラン」