Wordpressは、デフォルトの仕組みで画像を扱うときにいくつか注意点があるので、今回はその点を理解しましょう。
メディア機能という、画像をアップロードできる機能があるんですが、その画像は、wp-content/uploads/という階層に格納されます。
webサイトで更新をしない画像（ロゴやらバナーなど）であれば、テーマに埋め込んでしまうことは可能なのですが、
固定ページ内や投稿記事などのコンテンツ内で扱う画像は、かなり流動的な扱いになってしまいます。
何よりイケていない仕様が、メディア機能で画像挿入すると、URLでセットされてしまうという点です。
それらをどのようにして解消するかを学習しておきます。
トップページに画像を追加してみる
固定ページでトップページにセットした、ページ編集を開き、「メディアを追加」ボタンをクリック。
何か画像をピックアップしてアップロードして、「固定ページに挿入」をクリック
画像が登録されたらIMGタグが挿入されます。
登録されたimgタグは次の内容です。
<img src="http://kantan.local/wp-content/uploads/2023/01/cat-2605502_1280-300x199.jpg" alt="" width="300" height="199" class="alignnone size-medium wp-image-41" />
src属性にurlが入っているので、このまま本番にコピーしてしまうと、アクセスできない画像タグになってしまいます。
これを回避するために、functions.phpに次のコードを追記します。
function delete_host_from_attachment_url($url){
$ptn = '/^http(s)?:\/\/[^\/\s]+(.*)$/';
if ( preg_match( $ptn, $url, $m ) ) {
$url = $m[2];
}
return $url;
}
add_filter(
'wp_get_attachment_url',
'delete_host_from_attachment_url'
);
add_filter(
'attachment_link',
'delete_host_from_attachment_url'
);
この状態で、上記と同じ手順で、画像タグを追加すると・・・
無事に、urlから、ローカルの相対パスになりました。
<img src="/wp-content/uploads/2023/01/bulldog-1224267_1280-300x200.jpg" alt="" width="300" height="200" class="alignnone size-medium wp-image-44" />
ちなみに、先程アップロードした猫画像も、「メディアの追加」で選択をすれば、URLから、相対パスで登録されるので、修正も楽です。
今回の成果
登録されたページ編集を更新（保存）して、サイトプレビューを見てみると次のように表示されています。
ローカルで表示されているので、サーバーでも表示されるはずです。
今回の設定をテーマ内でやっておくことで、画像を操作する時のパスリンク切れなどのトラブルを回避出来るようになるんですね。
必ずセットしておきたい内容でした。
