Portfolio

Web Site

No.002

モックアップ画像

ABC英会話スクール

制作日 2024年 5月~   html + wordpress

制作期間
構成・デザイン等:約3週間
コーディング:約 1ヵ月半
(ポートフォリオ掲載用 架空サイト)
使用言語
HTML、CSS、jQuery、PHP
使用ツール
Photoshop、Illustrator、XD、
VS Code、WordPress、Local by Flywheel
ターゲット
20代〜50代男性・女性
ページ構成

【HTML】

  • トップページ
  • お問い合わせ
  • 無料体験レッスンお申込みフォーム
  • プライバシーポリシー
  • お知らせ一覧(1)
  • お知らせ記事(1)
  • カテゴリー(6)

【HTML + WordPress】

  • トップページ
  • お問い合わせ
  • 無料体験レッスンお申込みフォーム
  • プライバシーポリシー
  • お知らせ一覧 (3) index.php
  • カテゴリー (6) archive.php
  • お知らせ記事 (20) single.php (WordPress投稿記事)
制作時のポイント

JavaScriptプラグインの「Swiper」を3カ所使用(FirstView、School、Topics)、 お問い合わせフォーム(無料体験お申し込み)ページにjQueryプラグインのカレンダー「Datepicker」を使用。
お知らせ一覧・記事をWordPressで作成できるようにし、メインサイトのトップページに新着情報を掲載!

制作内容
  • カンプ作成(XD)
  • レスポンシブデザイン
  • スマホメニューとボタン作成
  • トップボタンの実装
  • スムーススクロール
  • ページ内リンクナビゲーション
  • keyframeアニメーション
  • パンくずリスト
  • タブ切り替え
  • アコーディオン
  • スクロールエフェクト
  • 横スクロール
  • 波型背景作成(svg)
  • svgモーフィング
  • background-attachemnt(固定背景)
  • お問い合わせフォーム(エラーチェック付き jQuery)
  • お申込みフォーム(エラーチェック付き jQuery)
  • プラグイン「datepicker」の使用(カレンダー)
  • プラグイン「Swiper」の使用(スライダー)
  • favicon、ogp画像作成
  • Remix Icon、Google Fontsの使用
  • Web用パーツ作成
  • 使用画像の選定・調整
  • お知らせ新着記事掲載(wordpress)

  • ーー WordPress(お知らせ一覧・記事) [php] ーー
  • ▼ 使用プラグイン
  • WP Multibyte Patch
    (日本語バグ修正)
  • SEO SIMPLE PACK
    (SEO、ogp、etc)
  • Yoast Duplicate Post
    (記事の複製)
  • Category Order and Taxonomy Terms Order
    (記事の移動)
  • Breadcrumb NavXT
    (パンくずリスト)
  • WP-PageNavi
    (ページネーション)
  • All-in-One WP Migration
    (データ移行)
  • SiteGuard WP Plugin
    (ログイン等セキュリティ)
  • All In One WP Security
    (セキュリティ)

Comp

カンプ
カンプ

WordPress 化

  • Local by Flywheelを使用してローカル環境で作成。
  • 静的サイト(html)に新着記事を表示させ、お知らせ記事をWordPressで編集できるようにした。
  • お知らせ一覧ページのコンテンツをテンプレートファイルとして分けることで、他ページでも使い回せるようにした。
  • メインサイトのトップページに新着記事が表示できるように、phpのコードをhtmlで使えるように「.htaccess」で設定した。
  • index.php (お知らせ一覧ページ)

  • single.php (個別投稿記事)

  • archive.php (カテゴリー・年別ページ)

  • parts-blogposts.php (パーツページ)

  • header.php

  • footer.php

  • sidebar.php

  • functions.php

  • style.css ( index.phpと同じ階層 お知らせ用CSS )

  • script.js(メインサイトのjs お知らせ使用部分抜粋)

  • index.html(メインサイトのphpコード使用部分抜粋)

  • .htaccess

↑