コーディング実績５：英語学習スクール【XDデザインデータからコーディング＆WordPress化】

目次

1. サイトURLと認証パスワード

2. 使用しているアニメーション機能の紹介（Javascript / jQuery）

3. コーディングで工夫したポイント（HTML / CSS）

4. WordPressで実装した機能一覧

1. サイトURLと認証パスワード

下記URLからご確認いただけます。Basic認証をかけていますので、ユーザーIDとパスワードをご入力くださいませ。

https://portfolio-5-toefl.arihara-yuki.com/
ユーザーID：arihara-test-review
パスワード：arihara-test-review-pass

2. 使用しているアニメーション機能の紹介（Javascript / jQuery）

• ハンバーガーメニューのクリック時、要素が右からスライドイン（アイコンも変化）
• スクロールでヘッダーの背景色が半透明化
• スクロールで要素がふわりとスライドアップ
• Q & Aセクションのアコーディオン（開閉時にアイコンが変化）
• 料金体系のプラン表がレスポンシブ時に横にスクロールする（スクロールヒント付き）

• プライバシーポリシーの内容をモーダルウィンドウで表現

3. コーディングで工夫したポイント（HTML / CSS/PHP）

■トップページ

• ブログタイトルなど、テキストが自動出力される場所には文字数制限をかけている。超えた場合は「...」と表示。
• サムネイルはどんなサイズでもアスペクト比をキープし、規定の幅からはみ出ない
• 記事投稿で設定したカテゴリーがサムネイル左上にラベルとして表示
  

■ブログの個別投稿ページ

• 同一カテゴリーの記事が「関連記事」としてランダムに３件表示される
• ブログ記事にタグ「pickup」を入力すると、「おすすめの記事」として表示される
• カテゴリーごとに一覧ページが自動的に作られる。一覧ページへはサイドバーのカテゴリーから遷移可能。
• テーマユニットテストデータで挙動を確認済み。予期せぬ投稿でもデザインが崩れないように設計

• サムネイル画像が未設定の場合、デフォルトで設定した画像が表示される（本案件ではno image画像とした）

■サイト全体の設定

• サイトタイトルやサイトディスクリプションを設定し、SEO対策

4. WordPressで実装した機能一覧

• お知らせをカスタム投稿タイプで実装（CPT UIを使用）
• トップページの事例セクションは写真やテキストをカスタムフィールド（ACF）で変更可能
• パンくずはBreadcrumb navXTを使用
• SNS共有リンクを「wp_sosical_bookmarking_light」で設置
• MW WP FORMを使用したお問い合わせフォーム。全項目を入力しなければ送信できない仕様で、送信が完了すれば別ページに遷移する。さらに自動返信メールが入力したアドレスに送られる。