静的サイトをテーマ化する

HTML/CSSで制作した店舗サイトを、WordPressが読み込めるテンプレートへ分割します。

このLessonのゴール

• 共通部分をheader.phpとfooter.phpへ分けられる
• CSSや画像のURLをWordPress関数で生成できる
• 静的HTMLをfront-page.phpへ組み込める

shop-theme/
├── style.css
├── functions.php
├── header.php
├── footer.php
├── front-page.php
└── assets/

CSSはfunctions.phpからwp_enqueue_style()で読み込みます。画像には固定の/wp-content/themes/...を書かず、get_theme_file_uri()を利用します。

<img
  src="<?php echo esc_url(get_theme_file_uri('assets/images/shop.jpg')); ?>"
  alt="店舗の外観"
>

実際に試してみよう

店舗サイトのヘッダーとフッターを分割し、トップページから読み込んでください。

まとめ

共通部分とページ固有部分を分け、環境が変わっても動くURLを生成します。