HTMLサイトをWordPress化しよう

HTMLサイトをWordPress化する練習です。

今回使用するHTMLサイトは、コーディング練習【中級編】のストアサイトです。
HTMLデモサイトはこちら

WordPress化については、サイトの構成によって作るファイルが異なりますので、大まかな流れだけでもつかんでいただければと思います。

全10偏にわけて解説していきますので、HTMLサイトをWordPress化する手順を知りたいという方は、ぜひ最後までご覧になってみてください。

解説の内容が、「WordPressでオリジナルサイトを作ろう」と重複している箇所については、説明を一部省略していますので詳しくはそちらをご覧になってください。

完成版のテーマファイル
テーマファイルのソースコードです。

完成版のデモサイト
WordPressデモサイトです。

①完成イメージ確認編

【HTMLサイトをWordPress化しよう】
完成イメージと作るサイトの仕様について確認します。

②サイト設計編

WordPress化のためのサイト設計を行います。
「画面設計」「カテゴリ設計」「パーマリンク設計」の3つです。

③ディレクトリ作成編

テーマディレクトリを作成した後、基本ファイルの作成とテーマの切り替えを行います。

④ファイル分割編

index.htmlからヘッダーとフッターを分割します。

⑤ヘッダー編

ヘッダー(header.php)のコーディングを行います。

⑥フッター編

フッター(footer.php)のコーディングを行います。

⑦トップページ編

トップページのコーディングを行います。
記事の新着一覧を表示します。

⑧カテゴリ一覧編

カテゴリ一覧(category.php)のコーディングを行います。
カテゴリ名を取得し、投稿記事の一覧を表示します。

⑨投稿ページ編

投稿ページ(single.php)のコーディングを行います。
各記事の詳細情報を表示します。

⑩固定ページ編

固定ページ(page.php)のコーディングを行います。
タイトル、本文、アイキャッチ等の表示を行います。