この制作課題では、ここまで作ったテンプレートを1つのオリジナルWordPressサイトとして完成させます。見た目だけでなく、管理画面から更新できることが完成条件です。
制作課題で完成させるもの
制作課題では、要件整理から検証までを順番に進め、管理画面から更新できるサイトを完成させます。
パソコンでは、メインメッセージ、CTA、投稿一覧、ナビゲーションを見渡せる状態にします。
スマートフォンでも、読む順番と主要な操作を保ったまま1列へ切り替えます。
この課題では、管理画面から内容を更新できるWordPressサイトを1つ完成させます。見た目を再現するだけでなく、投稿追加、メニュー変更、例外表示まで含めて運用できる状態を目指します。
- トップページ
- 会社またはサービスを説明する固定ページ
- 投稿一覧ページと投稿詳細ページ
- お問い合わせへの導線
- 管理画面から変更できるナビゲーションメニュー
- 検索結果と404ページ
制作要件
次の図では、「制作要件」の仕組みや関係を確認できます。
- トップページ、固定ページ、投稿一覧、投稿詳細、404を用意する
- サイト名、メニュー、投稿タイトル、本文、アイキャッチ画像をWordPressから取得する
- ヘッダーとフッターをテンプレートへ分ける
- CSSとJavaScriptを
functions.phpから読み込む - 320px程度から大きな画面まで表示を確認する
- 出力する値を文脈に合わせてエスケープする
- 完成状態をGitへコミットする
制作前に要件を整理する
最初に、ページ一覧と各ページの目的を表へまとめます。誰が何を更新するかを決め、文章、画像、投稿、メニューのうち、管理画面から変更する内容を明確にします。
次の図では、「制作前に要件を整理する」の仕組みや関係を確認できます。
要件が曖昧なままテンプレートを増やすと、後から投稿と固定ページの構成を変更することになります。URL、コンテンツの種類、必要な表示状態を先に決めてください。
実装する順序
次の図では、「実装する順序」の仕組みや関係を確認できます。
- ローカルWordPressを作り、基本設定と確認用コンテンツを用意する
- 静的HTMLの共通部分とページ固有部分を分ける
- テーマの最低限のファイルを作り、有効化する
- CSSとJavaScriptをenqueueする
- ヘッダー、フッター、共通パーツを分ける
- 固定ページ、投稿一覧、投稿詳細を動的な内容へ置き換える
- メニュー、画像、ページ送り、例外表示を実装する
- 全ページを検証し、エラーと表示崩れを修正する
Gitで作業単位を残す
テーマが表示できた、共通部分を分割した、投稿一覧が完成した、という確認可能な単位でコミットします。途中で大きく崩れたときも、どこまで動いていたか比較できます。
認証情報、データベースのパスワード、ローカル専用設定、バックアップファイルはGitへ含めません。コミット前に差分と対象ファイルを必ず確認します。
課題の完了条件
- 管理画面から追加した固定ページと投稿が正しいテンプレートで表示される
- 投稿を増減しても一覧とページ送りが動く
- 画像なし、検索結果0件、存在しないURLでも表示が破綻しない
- メニューを管理画面で変更できる
- スマートフォンからパソコン幅まで横スクロールが発生しない
- キーボードで主要なリンクとメニューを操作できる
- PHP、JavaScript、Networkに未解決のエラーがない
- 第三者がREADMEを読んでテーマの目的と確認方法を理解できる
すべてを一度に実装せず、ページごとに「データを登録する、表示する、例外状態を試す」の順で完成させます。最後にサイト全体を通して確認し、STEP 05の公開準備へ進みます。
STEP 04の到達点
これで、自分のパソコン上に管理画面から更新できるWordPressサイトを制作できました。STEP 05では、ファイルとデータベースを本番サーバーへ移します。