practice
企業ホームページ
01
Information
- 制作種別
- practice
- 制作期間
- 4週間
- 使用技術
- HTML / CSS / JavaScript / WordPress / PHP
- 担当範囲
- HTML / CSS(SCSS) / JavaScriptによるコーディング、WordPressオリジナルテーマ開発、レスポンシブ対応
02
Overview
企業のコーポレートサイトを想定し、WordPressのオリジナルテーマとして制作しました。
トップページをはじめ、会社概要、お問い合わせ、ブログ、制作実績ページを実装しています。管理画面から記事や制作実績を更新できるようにし、運用しやすいサイト構成を意識しました。
また、カスタム投稿・カスタムタクソノミー・カスタムフィールドを活用し、コンテンツを用途ごとに管理できる設計としています。検索機能や人気記事、新着記事、ページネーションなど、実際の企業サイトを想定した機能も実装しました。
03
Full Page
04
Coding Point
実装で意識したこと
・WordPressオリジナルテーマとして一から構築し、テンプレートをページごとに分割して保守性を高めました。
・カスタム投稿「制作実績」とカスタムタクソノミーを実装し、ジャンルごとの絞り込みや管理ができるようにしました。
・トップページではWP_Queryを利用して最新記事や制作実績を動的に取得し、更新内容が自動で反映される構成にしました。
・検索フォーム、人気記事、新着記事、ページネーションなどを実装し、ユーザーが目的の情報へアクセスしやすいUIを意識しました。
・共通パーツはテンプレート化し、コードの重複を減らすことで保守性・再利用性を高めました。
05
Problem & Solution
PROBLEM
苦戦した点
WordPressでは、静的HTMLとは異なり、テンプレート階層やループ処理、カスタム投稿・カスタムフィールドなど複数の機能を組み合わせて実装する必要がありました。
特に、トップページ・制作実績・ブログで取得するデータが異なるため、それぞれに適したWP_Queryの使い分けやテンプレート設計に苦戦しました。
SOLUTION
解決方法
WordPressのテンプレート階層を理解し、ページごとに役割を整理して実装を進めました。
共通部分はテンプレート化し、WP_Queryやテンプレートタグを活用して必要なデータのみ取得するよう設計しました。また、管理画面から入力した情報が正しく反映されることを確認しながら、一つひとつ機能を実装して完成させました。
06