【HTMLサイトをWordPress化しよう】②サイト設計編

最終更新日 2024.06.09

WordPress化するためのサイト設計を行っていきます。
必須の設計は下記の3つです。

それでは、今回作るストアサイトの設計を行っていきます。

画面設計

現行のHTMLファイルを、どのようにWordPressファイルに置き換えるのかを画面をベースに一覧に書き出します。

今回制作するサイトのファイル一覧は下記の通りです。

画面	HTMLファイル	WordPressファイル	備考
共通（ヘッダー、フッター）	index.html	header.php footer.php	index.htmlの中身を抜き出す
トップページ	index.html	index.php	index.htmlの中身を抜き出す
Products一覧	products.html products2.html	category.php	カテゴリ一覧
Aboutページ	about.html	page.php	固定ページ
Companyページ	company.html	page.php	固定ページ
詳細ページ	item1～item16.html	single.php	投稿ページ
共通（CSS）	css/style.css	style.css	そのままコピー
共通（JS）	js/main.js	js/main.js	そのままコピー
共通（画像）	img/	img/	そのままコピー。（但し、アイキャッチとして設定するものは削除）
共通処理		functions.php	新規作成

既存のHTMLサイトの中から、カテゴリ化するデータを洗い出します。

随時、追加していくデータで一覧画面を作りたいようなデータがカテゴリ化に向いています。例えば、ブログやニュース、商品データ等です。
後は、WordPressサイトの場合、グローバルナビゲーションで使用されているメニューはカテゴリ化されていることが多いです。

今回は、Products一覧に表示する製品データをカテゴリとして登録します。

カテゴリは子カテゴリを作って階層化することもできますが、今回はProductsカテゴリのみで子カテゴリは使用しません。

カテゴリ名	スラッグ	カテゴリ種別
Products	products	親

パーマリンクは、Webサイト内の各ページのURLです。

HTMLサイトの場合は、ディレクトリとファイルがそのままURLになりますが、WordPressの場合は、URLが動的に生成されるので、始めにどのようなURL構成にするのかを決めておきます。

今回は、WordPressの初期設定である「投稿名」をそのまま使用します。
投稿ページで指定したスラッグがそのままURLとして表示されます。

カテゴリ一覧は、WordPressのルールにのっとって自動で生成されます。

各ページのURLは下記の通りです。

ページ	URL
トップ	http://fd.local/
Productsページ	http://fd.local/category/products/
Productsページ（2ページ目） ※以降も同様	http://fd.local/category/products/page/2/
詳細ページ	http://fd.local/投稿名/
Aboutページ	http://fd.local/about/
Companyページ	http://fd.local/company/