サイト構成とテンプレートの準備 – WordPress実践制作【WPCafe編】

2025/10/15
PRACTICE
0comments
18views
約6分で読めます
3

前回、オリジナルテーマの基盤を整え、真っ白なページが表示されるところまで進めました。今回は、サイト全体の構成を決め、必要なページとテンプレートを準備していきます。

サイトの構成を考える

サイトを作るにあたり、まずは全体の構想を考えます。どんなページを用意し、WordPressのどの機能（固定ページ、投稿、カスタム投稿）を用いるか。URL（パーマリンク）がどうなるか、どんなテンプレートが必要かが見えてくる重要な工程です。

今回は、各コンテンツの最上位となるページを固定ページで用意します。つまり、ナビゲーションメニューの構成要素を作ります。

ページの構成

大きく5つのページで構成します。

HOME

サイトのトップページです。

URL: http://wpcafe.local
スラッグ: home
表示順: 0
前回作成済みなので、今回は作成不要

ABOUT

カフェの概要を紹介するページです。WordPressのエディタで入力したコンテンツをそのまま表示します。

URL: http://wpcafe.local/about
スラッグ: about
表示順: 100

BLOG

イベントや新作メニューの紹介、休業のお知らせなどお店の「今」を閲覧者へ伝えるページです。カテゴリー分け、タグ付け、年月別に整理して表示します。

URL: http://wpcafe.local/blog
スラッグ: blog
表示順: 300

CONTACT

お問い合わせフォームでお客様からのご予約、ご質問を受け付けます。

URL: http://wpcafe.local/contact
スラッグ: contact
表示順: 400

固定ページの作成

それでは、上記の「ページの構成」の内容で固定ページを作成してみましょう。

Admin Columnsプラグイン

固定ページの一覧で「順序」「スラッグ」を確認できるようにAdmin Columnsプラグインを使って表示内容をカスタマイズしています。

Admin Columnsプラグインの導入方法、使い方については、以前の記事を参照してください。

参考

固定ページ一覧を最適化しよう！プラグインの導入とAdmin Columnsの活用

固定ページ一覧の管理を効率化するために、Admin Columnsプラグインを導入し、「スラッグ」や「順序」を一覧に表示する方法を解説します。プラグインの基本概念から導入手順、実践的な順序設定テクニックまでを丁寧に紹介し、効率的なページ管理を実現します。

テンプレートの構造を理解する

5つのページはすべて固定ページです。通常であれば page.php テンプレート1つで表示できますが、ページごとに構成が異なるため、それぞれ専用のテンプレートを用意します。

WordPressのテンプレート階層により、スラッグに応じた専用テンプレートがあれば、それが優先的に使用されます。この仕組みについては、以前の学習で詳しく解説しています。

参考

テンプレートを理解しよう！ – WordPressテンプレートシステムの基本【前編】

すべての固定ページが同じレイアウトで表示されていませんか？本記事では、テンプレート階層の仕組みとその優先順位を理解しながら、ページの内容や目的に応じて適切なテンプレートを使い分けるための第一歩を丁寧に解説します。今後の柔軟なデザイン展開に向けた基盤を築きましょう。

HOME（トップページ）

トップページなのでデザインを重視します。他のページとレイアウトが大きく異なるため、専用のテンプレートを用意します。

使用するテンプレート: front-page.php

WordPressは、トップページを表示する際に front-page.php を最優先で探します。このファイルがあれば、他のテンプレートよりも優先的に使われます。

ABOUT

エディタで入力したコンテンツをそのまま表示したいので、標準的な固定ページとして機能します。

使用するテンプレート: page.php

特別な処理が不要な固定ページは、この共通テンプレートで対応できます。

カテゴリーやタグで整理したり、「おすすめ」を最上位に表示したりと、複数のメニュー（つまり複数の投稿）を一覧で表示する必要があります。PHPで条件に沿って表示する必要があるので、専用のテンプレートを用意します。

使用するテンプレート: page-menu.php

固定ページのスラッグが menu の場合、WordPressは自動的に page-menu.php を探して使用します。

BLOG

メニューページと同様に、複数の投稿を一覧で表示する必要があるので専用のテンプレートを用意します。

使用するテンプレート: page-blog.php

スラッグが blog なので、page-blog.php が自動的に適用されます。

CONTACT

お問い合わせページにはフォームを用意します。今回はプラグインを使わず、フォームを1から作成するためPHPによる処理が必要なので専用のテンプレートを用意します。

使用するテンプレート: page-contact.php

スラッグが contact なので、page-contact.php が自動的に適用されます。

テンプレートファイルの作成

それでは、実際にテンプレートファイルを作成していきましょう。

ヘッダーとフッターを作る

各固定ページのテンプレートを作る前に、まずは共通部分である header.php と footer.php を作ります。

VS Codeでテーマフォルダ（app/public/wp-content/themes/cafe-theme/）を開き、以下のファイルを作成してください。

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <?php wp_head(); ?>
</head>
<body>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <?php wp_head(); ?>
</head>
<body>

PHP

footer.php

<?php wp_footer(); ?>
</body>
</html>

<?php wp_footer(); ?>
</body>
</html>

PHP

これらのファイルは、すべてのページで共通して使われる部分です。

各固定ページのテンプレートを作る

次に、各ページ専用のテンプレートを作成します。まずは基本的な構造だけ作り、後ほど詳細な内容を追加していきます。

以下の5つのテンプレートファイルを作成してください。すべて同じ内容です。

front-page.php（HOMEページ用）
page.php（ABOUTページ用）
page-menu.php（MENUページ用）
page-blog.php（BLOGページ用）
page-contact.php（CONTACTページ用）

各テンプレートの内容

それぞれのテンプレートで、どのファイルが使われているかを確認できるように、ファイル名を表示するコードを追加します。

以下の5つのテンプレートファイルを作成してください。すべて同じ内容です。

例）page.php

<?php get_header(); ?>
これは<?php echo basename( $GLOBALS['template'] );?>で表示されています。
<?php get_footer(); ?>

<?php get_header(); ?>
これは<?php echo basename( $GLOBALS['template'] );?>で表示されています。
<?php get_footer(); ?>

PHP

$GLOBALS[‘template’]

$GLOBALS['template'] には、現在のページに適用されているテンプレート名がされています。例えば、トップページであれば、app/public/wp-content/themes/cafe-theme/front-page.php が格納されています。

basename は、ファイル名だけを取り出す関数です。よって front-page.php だけが表示されます。

これで、基本的なテンプレートファイルが揃いました。

ファイル構造の確認

現時点で、テーマフォルダは以下のような構造になっているはずです。

app
└── public
    └── wp-content
        └── themes
            └── cafe-theme
　　             ├── footer.php
　　             ├── front-page.php
　　             ├── header.php
　　             ├── index.php
　　             ├── page-blog.php
　　             ├── page-contact.php
　　             ├── page-menu.php
　　             ├── page.php
　　             └── style.css

app
└── public
    └── wp-content
        └── themes
            └── cafe-theme
　　             ├── footer.php
　　             ├── front-page.php
　　             ├── header.php
　　             ├── index.php
　　             ├── page-blog.php
　　             ├── page-contact.php
　　             ├── page-menu.php
　　             ├── page.php
　　             └── style.css