架空ハンバーガーサイト

WordPress化までの流れ

静的コーディング

XDのデザインデータをいただき、トップページ、アーカイブページ、アーカイブサーチページ、固定ページ、投稿ページの静的コーディングを行いました。

レスポンシブ対応

スマホファーストでレスポンシブの対応を行いました。

ローカル環境でのWordPress化

「Local by Flywheel」を使用して本番環境の前にローカル環境で制作した静的サイトをWordPress化していきました。

CSSで微調整

ブロックエディターで作成したページをSassを使用してパーツの配置場所などの微調整を行いました。

テーマチェック

ローカル環境でWordPress化したWebサイトのテーマチェックを行いました。

本番環境へデプロイ

FTPを使用してローカルでWordPress化したWebサイトのデータを本番環境に移行しました。
サーバーはXserverで契約しました。

感 想

今回初めてWordPress化をしましたが、最初は自分が何をしているのかさっぱりでした。
なので「仕事の現場でサッと使える!デザイン教科書」という書籍を購入してまずはサンプルサイトをWordPress化していきました。
書籍を読みながら進めていくと段々と理解ができてきたのでハンバーガーサイトを実際にWordPress化してみました。
スムーズにWordPress化まででき、達成感がありました。

Webサイトはこちら

ソースコードはこちら