テーマ開発・じゅんび：作るものと道具

企業サイトのテーマを作ろう

このコースでは、架空の雑貨店「シマエナガ堂」の企業サイトを題材に、WordPressテーマをゼロから開発します。完成像と、そこまでの道のりを最初に見ておきましょう。

WordPress入門コースでは、できあいのテーマを「選んで着る」ところまで学びました。このコースはその先——テーマを自分で作る世界に踏みこみます。題材は、架空の雑貨店「シマエナガ堂」の企業サイト。実務のWeb制作で定番の構成を、1本の道すじで作り切ります。

WordPressWordPressってなに？WordPressそのものが初めての人は、先に入門コース（WordPress編）の最初からどうぞ

完成イメージ

コースを最後まで進めると、こんなコーポレートサイトが「自作テーマ」で動くようになります。

シマエナガ堂のトップページ。ヘッダーにナビゲーション、中央に「まいにちに、ふわっと。」のキャッチコピー、お知らせ一覧と商品カードが並ぶ
完成形のトップページ。これをテンプレートファイルの積み上げで作ります。

ページ構成は、企業サイトの「型」そのものです。

ページ中身作り方（担当ファイル）
トップヒーロー＋お知らせ＋商品front-page.php
会社案内固定ページpage.php
お知らせ一覧投稿の一覧・カテゴリ絞り込みhome.php／category.php
お知らせ詳細投稿の本文single.php
商品一覧・詳細カスタム投稿タイプarchive-•••.php／single-•••.php

この表の右列が「テンプレートファイル」。いまは呪文に見えても大丈夫——コースを通じて、1枚ずつ手で書いていきます。

学びの道のり（4章）

  1. じゅんび——Localで開発環境を作り、最小のテーマを起動し、テーマ用のPHPを最低限おぼえる
  2. テンプレート——テンプレート階層という「URLと担当ファイルの対応ルール」を学び、トップ・固定ページ・一覧・詳細を作る
  3. functions.php——CSSの正しい読みこみ、管理画面から編集できるメニュー、そしてカスタム投稿タイプとカスタムフィールドで「商品」を実装
  4. しあげ——テーマとしての体裁を整えて完成

はじめる前の持ち物チェック

  • HTMLとCSS——タグとセレクタが書ければOK（HTMLコース・CSSコース修了レベル）
  • WordPressの基本操作——投稿・固定ページ・テーマの意味がわかる（入門コースの内容）
  • PHPの知識——不要です。テーマに必要な最小限だけ、このコースの中で学びます

このレッスンのまとめ

  1. このコースの成果物はシマエナガ堂の企業サイトテーマ——お知らせ・会社案内・商品を備えた実務の型
  2. 道のりはじゅんび→テンプレート→functions.php→しあげの4章。テンプレートファイルを1枚ずつ手で書く
  3. PHPの事前知識は不要——HTML/CSSができれば入れるように作ってある

やってみよう：完成形を目に焼きつける

今回は出発前の地図の確認だけ。上の完成イメージをもう一度よく見て、次の2つを自分の言葉で言ってみましょう。

  1. このサイトには何種類のページがある？（トップ・会社案内・一覧・詳細・商品…）
  2. そのうち「日付つきで増えていく」のはどれ？「ずっと変わらない」のはどれ？

この区別（投稿と固定ページ）が、テンプレートを作り分ける地図になります。次のレッスンで開発環境を用意しましょう。