FTPでアップロードした画像までのパスを自動で置換する

テーマ作成時、まずはhtmlでコーディングしますよね？
固定ページなどでそのhtmlをそのままコピペした際に画像のパスを自動で置換して時間短縮します。

html作成時に注意する事

html コーディング時に、
テーマファイルから呼び出す画像のパスは iamges/ (2行目)とします
固定ページや投稿ページの「カスタムHTML」ブロックでFTPでアップロードした画像の場合、ファイルのアップロード先を、uploads フォルダの中で管理するなどルールで作成します。

<header>	<h1 class="logo"><img src="images/logo.svg" width="64" height="64" alt="ロゴマーク"></h1>
</header>
<main>	<div class="entry-content">	<p><img src="uploads/company/pict.jpg" width="750" height="500"></p>	</div>
</main>

htmlファイルをテーマ化する際に、2行目のようなテーマから呼び出す画像は、get_template_directory_uri() 関数でテーマフォルダのパスを取得します。

<h1 class="logo"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.svg" width="64" height="64" alt="ロゴマーク"></h1>

自動でパスを置換する方法

こちらのコードを functions.php に書く事で、uploads/ を、WPアドレスの設定URL + /wp-content/uploads/ に置き換えてくれます。

function replaceImagePath($arg) {	$content = str_replace('uploads/', site_url() . '/wp-content/uploads/', $arg);
return $content;}
add_action('the_content', 'replaceImagePath');

2行目の始めの、uploads/ を 後半の site_url() . '/wp-content/uploads/' に置き換えるので、htmlの時点で画像を assets/images フォルダで管理する場合等は、それぞれ置き換えて下さい。

まとめ

htmlでコーディングする際に、WordPressでテーマ化した時にどう処理するのかを事前に決めておく事で、「カスタムHTML」ブロックにコピペするだけでパスが通り時短になります。