【WordPress新規制作 練習課題】中級編:ストアサイト(インテリア)

練習課題

課題内容
南青山で家具やインテリアの企画、販売を行う会社から、製品を紹介するためのWebサイトを制作してほしいと依頼がありました。 オリジナルの製品を一覧で見せられるよう、WordPressにてグリッドレイアウトでコーディングを行います。
設定単価
WordPressサイト制作:20万円
・トップページ
・Productsページ
・Products詳細ページ
・Aboutページ
・Companyページ
素材
学習用の素材をダウンロードする
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています

WordPressサイトを制作しよう!

下記の「デザインカンプ」と「コーディング仕様」をもとに、WordPressのサイト制作にチャレンジしてみましょう!

デザインカンプ

▼XDデータ
XDデータをダウンロードする

▼PC表示(トップ)

▼PC表示(Products)

▼PC表示(Products詳細)

▼PC表示(About)

▼PC表示(Company)

 

▼スマホ表示(トップ)

▼スマホ表示(Products)

▼スマホ表示(Products詳細)

▼スマホ表示(About)

▼スマホ表示(Company)

コーディング仕様

コンテンツ幅
全体の最大幅は1360pxで横のパディングは40pxです。
About、Companyページの最大幅は600pxです。
商品詳細ページの最大幅は800pxです。
ハンバーガーメニュー
ハンバーガーメニューのデザインと動きについては、デモサイトを参照してください。
製品情報登録
製品情報を全て投稿画面から登録します。(タイトル、アイキャッチ、本文)
カテゴリー登録
productsカテゴリを作成し、各製品情報に設定します。
トップページ
投稿画面で登録された製品情報を新着順に表示します。
1ページに表示する件数を管理画面で設定します。
「View More」のリンクをクリックすると、Products一覧ページへ遷移します。
Productsページ
基本的にはトップページと同じですが、一覧下にページネーションをつけてページ遷移できるようにします。
Products詳細ページ
投稿画面で登録された製品情報を表示します。
About、Companyページ
管理画面から編集できるように、固定ページで登録します。
Contact
メニューの「CONTACT」リンクをクリックするとメールが起動します。
レスポンシブ
ブレークポイントは900pxです。

ヒント(レイアウト構成)

コーディングで悩んだ場合は、下記のレイアウト構成の組み立て方を参考にしてみてください。
サイト全体と各パーツのレイアウト構成について解説しています。

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

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

ソースコード

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

ソースコードはこちら

デモサイト

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

デモサイトはこちら

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

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

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

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

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

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