Figmaデザインカンプからのコーディング・WordPress構築 | 架空のコーポレートサイト

OVERVIEW

1年前に静的サイトとしてコーディングしたコーポレートサイトを、WordPress化しました。3つの投稿タイプとお問い合わせフォームを設置しています。

YEAR 2022

URL https://portfolio.rea1i2e.net/p_2022-11-29codeups02/

ユーザー名 testuser

パスワード 0324

■CSS設計を学ぶための講座「CodeUps」で提供されているデザインカンプを利用しました。架空のコーポレートサイトです。
・CodeUps https://codeups.jp/codeups/ 

■制作について
・1年前にCSS設計を学ぶためにコーディングして制作した静的サイトを、WordPress化しました。
・WordPress開発環境にはLocalを活用しました
・トップページでは3つの投稿タイプの新着記事をそれぞれ表示しています。
・1つ目はデフォルト投稿タイプを用いたお知らせです。最新のお知らせを1件表示しています。

・2つ目の投稿タイプは、制作実績です。制作実績を投稿するために、カスタムフィールドを作成しました。制作実績の画像を任意の枚数投稿できるようにしています。その他、制作のポイント・コーディングのポイント・その他の3つのフィールドに分けて、テキストで説明を加えることができるようになっています。トップページでは、最新の制作実績の3件から、1枚ずつ画像を抽出し、スライダーを使って表示しています。制作実績詳細のページでは、投稿した任意の枚数の画像をサムネイル付きのスライドで表示させています。


・3つ目の投稿タイプは、ブログです。トップページでは、最新の3件をカード型のリンクとして表示しています。3日以内に投稿されたものについては、カードの左上に”New"のラベルが表示されるようになっています。

・3つの投稿タイプの詳細ページでは、表示中の投稿に関連のある投稿(カテゴリ・タームが同じもの)を最大で4枚までランダムで表示しています。

・お問い合わせページでは、プラグインのContact Form 7を利用して、フォームを設置しています。フォーム送信後にはサンクスページに遷移するように設定しています。


WEBSITE