Roa run dev

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

●目次

    【1】MAMPのインストールと起動

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

    【1-1】MAMPのダウンロード・インストール

    • MAMPの公式サイトからMAMPをダウンロードし、インストールします。
    • 「Free Download」ボタンをクリックしてダウンロード
    • ダウンロードしたインストーラーを実行してインストール

    【1-2】MAMPを起動

    • MAMPを起動し、「Start Servers」をクリックしてApacheとMySQLを起動します。
    • MAMPの「Preferences」を開き、「Ports」タブでApacheとMySQLのポートを確認します
      • デフォルトではApache8888とMySQL3306

    【2】WordPressをMAMPに配置

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

    【2-1】WordPressのダウンロード

    • WordPressの公式サイトから最新バージョンのWordPressをダウンロードします。
    • ダウンロードしたファイルを解凍。

    【2-2】WordPressをMAMPのhtdocs内に設置

    • WordPressフォルダを「/Applications/MAMP/htdocs」
    • フォルダ名を任意のプロジェクト名に変更します。（例）：wp_site

    【3】データベースの作成（MAMPのphpMyAdmin）

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

    【3-1】MAMP環境のphpAdminにアクセス

    • ブラウザを開き、http://localhost/MAMP/にアクセス
    • MAMPを起動し、「Tools」メニューから「phpMyAdmin」を選択します。

    【3-2】新規データベース作成（phpAdmin）

    • phpMyAdminで「データベース」タブをクリックし、新しいデータベースを作成します。
    • 文字セットは「utf8_general_ci」を選択し、「作成」をクリックします。

    （例）：wp_site_db

    【4】WordPressをインストール完了（ブラウザで接続）

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

    【4-1】WordPressセットアップ画面にアクセス

    【4-2】データベース情報を入力

    • phpMyAdminで作成したデータベースと接続設定をする
    データベース名：wp_site_db

ユーザー名：root

パスワード：root

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

テーブル接頭辞：wp_（デフォルトのまま）

    ↓↓↓↓↓↓

    【4-3】WordPressのサイト情報を入力する

    • 「インストール実行」をクリックし、サイトの情報を入力します。
    • 「WordPressをインストール」をクリックし、インストールが完了します。
    サイトのタイトル
（例）「Test Site」

ユーザー名
「test」

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

メールアドレス
（例）「test@test.com」←自分のメアドまたは、メールテスト用のメアド

    【5】オリジナルテーマの開発準備

    【5-1】テーマフォルダの作成

    ディレクトリ構成
    /Applications/MAMP/htdocs/wp_site/wp-content/themes/wp_site_theme/
    MAMP/htdocs/wp_site/wp-content/wp_site_theme/内ディレクトリ構成
    wp_site_theme/
├── style.css                ← テーマ情報を記述 （必須）
├── index.php               ← テーマの起点となるファイル （必須）
└── screenshot.png     ← テーマサムネイル （任意）

    【6】HTML・CSS・JSをWordPressテーマに組み込む

    【6-1】HTML+CSS+JS → オリジナルテーマ内へ

    HTML+CSS+JSディレクトリ構成
    html_css_js_site/
│
├── asset/
│   ├── css/
│   │   ├── reset.css
│   │   ├── layout.css
│   │   └── component.css
│   ├── js/
│   │   ├── layout.js
│   │   └── component.js
│   └── images/
│
├── index.html
├── style.css　
└── screenshot.png

    ↓↓↓↓↓↓

    MAMP/htdocs/wp_site/wp-content/wp_site_original_theme/
    wp_site_theme/
│
├── asset/
│   ├── css/
│   │   ├── reset.css
│   │   ├── layout.css
│   │   └── component.css
│   ├── js/
│   │   ├── layout.js
│   │   └── component.js
│   └── images/
│
├── *index.php
├── *style.css    
└── screenshot.png

    まとめ

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