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

最終更新日

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/

パーマリンクの設定

パーマリンクの設定は、WordPress管理画面の「設定」→「パーマリンク設定」から行います。
今回は投稿名を使用するので、共通設定のラジオボタンで「投稿名」を選択します。

以上で、サイト設計は終了です。
次は、WordPresssサイトのテーマディレクトリの作成を行っていきます。

次の記事 >

< 前の記事

【HTMLサイトをWordPress化しよう】