6. 課題説明

コース内容
1. ヒアリング・要件定義・リサーチ・ライティング・サイトマップ
この講座で学べることの要約
0/8
5. デザイン添削
0/1
6. デザイン添削
0/1
8. コーディング振り返り・質問
0/2
9. LPコーディング1回目
0/1
10. LPコーディング2回目
0/1
12. WordPress実践
13. ポートフォリオ制作
14. 営業・提案・見積もり作成
15. 保守・運用
jQueryコード集
0/1
保護中: WEB制作

実際にlumina beatyのHTMLサイトをWordPress化してみよう!

添付のlumina beautyのHTMLを保存して講義資料5の『サーバーアップの流れ』の手順に沿ってWordPress化してみよう!


サーバーがある方

サーバーからサブドメインを作成してテスト環境を作成しましょう。
例:femme-creatives.comというドメインがあるなら、test.femme-creatives.comというサブドメインを取得してそこにWordPressをインストールする
サブドメインの取得方法は簡単(無料)なので調べてやってみましょう。
それぞれのレンタルサーバーによって管理画面が異なるので自分のサーバーでの取得方法を調べてください。


サーバーがない方 or サーバーあるけどLocalを使ってみたい方

ローカル環境とは…

自分のパソコン内に仮想環境を構築すること
ローカル環境を構築するとWEBサーバーと同じ機能を持った環境を作ることができます。

ローカル環境を使うメリット…

  • サーバーを契約していなくても、自分のパソコンの中でWordPressを構築できる
  • インターネット上に公開されないので、トライ&エラーが自由にできる

LocalでWordPress化する手順

  1. Localをダウンロードする
    • Localの公式サイト(https://localwp.com/)から
      DOWNROAD FOR FREEをクリック
    • Localを動かす環境を選択
    • 氏名等そのほかの情報も入力し、GET IT NOWをクリックするとダウンロードが開始されます。
  2. ダウンロード後(Windowsの場合)
    • インストーラーをダブルクリックして起動
    • [インストールオプションの選択画面]で[現在のユーザーのみにインストールする]を選択し[次へ]をクリック
    • インストール先フォルダを指定して[インストール]をクリックするとインストールが開始されます
    • インストールが完了すると、完了画面が表示されます。
      [Localを実行]にチェックを入れて[完了]をクリックします
    • 利用規約の画面が表示されるので、一読後[I agree(同意)]をクリック
  3. ダウンロード後(Macの場合)
    • ダウンロードが完了したら、ファイルをダブルクリックします(警告が表示された場合は[開く]をクリック)
    • [Local.app]アイコンをアプリケーションフォルダーへドラッグ&ドロップで移動
    • アプリケーションフォルダーを開いて、[Local.app]をダブルクリックして起動します(警告が表示された場合は[開く]をクリック)
    • 利用規約の画面が表示されるので、一読後[I agree(同意)]をクリック
  4. エラーレポートや使用状況レポートの画面が出た場合は[No,thanks]をクリック
  5. アカウントの作成
    • 初期画面にある[Create a free account]からアカウントを作成
  6. サイトを新規作成
    • アプリケーション画面に戻って[Create a new site]をクリック
    • [Continue]をクリック
    • サイトの名前を入力
    • Choose your environment画面では[Preferred]を選択
    • WordPressにログインする際のユーザー名とパスワードを設定
      ※後から使用するのでメモ必須!

Localの基本操作

①[WP Admin]… WordPressの管理画面

②[Open Site]… サイトが開く

③[Go to site folder]… テーマフォルダーを開く
[サイト名]→[app]→[public]→[wp-content]→[themes]
テーマの編集はここで!
[themes]の中に複製したlumina_beautyファイルをアップしWordPress化していきましょう

補足

WordPressは初期の言語設定が英語なので、管理画面からログインしたら日本語の設定に変更しましょう。
[Settings]→[General]→[Site Language]で[日本語]を選択
[TimeZone]で[UTC+9]を選択
[Date Format]で[Custom]を選択し[Y.m.d]と入力
[Save Changes]をクリックして完了

演習ファイル
lumina_beauty_plume.zip
サイズ: 3.96 MB