置換で時短

固定ページの画像パスを自動置換して時短コーディング

テーマ作成時にローカルでhtmlコーディングする際に、WordPressを理解して少し気をつける事で、テーマ作成 〜 公開の時間を一気に時短できます。

コーディング時に気をつける事

テーマ化する前のhtmlコーディング時に、通常のテーマから呼び出す画像のパスはiamges/(2行目)として、固定ページでの表示を前提としたページをコーディングする際に、the_contentで表示する箇所の画像パスをimages/pages/(11行目)のようにします。

<header>
	<p class="logo"><img src="images/logo.svg" width="64" height="64" alt="Logo"></p>
</header>

<main>
<!-- [WP]have_posts -->
	<!-- [WP]the_title -->
	<h1 class="page-title">About</h1>
	<!-- /[WP]the_title -->

	<!-- [WP]the_content -->
	<img src="images/pages/hello.jpg" width="750" height="500" alt="Hello!">
	<!-- /[WP]the_content -->
<!-- /[WP]have_posts -->
</main>

テーマ化する際に、2行目のテーマから呼び出す画像は、このように通常通りコーディングします。

<p class="logo"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.svg" width="64" height="64" alt="Logo"></p>

WordPress組み込み時には、11〜13行目のコメントに挟まれた部分を、画像のパスを気にせずに、まるっと固定ページに貼り付けるだけで、次の方法で設定したパスに置き換えます。

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

こちらのコードをfunctions.phpに書く事でパスが通り画像が表示されます。
*パスは適宜置き換えてください

function replaceImagePath($arg) {
	$content = str_replace( '"images/', '"' . get_template_directory_uri() . '/images/pages/', $arg );
	return $content;
}
add_action( 'the_content', 'replaceImagePath' );

htmlコーディングの時点で、テーマ化する際にどう処理するのか?を考慮できている必要があります。