ウェディングサイト（デモサイト）／ WordPressオリジナルテーマ

さかい@Webコーダー
Webサイト制作 / コーディング

サイト情報

サイトURL　：　https://planetdesign.xsrv.jp/serenade-bridal/


制作概要

Figmaのデザインカンプからのコーディングの課題を元に、ロゴや配色、題材、画像、テキストを変え、半オリジナル化した架空の作品になります。

実績ページはカスタム投稿タイプで実装しました。

また、お知らせの記事ページでは最新記事を実装しており、アーカイブやカテゴリー別で記事を閲覧できるようにしております。

お問合せフォームでは自動返信メールの設定なども行っており、投稿ページではテーマユニットテストデータを用いてレイアウト崩れがないか確認しております。 

制作時期：2023年11月

制作期間：2週間

制作内容：FigmaのデザインカンプよりコーディングとWordPressオリジナルテーマ化

ページ数：11ページ

サイト構成：トップページ・私たちについて・サービス紹介・お知らせ一覧・お知らせ詳細・実績紹介一覧・実績紹介詳細・お問い合わせ・お問い合わせ確認・お問い合わせ完了・404ページ

使用ツール：VScode・Figma・Local・WordPress

使用スキル：WordPress・HTML・CSS・Sass・JavaScript・jQuery


実装した機能・工夫した点

・トップページの「Works（実績）」「News（お知らせ）」はサブループを用いて実装

・パンくずリストは（Breadcrumb Nav ）で実装 

・Works（実績）ページはカスタム投稿タイプ（Custom Post Type Ui ）で実装 

・Works（実績）とNews（お知らせ）の詳細ページでは、記事タイトルをh1タグで出力するように実装（その他のページではヘッダーロゴをh1タグで出力）

・お問い合わせフォーム（Contact Form 7）ではバリデーションと自動返信メール等の設定も実装  

・Contact Form 7 Multi-Step Forms を用いて、お問い合わせ確認とお問い合わせ完了ページを実装


使用した主なWordPressのプラグイン

・Advanced Custom Fields（カスタムフィールド）

・All-in-One WP Migration（本番環境への移行）

・Breadcrumb NavXT（パンくずリスト）

・Contact Form 7（お問い合わせフォーム）

・Contact Form 7 Multi-Step Forms（お問い合わせ確認・お問い合わせ完了）

・Custom Post Type UI（カスタム投稿タイプ）

・EWWW Image Optimizer（メディアライブラリの画像圧縮）

・SEO SIMPLE PACK（内部SEO対策）

・SiteGuard WP Plugin（セキュリティ対策）

・Wordfence （セキュリティ対策）

・UpdraftPlus（バックアップの作成）



WEBSITE