MacBook に MAMP で WordPress 用ブログ作成環境を構築しよう！

ハードディスクの容量の問題も解決 できて 180 GB以上の空きができたため、今回は macOS および Windows で WordPress 環境を簡単に構築できる MAMP を使い、使用中の MacBook Pro に「MAMP 環境」を追加します。

現状・条件

それでは、MAMP 環境 を設定します。

MAMP & MAMP PRO をダウンロード

MAMP は、無料で使用できる MAMP.app と、有料の MAMP PRO.app で構成されていて両方インストールされますが、MAMP だけを利用すれば良いです。

MAMP ダウンロード ページ から Mac 版をクリックしてローカルにダウンロード ( DL ) します。

300 MB を超える MAMP_MAMP_PRO_5.4.pkg ファイルが DL されるので少し時間がかかります。DL 完了後、pkg ファイルをクリックしてインストールします。( バージョンは記事作成時点基準です )

MAMP & MAMP PRO をインストール

※ 注：MAMP をインストールするには 管理者権限 が必要です！

はじめに

このソフトウェアをインストールするために必要な手順が表示されます。
「続ける」ボタンをクリックします。

大切な情報

「アプリケーション」ディレクトリに「MAMP」フォルダと「MAMP PRO.app」がインストールされます。

※ 注意すべきは、「MAMP」フォルダを 移動 または 名前を変更 しないことです。

「続ける」ボタンをクリックします。

使用許諾契約

「続ける」ボタンをクリックし、表示するポップアップで「同意する」ボタンをクリックします。

インストールの種類

この操作には、コンピュータ上に 1.43 GBの領域が必要です。確認したら「インストール」ボタンをクリックしてください。( ▼ )

新しいソフトウェアのインストールを許可しましょう。
パスワードを入力して「ソフトウェアをインストール」ボタンをクリックします。( ▼ )

インストールが始まり、しばらくすると「インストールが完了しました」と表示されます。
「閉じる」ボタンをクリックして MAMP インストールを完了します。( ▼ )

MAMP 環境をカスタマイズ

Finder を開き、「アプリケーション → MAMP → MAMP.app」を起動してください。
※「アプリケーション → MAMP PRO.app」ではないことを確認しましょう。

WEB サーバ ( Apache ) はデフォルトでポート 8888 で起動し、データベースサーバ ( MySQL ) はポート 8889 で起動します。それぞれポート 80、3306 に変更することもできますが、ここでは変更せず進みます。

「Start Servers」をクリックして Apache と MySQL サーバを起動します。( ▼ )

WEB サーバを Nginx に変更するなら、この記事 ( ▼ ) をご覧ください。

WordPress 用データベースを作成

MAMP が起動すると、「MAMP.app → Open WebStart page → TOOLS メニュー → PHPMYADMIN」をクリックし、MySQL を設定します。

phpMyAdmin ページが開きます。「言語 – Language」 を「日本語 – Japanese」を選択して、「データベース」タブをクリックします。( ▼ )

「データベースを作成する」メニューの入力フィールドに任意で DB 名を入力します。ここでは「wordpress」にします。「作成」ボタンをクリックします。( ▼ )

「このデータベースにはテーブルがありません」と表示されますが、左のナビゲーション パネルに wordpress と表示されれば OK です。( ▼ )

また、テーブルはこの後、WordPress 上で行うので問題ないです。そのままおいて置きましょう。

データベースを作成するだけで、MAMP 環境 の設定は完了です。
それでは、ワードプレスをインストールします。

WordPress をインストール

WordPress ダウンロード サイトから「WordPress 5.2.2 をダウンロード」ボタンをクリックします。( WordPress 5.2.2 は記事作成時点のバージョンです )
wordpress-5.2.2-ja.zip の解凍後、生成された「wordpress」フォルダの中身を MAMP 環境のドキュメントルート ( ▼ アプリケーション → MAMP → htdocs ) に移動します。

これで、インストール完了です。

WordPress の初期設定

「wordpress」フォルダの中身を移動したら、ブラウザで下記の URL にアクセスしてみてください。

http://localhost:8888/ ( Apache のポートが 8888 の場合 )

すると、/wp-admin/setup-config.php ページにリダイレクトされます。
ページの内容を確認してから、「さあ、始めましょう！」ボタンをクリックします。

データベース接続情報を設定

▼「送信」ボタンをクリックして次へ進みましょう。

▼ データベース接続に問題がなければ、「インストール実行」ボタンをクリックしてワードプレスをインストールします。

WordPress の管理者情報を設定

インストールが完了すると、「ようこそ」ページが表示されます。
ここでは /wp-admin/ ページにアクセスする管理者情報とサイトの基本設定を行います。

サイトのタイトルは任意ですが、OOブログ のように入力します。
管理者のユーザー名、パスワード、メールアドレスを入力します。
「検索エンジンでの表示」は、当方ではこのサイト自体を外部に公開しないつもりなので、チェックを入れて行きますが、サイトを外部にオープンする予定であればチェックはしない方がいいと思います。

▼ 入力後「WordPressをインストール」ボタンをクリックします。

成功しました！と表示されますと、「ログイン」ボタンをクリックしてサイトにアクセスしましょう。

WP のダッシュボード表示で完了

/wp-admin/ ページのダッシュボードが表示されます。

これで、WordPress が使えるようになりました。

MAMP の警告メッセージに備える

このまま使用すると、PHP と MySQL で警告メッセージが発生しますので、事前にその箇所を修正しておきましょう。

MAMP 環境が整ってから phpMyAdmin を開くと、たくさんのエラーメッセージに遭遇すると思います。 詳細は下記の記事をご覧ください。

PHP も修正します。詳細は下記の記事をご覧ください。

WordPress の初期設定を行う

パーマリンクを設定

この MAMP 環境で各記事の パーマリンク を決めておくので、その設定を変更します。

WordPress 管理画面から、
・押下：「設定→パーマリンク設定」
・ページ内：
「共通設定 → カスタム構造 → 利用可能なタグ」から「/%postname%/」だけを選択して「変更を保存」ボタンをクリックします。

Cocoonテーマを追加

本番サーバと同じく、Cocoonテーマから提供する 投稿用 編集パーツ をよく利用するので、Cocoon テーマをセットアップします。( Cocoon ブロック、Cocoon 汎用ブロックなど ▼ )

Cocoon テーマの詳細は ▼ をご覧ください。

これで、ブログ記事を作成するローカル環境が整いました。

あとがき

ここで構成する環境は、ワードプレスのプラグインを含め各種テストや動作確認に必要でしたし、本番サーバにブログ記事をアップする前に下書きを十分に編集できるローカル環境が欲しかったため、行ったものです。

この記事、既にローカル環境で作成していますが、本番サーバではないので、画像ファイルの加工・編集や本文への配置など色々テストできてよかったです。

記事作成作業の流れは次のとおりです。

この流れに沿って、記事を作成し、また改善点を見つけます。