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

公開日：2020(令和2)年9月1日／最終更新日： 2020(令和2)年9月1日

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

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

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

絶対URL
相対URL

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

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

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

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

例えば

サイトのドメイン（「http(s)://ドメイン名」）を変更した場合
サイトデータを引っ越して別のドメインで運営する場合
サイトを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    &amp;&amp;
                                'undefined' !== typeof elm.props  &amp;&amp;
                                '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
);

コピーしたら「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' );
});

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