WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

投稿に挿入する画像のURLを自動で相対URLに変換する方法(ビジュアルエディタ・ブロックエディタ両用)

公開日: 使い方など

WordPressの投稿や固定ページ本文に挿入する画像。すべて絶対URL(完全なURL)で挿入されるのをご存じですか?

旧エディタのテキストエディタでは挿入後にhtmlで表示されるので気づく方が多いと思いますが、ビジュアルエディタや、Gutenbergの画像ブロック、クラシックブロックで挿入する際には、親切にも挿入と同時に画像そのものが表示されるためあまり気づかないし、気にする方もいないと思います。

絶対URL?という方のために少し解説を加えると、リンクや画像のURLを指定するには

  • 絶対URL
  • 相対URL

の2つの方法があるんです。

絶対URLとは文字通り完全なURLのことで、「http(s)://ドメイン名/画像ファイルまでのパス」という形で指定します。

一方相対URLは絶対URLの「http(s)://ドメイン名」の部分を省略して「/画像ファイルまでのパス」だけで指定します。

似たようなものなのですが、相対URLではサイトのURLを省略することで「今収容されているサイトの」という指定ができるんです。

例えば

  1. サイトのドメイン(「http(s)://ドメイン名」)を変更した場合
  2. サイトデータを引っ越して別のドメインで運営する場合
  3. サイトをSSL対応(http:ではなくhttps:で運営)させる場合

などでは、それぞれを行った後で投稿などに挿入した画像のURLを変更する必要があるんです。特にドメインが変わった時(1や2の場合)変更を怠ると、以前のドメイン内の指定画像が削除されときには画像が表示されなくなってしまうという不都合が発生します。

まあサイトの引っ越しやドメインを変えての運営なんてめったにするものではないと言えばそれまでですが、あらかじめ相対URLにしておけば、いざというときにミスや忘れ、変更のわずらわしさから解放されます。

とはいっても、前述したように、WordPressは絶対URLで画像が挿入されてしまうので、ビジュアルエディタでは一旦テキストに切り替えて編集する必要があり、ブロックエディタでは一旦HTML編集に切り替えて修正する必要がありますから、都度変更するのも面倒です。

そこで今回は、メディアから投稿や固定ページへ画像を挿入する際に自動で相対URLで挿入されるようにする方法を紹介します。旧エディタのビジュアルエディタ、新エディタのGutenberg両方に対応できます。

なお今回紹介する方法は、

  • テーマのfunctions.phpへコードを追記する
  • テーマ内にファイルを作成して転送する

という作業スキルが必要ですので、不安な場合はプロの方にお任せした方がよいでしょう。

挿入する画像のURLを自動で相対URLに変換させる機能を実装する手順

変換するためのスクリプトを作ってテーマ内へ転送する

パソコンのテキストエディタ(メモ帳ではなく「Terapad」などのテキストエディタ推奨)を開き以下のコードをコピーします

/**
 * Convert URL of Block type 'core/image' to relative URL
 *
 * @param {object} element
 * @param {object} blockType
 * @param {object} attributes
 *
 * @return The element.
 */
function convertImageUrlToRelative( element, blockType, attributes ) {
        if ( 'core/image' !== blockType.name ) {
                return element;
        }

        if ( 'undefined' === typeof element.props ||
                        'undefined' === typeof element.props.children ||
                        'undefined' === typeof element.props.children.props ||
                        'undefined' === typeof element.props.children.props.children ) {
                return element;
        }

        const images = element.props.children.props.children;

        if ( Array.isArray( images ) ) {
                images.forEach( function( elm ) {
                        if ( 'object' === typeof elm    &&
                                'undefined' !== typeof elm.props  &&
                                'undefined' !== typeof elm.props.src ) {
                                elm.props.src = convertUrlToRelative( elm.props.src );
                        }
                });
        }

        return element;
}

/**
 * Convert URL to relative URL
 *
 * @param {string} urlString
 *
 * @return URL converted
 */
function convertUrlToRelative( urlString ) {
        const currentUrlObject = new URL( location.href );
        const targetUrlObject = new URL( urlString, location.href );

        if ( currentUrlObject.origin === targetUrlObject.origin ) {
                return targetUrlObject.pathname;
        }
        return urlString;
}

wp.hooks.addFilter(
        'blocks.getSaveElement',
        'lr-gb-filters/convert-image-url-to-relative',
        convertImageUrlToRelative
);
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

コピーしたら「image-block-convert.js」というファイル名と拡張子で保存します。

FTPクライアントソフトなどでサーバーに接続し、適用させたいサイトのテーマフォルダ内にファイルを転送します。

テーマのfunctions.phpへ追記する

WordPressの管理画面からテーマエディターを開き、functions.phpの末尾へ以下のコードを挿入して保存します。

※functions.phpはサイトの動作を指示する大切なファイルですので、必ずバックアップを取り、復元できるスキルのある方のみ行うようにしてください。

/*** 画像を追加する際に生成されるURLを相対URLにする ***/
/* 旧エディタ・クラシックブロック用 */
if ( !function_exists( 'hab_convert_url_to_relative' ) ):
function hab_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', 'hab_convert_url_to_relative', 10, 3);
endif;

/* ブロックエディタ用 */
add_action( 'init', function() {
        wp_register_script(
                'image_url_convert',
                get_template_directory_uri() . '/image-block-convert.js',
                array( 'wp-rich-text', 'wp-element', 'wp-editor', 'wp-compose', 'wp-data' )
        );
});

add_action( 'enqueue_block_editor_assets', function() {
        wp_enqueue_script( 'image_url_convert' );
});

これでエラーなく正常に保存できれば今回のカスタマイズは完了です。

きちんと相対URLになっているか確認してみる

本当にこれで大丈夫?ということで、ブロックエディタを例に確認方法を紹介しておきます。

まずは新規投稿を作成し、クラシックブロックを挿入後、いつも通り画像の挿入を行ってください。

ブロック上に表示される「・・・(縦に3つの点)」ボタンをクリックして「HTMLとして編集」をクリックしてください

表示されるコードの中を見て、URLが「/wp-content…」とドメインのない状態になっていればOKです。

同様に、画像ブロックでも対応できているか確認しましょう。

※今回の方法では、残念ながらギャラリーブロックには対応していません。方法がわかったら編集する予定です

※このカスタマイズを行った以降挿入する画像のみに機能します(過去に挿入した画像には適用されません)のでご注意ください

参考にさせていただいたサイト

旧エディタでの挿入画像に対する相対URL化については、↑のサイトを参考(ほぼまんま)にさせていただきました。

ブロックエディタでの挿入画像に対する相対URL化については↑のサイトを参考に、プラグインを使わずに実装する方法として紹介させていただいています。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】