Tips

【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

関連記事

エックスサーバーに Node.js をインストールする

エックスサーバーは、SSH を使ってターミナルエミュレータでログインすることができますが、そのままだと Node.js が使えません。つまり、node コマンド(npm, npx も)が使えません。 …

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

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

エックスサーバーに Bolt (CMSツール)を設置する

エックスサーバーに Bolt という CMS を設置する手順を紹介します。 Bolt 自体の紹介というよりは、エックスサーバーのような共用レンタルサーバーに、CMS を設置する一つの方法(手順)を紹介 …

Wayback Machine にサイトを保存させない

robots.txt ファイルとは? にも書いたのですが、Wayback Machine というサイトがあります。 Wayback Machine Wayback Machine は、世界中のウェブサ …

CodePen で書いたコードを自分のWebサイトに埋め込む方法

CodePen とは、Web上で HTML, CSS, JavaScript を書いてすぐに結果を表示することができるサービスです。 結果を確認しながら、コードを書いたり修正できるので、ちょっとしたW …

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