定数とコンポーネントを共通化する
WordPressでテーマを作っていると、
- 同じ文言
- 同じ構成（同じHTMLの集合）
を、いくつものテンプレートで使うことがあります。
そのたびに同じものを書いていると、
あとから内容を変えたいときに、
あちこち直さないといけなくなります。
自分はそういう場合、
- 固定の文言は定数としてまとめる
- 同じ構成のHTMLはコンポーネントとして分ける
- functions.phpで読み込んで全体から使えるようにする
という形にしています。
定数用ファイルを作る
テーマ内で共通して使う文言は、
専用のファイルにまとめます。
constants.php
PHP
<?php
define('CONTACT_TEXT', 'お問い合わせはこちら');
define('MORE_TEXT', '詳しく見る');
define('NOTICE_TEXT', '※内容は予告なく変更される場合があります。');こうしておくと、
文言を変えたいときはこのファイルだけを直せば済みます。
コンポーネント用ファイルを作る
同じ構成のHTMLを何度も使う場合は、
コンポーネントとしてファイルを分けます。
components/card.php
PHP
<?php
function render_card($title, $content, $link = '')
{
?>
<div class="card">
<h3 class="card__title">
<?php echo esc_html($title); ?>
</h3>
<div class="card__content">
<?php echo wp_kses_post($content); ?>
</div>
<?php if ($link) : ?>
<a href="<?php echo esc_url($link); ?>" class="card__link">
<?php echo esc_html(MORE_TEXT); ?>
</a>
<?php endif; ?>
</div>
<?php
}カードのHTMLを1か所にまとめておくことで、
構造やクラス名を変更するときも迷わず修正できます。
functions.phpで読み込む
定数ファイルとコンポーネントファイルは、functions.phpで読み込みます。
PHP
require_once get_template_directory() . '/constants.php';
require_once get_template_directory() . '/components/card.php';これで、
定数もコンポーネントも
すべてのテンプレートファイルで使えるようになります。
テンプレートで使う
PHP
<p><?php echo NOTICE_TEXT; ?></p>
<?php
render_card(
'サービス紹介',
'このサービスは〇〇を提供しています。',
'/service/'
);このように、
- 文言は定数にまとめる
- 同じHTML構造はコンポーネントにする
- 読み込みはfunctions.phpに集約する
という形にしておくと、
テーマ全体の管理がかなり楽になります。