【WordPress コーディング練習】中級編:ストアサイト(インテリア)/グリッドレイアウト

目次

コーディング練習課題

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

▼PC表示(トップ)

▼PC表示(Products)

▼PC表示(Products詳細)

▼PC表示(About)

▼PC表示(Company)

 

▼スマホ表示(トップ)

▼スマホ表示(Products)

▼スマホ表示(Products詳細)

▼スマホ表示(About)

▼スマホ表示(Company)

コーディングをはじめよう!

下記の「デザインカンプ」と「コーディング仕様」をもとに、WordPressサイトを制作してみましょう!
特に指定のない箇所は、自分でベストな仕様を考えてコーディングしてみましょう!

デザインカンプ
▼XDデータ
Windows用:XDデータをダウンロードする
Mac用:XDデータをダウンロードする
※ファイルを開くには、Adobe XDのインストールが必要です。
コーディング仕様1(デザイン)
コンテンツ幅
全体の最大幅は1360pxで横のパディングは40pxです。
About、Companyページの最大幅は600pxです。
商品詳細ページの最大幅は800pxです。
ハンバーガーメニュー
ハンバーガーメニューのデザインと動きについては、デモサイトを参照してください。
トップページ(index.html)
プロダクトの一覧は、グリッドレイアウトでPC時は4列、スマホ時は2列で表示します。
「View More」のリンクをクリックすると、Products一覧ページへ遷移します。
Productsページ(products.html)
基本的にはトップページと同じですが、一覧下にページネーションをつけてページ遷移できるようにします。
Products詳細ページ(item1.html)
HTMLサイトの場合、各製品毎にページを作りますが、今回は中身の構成が同じなので1ページだけ制作します。(※WordPressサイトの場合、テンプレートファイルで共通化します。)
画像とテキストを横並びに配置させ、一番下にProductsページに戻るためのリンク「Back To Products」を設置します。
Companyページ(company.html)
Google Map を埋め込み、CSSのプロパティでグレースケールにします。
Contact
メニューの「CONTACT」リンクをクリックするとメールが起動します。
レスポンシブ
ブレークポイントは900pxです。
コーディング仕様2(WordPress、その他動作)
製品情報登録
製品情報を全て投稿画面から登録します。(タイトル、アイキャッチ、本文)
カテゴリー登録
productsカテゴリを作成し、各製品情報に設定します。
トップページ
投稿画面で登録された製品情報を新着順に表示します。
1ページに表示する件数を管理画面で設定します。
Products詳細ページ
投稿画面で登録された製品情報を表示します。
About、Companyページ
管理画面から編集できるように、固定ページで登録します。

ヒント(レイアウト構成、コーディングポイント)

コーディングで悩んだ場合は、下記の「レイアウト構成」と「コーディングポイント」を参考にしてみてください。

レイアウト構成

サイト全体と各パーツのレイアウト構成について解説しています。

コーディングポイント

WordPressのコーディングポイントについての簡単なメモです。

コーディングポイント

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

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

ソースコード

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

ソースコードはこちら

デモサイト

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

デモサイトはこちら

関連記事