LocalでWordPress開発環境を構築する方法

WordPress開発を始めたいけれど、どのツールを使えばいいかわからない…という方に朗報です!「Local by Flywheel(以下、Local)」を使えば、簡単にローカル環境でWordPressをセットアップできます。本記事では、初心者でもすぐに始められるLocalを使ったWordPress開発環境の構築手順を解説します。

Local by Flywheelとは?

Local by Flywheelは、初心者からプロの開発者まで幅広く利用されているローカル環境構築ツールです。簡単な操作でWordPressをインストールでき、SSLの有効化やメールキャプチャ機能など、開発に役立つ機能も充実しています。

手順:Localを使ったWordPress開発環境の構築

1. Localのインストール

  1. Localの公式サイト(Local by Flywheel公式サイト)にアクセスします。
  2. OS(Windows、Mac、Linux)に応じたインストーラーをダウンロードします。
  3. ダウンロードしたインストーラーを起動し、画面の指示に従ってインストールを完了させます。

2. 新しいサイトを作成

  1. Localを起動し、「Create a New Site」または「+」ボタンをクリックします。
  2. サイト名を入力します(例:「my-wordpress-site」)。
  3. 簡単なセットアップウィザードが表示されるので、好みに合わせて設定します。
    • 環境選択: 推奨設定のままでOK(PHP、MySQLのバージョンも変更可能)。
    • ドメイン設定: デフォルトのままでOKですが、変更したい場合は自由に入力してください。

3. WordPressをセットアップ

  1. サイト作成が完了すると、WordPressのインストール画面が表示されます。
  2. ユーザー名、パスワード、メールアドレスを入力し、管理画面の情報を設定します。
  3. 「Install WordPress」をクリックすると、すぐにローカル環境にWordPressがインストールされます。

4. サイトを開く

  • Localのダッシュボードから「Open Site」または「Admin」をクリックすると、ローカル環境で動作しているWordPressサイトがブラウザで表示されます

Localを使うメリット

1. 簡単な操作性

初心者でも迷わず設定可能で、手間のかかるサーバー設定を自動で行ってくれます。

2. 開発に便利なツールが標準搭載

  • SSL対応: ワンクリックでSSLを有効化。
  • メールキャプチャ: テストメールの確認が簡単。
  • サイトのクローン: プロジェクトを複製して別の環境でテスト可能。

3. 軽量で高速

無駄なリソースを使わず、快適に動作します。

✪ 画像はランダムで表示されるようになっています。フリー素材などでご用意ください。

おすすめChromeプラグイン一覧

プラグイン名特徴
GoFullPageウェブページ全体のスクリーンショットを簡単に取得できるブラウザ拡張機能です。
ColorZilla色を抽出するための拡張機能です。
WhatFontウェブページ上のフォントの情報を簡単に確認できるブラウザ拡張機能です。
PerfectPixelデザイナーが作成したデザインと実際にコーディングされたウェブページがどの程度一致しているかを確認・調整するためのブラウザ拡張機能です。

模写の手順

ステップ内容
ステップ 1構図を手書きか全画面スクショ(Go full page等)した後、ペイントツールで四角で囲い、大まかなclass,命名規則をあらかじめ決める。
ステップ 2HTMLの基本構造を作成する
ステップ 3CSSでレイアウトを模写する
ステップ 4 中級〜JavaScriptを追加して動きを再現する
ステップ 5最終調整を行い、検証ツールやPerfectPixel(chromeプラグイン)などで完成を確認する。