テーマ作成時にローカルで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コーディングの時点で、テーマ化する際にどう処理するのか?を考慮できている必要があります。