WordPressを用いた英会話スクールのデモサイト

清水凌希
フリーランスWebコーダー

サイト情報

※basic認証をかけているためお手数ですが、URLクリック後ユーザー名とパスワードのご入力をお願いいたします。

サイト　　：　https://www.kiyo.site/

ユーザー名：　kiyo_admin

パスワード：　engress-1

_____________________________________________________

制作概要

制作時期：2023年5月

制作時間：総計約80時間

制作内容：Adobe XDからコーディング、WordPressオリジナルテーマを制作

ページ数：8ページ

サイト構成：トップ（ホーム）/ お知らせ / お知らせ一覧 / ブログ / ブログ一覧 / コース・料金 / お問い合わせ（資料請求） / お問い合わせ完了

使用ツール：VScode、Adobe XD、Local

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

_____________________________________________________

実装した機能、工夫したこと

・トップページの事例とよくある質問はカスタムフィールド (ACF)でクライアントさまからも変更可能

・固定ページの料金表部分もACFで実装。且つ786px以下ではJavaScriptライブラリのscroll-hint.jsを使用し横スクロールのヒントを表示

・jQuery を用いてドロワーメニュー、アコーディオンパネルを実装

・お知らせはカスタム投稿タイプ(Custom Post Type Ui)で実装

・パンくずはBreadcrumb Navで実装

・記事ページでは関連記事やおすすめ記事を実装し、SNSで記事を共有可能

・お問合せフォーム(MW WP Form)では自動返信メールの設定も完了

・公式テーマユニットテストデータを用いて動的処理による表示崩れがないか確認

_____________________________________________________

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

・AddToAny Share Buttons (シェアボタン)

・Advanced Custom Fields

・All-in-One WP Migration

・Breadcrumb NavXT

・Custom Post Type Permalinks

・Custom Post Type UI

・MW WP Form

・WP-PageNavi

_____________________________________________________

トップページ（pc）外観

_____________________________________________________

トップページ（sp）外観


WEBSITE