フィットネスジムサイト（デモサイト）／ WordPressオリジナルテーマ

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

サイト情報

サイトURL　：　https://planetdesign.xsrv.jp/fit-zone/


制作概要

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

TOPページの事例部分とコース・料金ページの料金部分はカスタムフィールドでクライアント様からも変更しやすくしており、お知らせページはカスタム投稿タイプで実装しました。

また、記事ページでは関連記事やおすすめ記事を実装しており、記事をSNSでも共有できるようにしております。
お問合せフォームでは自動返信メールの設定なども行っており、投稿ページではテーマユニットテストデータを用いてレイアウト崩れがないか確認しております。 

制作時期：2023年10月

制作期間：2週間

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

ページ数：8ページ

サイト構成：トップページ・お知らせ一覧・お知らせ詳細・ブログ一覧・ブログ詳細・コース料金・お問い合わせ・お問い合わせ完了

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

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


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

・トップページの成功事例はクライアント様からも変更ができるように、カスタムフィールド（ACF）で実装

・トップページの「ブログ」「お知らせ」はサブループを用いて、3件まで表示するように実装

・お知らせページはカスタム投稿タイプ（Custom Post Type Ui ）で実装

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

・ブログの詳細ページでは、同カテゴリーを含む記事を関連記事に表示し、「pickup」タグを含む記事を、おすすめ記事に表示するように実装

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

・コース料金ページの料金表は横スクロール対応（scroll-hint.js を用いてスクロールのヒントを表示するように実装）

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


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

・AddToAny Share Buttons（シェアボタン）

・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