【HTMLサイトをWordPress化しよう】①完成イメージ確認編

学習の対象者

学習の対象者は下記の方です。

• WordPressの基本的な操作を理解している方
• PHPの基本文法（変数、if文、while文 等）を学習済みの方

完成イメージ

作るサイトの完成イメージはこちらです。

WordPressサイトの仕様

今回、WordPress化するサイトの仕様は下記の通りです。

トップページ、Productsページ

投稿画面で登録された製品情報を新しいものから順に表示します。

1ページの表示件数は、トップページが8件、Productsページが12件です。

Productsページは12件ごとに次のページへ遷移できるようにします。

詳細ページ

投稿画面で登録された製品情報を表示します。

金額、サイズ、カラー、マテリアルについては、カスタムフィールドを使用します。

About、Companyページ

管理画面から編集できるように、固定ページで登録します。

ローカル環境の構築

ローカル環境でWordPressサイトを作るための環境構築がまだの方は、こちらを参考に環境構築を行ってください。

今回はストアサイトを作るので、WordPressのサイト名の箇所は「fd」に置き換えてください。

コーディングを仕事にしていきたい方へ

Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。

• ポートフォリオに載せる実績がない・・・
• 実務経験がゼロ・・・
• 案件獲得に不安がある・・・

1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。

模写の次に何を学ぶべきか迷っていませんか？

以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。

• 模写はできるようになってきたけど、実務に通用するか不安
• ポートフォリオに悩んでいる・載せる実績がない
• 案件に挑戦したいけど、自信がなくて一歩踏み出せない

今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。

現場レベルのスキルを身につけたい方へ

現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。

本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。

• 第1章【入門編】プロフィールサイト〜フレックスボックス
• 第2章【初級編】ブランドサイト〜ポジション
• 第3章【中級編】サービスサイト〜複数ページ
• 第4章【上級編】カフェサイト〜複数レイアウト
• 第5章【応用編】ランディングページ〜動きのあるWebサイト
• 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作

現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。