【WordPress コーディング練習】中級編：ストアサイト（インテリア）／グリッドレイアウト

目次

• コーディング練習課題
  • 課題内容
  • 素材
  • デザインイメージ
• コーディングをはじめよう！
  • デザインカンプ（XDデータ）
  • コーディング仕様
  • ヒント（レイアウト構成、コーディングポイント）
  • コーディング例（ソースコード）

コーディング練習課題

課題内容

南青山で家具やインテリアの企画、販売を行う会社から、製品を紹介するためのWebサイトを制作してほしいと依頼がありました。 オリジナルの製品を一覧で見せられるよう、グリッドレイアウトでコーディングを行います。

素材

学習用の素材をダウンロードする
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています

デザインイメージ

▼PC表示（トップ）

▼PC表示（Products）

▼PC表示（Products詳細）

▼PC表示（About）

▼PC表示（Company）

 

▼スマホ表示（トップ）

▼スマホ表示（Products）

▼スマホ表示（Products詳細）

▼スマホ表示（About）

▼スマホ表示（Company）

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

下記の「デザインカンプ」と「コーディング仕様」をもとに、WordPressサイトを制作してみましょう！
特に指示のない所は、ユーザビリティを考慮しながら自分で考えてコーディングしてみましょう！

Adobe XD デザインカンプ

・WEB版
・ダウンロード版
※ダウンロード版のファイルを開くには、Adobe XDのインストールが必要です。
※画像はグレー画像に置き換えています。

コーディング仕様

コンテンツ幅

全体の最大幅は1360pxで横のパディングは40pxです。
About、Companyページの最大幅は600pxです。
商品詳細ページの最大幅は800pxです。

ハンバーガーメニュー

ハンバーガーメニューのデザインと動きについては、デモサイトを参照してください。

トップページ

投稿記事を新着順に8件表示します。表示するのは、アイキャッチ、タイトル、価格です。価格は投稿画面で編集できるよう、カスタムフィールドで設定してみましょう。
「View More」のリンクをクリックすると、Products一覧ページへ遷移します。

Productsページ

投稿記事を新着順に12件表示します。一覧下にページネーションをつけてページ遷移できるようにします。

Products詳細ページ

投稿ページのアイキャッチ、タイトル、本文を表示します。金額、サイズ、カラー、マテリアルは投稿ページで設定したカスタムフィールドの値から取得して表示します。

Aboutページ

固定ページで編集できるようにします。

Companyページ

固定ページで編集できるようにします。

Contactページ

メニューの「CONTACT」リンクをクリックするとメールソフトが起動します。

レスポンシブ

ブレークポイントは900pxです。

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

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

コーディング例（ソースコード）

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