【HTMLからWordPress化の手順】中級編:ストアサイト(インテリア)

WordPress化の手順

課題のHTMLサイトをWordPress化する簡単な手順です。

①:テーマディレクトリを作る

テーマ用のディレクトリを任意の名前で作成します。

デモサイトの場合は、「fd」という名前で作成しています。

②:HTMLファイルをWordPressファイルに置き換える

まずは、既存のHTMLファイルをコピーしてWordPressファイルに置き換えます。

HTML WordPress 備考
index.html header.php
index.php
footer.php
3ファイルに分割する
products.html
products2.html
category.php カテゴリ一覧として表示する
about.html
company.html
page.php 固定ページとして表示する
item1~item16.html single.php 投稿ページとして表示する
css/style.css style.css そのままコピー
img/ img/ 画像はディレクトリごとそのままコピー
但し、item1~item16.jpgは、投稿ページのアイキャッチとして設定するので削除
js/main.js js/main.js そのままコピー

③:ファイルの中身をWordPressの記述に書き換える

次に、ファイルの中身をWordPressの記述に書き換えます。

書き換えるポイントは下記の通りです。

  • style.css に「Theme Name」を記載
  • titleの取得方法を修正
  • descriptionの取得方法を修正
  • 画像等ディレクトリの取得方法を修正
  • URLの取得方法を修正
  • wp_head()とwp_footer()を追加
  • トップページとProductsページの製品情報は、投稿記事から取得して表示するよう修正
  • 詳細情報は、投稿記事から取得して表示する。「価格」「サイズ」「カラー」「素材」はカスタムフィールドを使用して取得するよう修正

④:functions.phpの作成

functions.phpを新規に作成し、下記の処理を記述します。

  • style.cssの読み込み
  • main.jsの読み込み
  • 投稿ページのアイキャッチを有効化
  • ページネーションを作成

⑤:記事を投稿する

WordPressの管理画面から、一覧に表示する記事を投稿します。

投稿画面では下記の設定を行います。

  • タイトル
  • 本文
  • アイキャッチ画像
  • カテゴリ
  • スラッグ
  • カスタムフィールド

カスタムフィールドの使用方法は下記を参考にしてください。
カスタムフィールドの使用方法

⑥:固定ページを作成する

WordPress管理画面の固定ページから、AboutページとCompanyページを作成します。

⑦:一覧の表示件数を設定する

WordPress管理画面で、一覧ページの最大表示件数を設定します。

コーディング練習メニューに戻る

他のコーディング練習にチャレンジする

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習