普段はサーバー上にWordPressをインストールして、検索避けとBasic認証をした上で開発をしていましたが、例えばフェリーで移動中とか出先のカフェとかでネット環境が無かったりセキュリティ的にフリーWi-fiを使いたくなかったりするわけです。
そういう時に、ローカル上でWordPressを構築して開発できればいいじゃない!と思い至ったので、そのメモです。
目次
前提・環境
- サーバー(Xserver)上でのWordPressインストールとDB構築は対応済み
- 子テーマを使ってのサイト作成
- MacBook Pro 15inch(2018)
- macOS Mojave 10.14.6
- WordPress 5.2.3
- FTPソフト&エディタ:Adobe Dreamwaver
WordPressのダウンロード
公式サイト日本語ページよりダウンロードします。ヘッダーメニューの「WordPressを入手」からダウンロードページへ進みます。この時点ではバージョンが5.2.3でした。
Wクリックして解凍しておきます。
使用アプリ: MAMP
Local by Flywheelも魅力的でしたが、今回はMacで馴染みが深いらしいMAMPを試してみます。
MAMPのダウンロード
英語サイトですが分かりやすくメインビジュアルのところに「Free Download」ボタンがあります。クリックするとダウンロードページへ移行し、Macなのでアップルマーク下の「MAMP & MAMP PRO 5.5」をクリックでダウンロードできます。
クジラアイコンのアプリも勧められますが、ここではスルーしました。
インストール
ダウンロードファイルをWクリックでインストールウインドウが開きます。普通に流れるようにクリックして進めていくと、有料のPROの方がインストールされてしまいます。
「インストールの種類」で画面下の「カスタムインストール」からインストールするアプリの種類を選ぶことができます。開発者に申し訳ないのですが今回は無料の方を使いたいので、「MAMP」を選んで「MAMP PRO」の方のチェックは外して進めます。

「ダウンロードが完了しました」とメッセージが出て、アプリケーションの中に「MAMP」が確認できました。

起動&新規データベース作成
MAMPを起動させ、まずは「Start Server」をクリックします。ブラウザが起動してMAMPのスタート画面が表示されます。

「TOOL」から「PHPMYADMIN」をクリックで、システムらしいページへ移動します。

これがphpMyAdminの画面です。ここで言語も日本語に選べました。

「データベース」のタブをクリックします。

新しくデータベースを作るので、任意で名前を付け(ここでは「WP」としました)、隣のプルダウンメニューは「uft8_general_ci」のままで、「作成」をクリックします。
「このデータベースにはテーブルがありません。」とメッセージが表示されて焦りますが、

左メニューから「新規作成」をクリックすると、さっきの画面に戻ります。ちゃんと「WP」が追加されていますね。

WordPressをインストールする
WordPressのファイルを配置する
インストールと言いましたが、まずはアプリやブラウザ内での作業ではなくフォルダーの方で行います。
「アプリケーション」のフォルダーから「MAMP」フォルダー配下の「htdocs」フォルダーへ、先ほどDL&解凍しておいた「Wordpress」フォルダー内のデータを移動させます(「Wordpress」フォルダー自体はいらない)。


データを配置したら、MAMPの起動画面に戻って、真ん中の「Open WebStart page」をクリックします。再びブラウザ上でMAMPのスタート画面が表示されます。

今度はメニューの「MY WEBSITE」をクリックすると、「WordPress へようこそ。」の画面が開きました!

WordPressの設定をする
「さあ、はじめましょう」から設定を進めます。
データベース名: 先ほどphpMyAdminの新規作成で付けた名前(ここでは「WP」)

ユーザー名: root
パスワード: root(MAMPの初期パスワード)
データベースのホスト名: localhost
テーブル接頭辞: wp_
を入力して「送信」。問題なく進むとこの画面になるので、「インストールを実行」をクリックします。

ようこそ画面にたどり着きました〜!

WordPressの必要情報を入力する
ようこそ画面で「サイトのタイトル」、「ユーザー名」、「パスワード」、「メールアドレス」を入力します。
「ご心配なく、これらの情報は後からいつでも変更できます。」と書いてあるので、心配せず入力します。
見慣れたWordpressのダッシュボードの画面です! 構築を進めましょう。

次回からはMAMPアプリを起動させ、「Start Servers」→ブラウザのスタート画面→「MY WEBSITE」からWordpressの画面に進めます。

URLの末尾に「/wp-login.php」を付け加えるとログイン画面です。
ローカルで開発したデータを本番(あるいはテスト)サーバーにアップする作業は別記事でやりたいと思います。