【HTMLからWordPress化 練習課題】中級編:ストアサイト(インテリア)

練習課題

前提
HTMLサイトの制作がまだの方は、こちらからHTMLサイトの制作を行ってください。
【HTML/CSS コーディング練習】中級編:ストアサイト(インテリア)/グリッドレイアウト
課題内容
先日、HTMLサイトを納品したインテリア会社から、製品の追加、更新、削除を自分たちで行いたいため、サイトをWordPress化して欲しいとの連絡がありました。
既存のHTMLサイトをWordPressに置き換える対応を行います。
設定単価
WordPress化対応:5万円
素材
既存サイトの素材をそのまま使用します。

WordPress化してみよう!

下記のコーディングポイントを参考に、既存のHTMLサイトをWordPress化してみましょう。

コーディングポイント

WordPress化するにあたってのコーディングポイントは下記の通りです。

製品情報登録
製品情報を全て投稿画面から登録します。(タイトル、アイキャッチ、本文)
カテゴリー登録
productsカテゴリを作成し、各製品情報に設定します。
トップページ、Productsページ
投稿画面で登録された製品情報を新着順に表示します。
1ページに表示する件数を管理画面で設定します。
詳細ページ
投稿画面で登録された製品情報を表示します。
About、Companyページ
管理画面から編集できるように、固定ページで登録します。

ヒント(WordPress化の手順)

WordPress化で悩んだ場合は、下記のWordPress化の手順を参考にしてみてください。HTMLサイトをWordPress化する流れについて解説しています。

解答例(ソースコード、デモサイト)

コーディングが完了したら、下記の「ソースコード」と「デモサイト」を参考に、自分の作ったコードとサイトをチェックしてみてください。

ソースコード

解答の1例です。コーディングの仕方は1パターンだけではないので、あくまでも参考として自分のソースコードと比較しながらチェックしてみてください。

ソースコードはこちら

デモサイト

デモサイトと自分で作成したサイトを比較して、デザインや動きなどをチェックしてみてください。

デモサイトはこちら

コーディング練習 課題一覧

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

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

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

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

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