(架空)ハンバーガーサイト

XDデザインデータからWordPress化まで

デザインデータをXDでいただき、まずは静的コーディング

ヘッダー部分のスマホ版の次に、ヘッダー部分のPC版を行い、メインビジュアル部分のスマホ版の次に、メインビジュアルのPC版というようにコンテンツごとにスマホ版→PC版の流れでコーディングしました。
※後から調整すると思わぬレイアウト崩れの危険があります。

ローカル環境の構築

「LocalbyFlywheel」を使用して構築しました。

ローカル環境でのWordPress化

静的コーディングしたものをWordPress化(随時管理画面からカスタマイズ)しました。

テーマチェック

プラグインを利用し、テーマチェックを行いました。NGが出た箇所を随時修正しました。

レイアウトチェック

テストデータを入れて、レイアウト崩れがないかを確認しました。

本番環境の構築

本番環境のサーバーにWordPressを構築しました。私はエックスサーバーで契約をしているので、エックスサーバーで提供している「WordPress簡単インストール」の機能を利用しました。

ローカル環境から本番環境への移行

LocalbyFlywheelで作成した、データベースとWordPressファイルをエックスサーバーに移動しました。また、データベース内のサイトURLを本番環境の情報に書き換えました。

WordPress化する際に、PHPでページ送り機能を実装しました(プラグインでも良いのですがカスタマイズ性が上がります!)

初めて自分のサイトがインターネット上に公開された瞬間の喜びは格別でした。

クリックするとスマホサイトが閲覧できます