Roa run dev

MAMP環境でWordPressプロジェクトを作成する【環境構築】

●目次

    MAMPのインストール・ダウンロード

    MAMP（Macintosh, Apache, MySQL, PHP）は、MacとWindows向けのローカルサーバー環境です。
    以下の手順でMAMPをインストールします。

    1. MAMPの公式サイトからMAMPをダウンロードし、インストールします。
    2. MAMPを起動し、「Start Servers」をクリックしてApacheとMySQLを起動します。
    3. MAMPの「Preferences」を開き、「Ports」タブでApacheとMySQLのポートを確認します
      （デフォルトではApache8888とMySQL3306）。
    • 関連
      • ポートとは？「MAMP-ApacheとMySQLポート」「Docker-Ngix」とは？

    MAMP環境にダウンロードしたWordPressを配置

    次に、WordPressをダウンロードし、MAMPのhtdocsディレクトリに配置します。

    1. WordPressの公式サイトから最新バージョンのWordPressをダウンロードします。
    2. ダウンロードしたファイルを解凍し、WordPressフォルダを「/Applications/MAMP/htdocs」
    3. フォルダ名を任意のプロジェクト名に変更します。（例）：wp_site

    MAMP環境でデータベースの作成

    WordPressはデータベースを使用してコンテンツを管理します。
    次に、MAMPのMySQLデータベースを作成します。

    • ブラウザを開き、http://localhost/MAMP/にアクセス
    • MAMPを起動し、「Tools」メニューから「phpMyAdmin」を選択します。
    • phpMyAdminで「データベース」タブをクリックし、新しいデータベースを作成します。
    • 文字セットは「utf8_general_ci」を選択し、「作成」をクリックします。

    （例）：wp_site_db

    MAMP環境で作成したデータベースと配置したWordPressを接続する

    最後に、WordPressのインストールを完了し、データベースと接続します。

    • ブラウザを開き、http://localhost/wp_siteのURLにアクセスします。
    • phpMyAdminで作成したデータベースと接続設定をする
    データベース名：wp_site_db

ユーザー名：root

パスワード：root

データベースのホスト：localhost

テーブル接頭辞：wp_（デフォルトのまま）
    • 入力後、「送信」をクリックします。
    • 「インストール実行」をクリックし、サイトの情報を入力します。
    サイトのタイトル
（例）「Test Site」

ユーザー名
「test」

パスワード
（例）「1111」←覚えておけ！

メールアドレス
（例）「test@test.com」←自分のメアドまたは、メールテスト用のメアド
    • 「WordPressをインストール」をクリックし、インストールが完了します。

    接続後、オリジナルテーマを作成！

    • テーマフォルダの作成:
      MAMPの 「htdocs/wp_site/wp-content/themes」 内に、新しいテーマフォルダを作成します。

    （例）：wp_site_theme

    ディレクトリ構成

    htdocs内ディレクトリ構成
    htdocs/ # MAMPプロジェクトのルートディレクトリ
    ├── wp_site/ # WordPressのルートディレクトリ
    │   ├── wp-admin/
    │   ├── wp-content/
    │   │   ├── plugins/
    │   │   └── themes/
    │   │       ├── wp_site_theme/ # オリジナルテーマ
    │   │       └── twentytwentyone/ # デフォルトテーマ
    │   ├── wp-includes/
    └── index.php

    WordPressのテーマでは、下記の二つのファイルは必須ファイルです。
    二つファイルが無い場合は、テーマとして読み込まれません。
    オリジナルテーマディレクトリ構成
    wp_site_theme/
│
├── asset/
│   ├── css/
│   │   ├── reset.css
│   │   ├── layout.css
│   │   └── component.css
│   ├── js/
│   │   ├── layout.js
│   │   └── component.js
│   └── images/
│
├── *index.php
├── *style.css    
└── screenshot.png

    ＊下記はHTML＋CSS＋JSで作成したWordPressテーマ開発用のプロジェクトです。

    HTML+CSS+JSディレクトリ構成
    html_css_js_site/
│
├── asset/
│   ├── css/
│   │   ├── reset.css
│   │   ├── layout.css
│   │   └── component.css
│   ├── js/
│   │   ├── layout.js
│   │   └── component.js
│   └── images/
│
├── index.html →index.php書き換え予定
├── style.css　
└── screenshot.png

    まとめ

    これで、MAMPを使用してローカル環境でWordPressプロジェクトをセットアップし、データベースに接続する方法が完了しました。

    次は、