元の記事
共通部の外部ファイル化で効率的なテンプレート管理を実現しよう！
WordPressテーマ開発における「部分テンプレート」の概念を実践的に学習。テンプレートファイルの共通部分を外部ファイル化することで、コードの重複を排除し、保守性の高いテーマ構造を構築する方法を解説します。効率的なテンプレート管理とメンテナンス性の向上を実現する、プロフェッショナルなテーマ開発に必須の技術を習得しましょう。
［成果物］共通部の外部ファイル化で効率的なテンプレート管理を実現しよう！
この記事では、以下の投稿で作成した成果物をまとめて確認することができます。
ご自身の環境と見比べて反映漏れがないかなど、ご確認用にご活用ください。
は今回新規追加したものです。
は今回変更したものです。
目次
固定ページ一覧
| タイトル | スラッグ | 順序 | テンプレート | 備考 | |
|---|---|---|---|---|---|
| ようこそ | sample-page | 100 | トップページ | ||
| 会社概要 | about | 200 | 会社概要専用テンプレート | ||
| 沿革 | history | 100 | |||
| アクセス | access | 200 | |||
| サービス | service | 300 | |||
| お客様の声 | voice | 350 | |||
| お問い合わせ | contact | 400 |
投稿一覧
| タイトル | カテゴリ | テンプレート | 備考 | |
|---|---|---|---|---|
| Hello World!! | WPが自動生成 |
テーマファイル一覧
現時点のテーマファイルはありません
| ファイル名 | 用途 | 備考 | |
|---|---|---|---|
footer.php | フッター共通部 | ||
front-page.php | トップページ専用テンプレート | ||
header.php | ヘッダー共通部 | ||
index.php | |||
kaisha.php | 会社概要用テンプレート | ||
page-contact.php | お問い合わせ用テンプレート | ||
page.php | 固定ページ用テンプレート | ||
style.css |
コード
現時点のコードは以下の通りです。
footer.php
</main>
<footer>
<p>© 2025 マイ・オリジナルテーマ</p>
</footer>
</body>
</html>front-page.php
<?php get_header();?>
<?php the_content(); ?>
<p>※このページは front-page.php テンプレートで表示されています</p>
<?php get_footer();?>header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php the_title(); ?></title>
</head>
<body>
<header>
<h1><?php the_title(); ?></h1>
<ul>
<li><a href="<?php echo home_url(''); ?>">トップ</a></li>
<li><a href="<?php echo home_url('about'); ?>">会社概要</a>
<ul>
<li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
<li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
</ul>
</li>
<li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
<li><a href="<?php echo home_url('voice'); ?>">お客様の声</a></li>
<li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
</ul>
</header>
<main>index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<title>マイ・オリジナルテーマ</title>
</head>
<body>
<header>
<h1><?php the_title(); ?></h1>
<ul>
<li><a href="<?php echo home_url(''); ?>">トップ</a></li>
<li><a href="<?php echo home_url('about'); ?>">会社概要</a>
<ul>
<li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
<li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
</ul>
</li>
<li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
<li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
</ul>
</header>
<main>
<?php the_content();?>
</main>
<footer>
<p>© 2025 マイ・オリジナルテーマ</p>
</footer>
</body>
</html>kaisha.php
<?php
/*
Template Name: 会社概要専用テンプレート
*/
?>
<?php get_header();?>
<?php the_content(); ?>
<p>※このページは kaisha.php テンプレートで表示されています</p>
<?php get_footer();?>page-contact.php
<?php get_header();?>
<?php the_content(); ?>
<h2>お問い合わせフォーム</h2>
<form>
<!-- ここにフォームを作成 -->
</form>
<p>※このページは page-contact.php テンプレートで表示されています</p>
<?php get_footer();?>page.php
<?php get_header();?>
<?php the_content(); ?>
<p>※このページは page.php テンプレートで表示されています</p>
<?php get_footer();?>style.css
/*
Theme Name: マイ・オリジナルテーマ
*/プラグイン
現時点のプラグインは以下の通りです。
| プラグイン名 | 作者 | 備考 | |
|---|---|---|---|
| Admin Columns | Codepress |
