ローカル環境でWordPressのサイトを作成してみた!!

環境
・M1チップ　Pro
・macOS Ventura

そもそもWordPressって何？

１. WordPressとは

オープンソース型CMS
※CMS(コンテンツ・マネジメント・システム)
　Webサイトのコンテンツ(テキスト、画像、レイアウトなど)を一元管理できるシステムで、プログラミングやWebデザインの知識がなくても、サイトやコンテンツを追加・編集できる
世界中のCMSの中でもトップシェアを獲得している
無料でインストールして使用できる
プラグインやテーマ(サイトのレイアウト)の種類が豊富でカスタマイズしやすい

2. WordPressでサイトを作るために必要な環境

言語：PHP (バージョン 7.4〜)
　※WordPressのコアプログラムはPHPで作成されているため
データベース：MySQL(バージョン 5.7〜)、または MariaDB(バージョン 10.3〜)
　※管理画面のログイン情報やコンテンツのデータは、データベースに追加して管理するため
サーバ：動くものなら何でもいいが、公式ではApacheやnginxを推奨

※上記、2023年6月10日時点の必要要件

環境構築

1. MAMP環境を構築

次の記事にてMAMP環境を構築

２. WordPress用に環境を構築

Apache

① 設定ファイルを編集
　※設定ファイル：/opt/homebrew/etc/httpd/httpd.conf

修正内容はこちらをクリック

・ポート(53行目付近)
　→80番ポートを追記

[修正前]
  Listen 8080
[修正後]
  Listen 8080
  Listen 80

・rewriteモジュールの有効化(180行目付近)
　→コメントアウトを外す

[修正前]
  #LoadModule rewrite_module lib/httpd/modules/mod_rewrite.so
[修正後]
　　　　　LoadModule rewrite_module lib/httpd/modules/mod_rewrite.so

・PHPを使用モジュールの一覧に追加(250行目付近)
　→PHPモジュールをLoadModuleの最後尾に追記

[追記内容]
　　　　　LoadModule php_module /opt/homebrew/opt/php/lib/httpd/modules/libphp.so
　　　　　<FilesMatch \.php$>
　　　　　　　　　　SetHandler application/x-httpd-php
　　　　　</FilesMatch>

・サーバネームの設定(228行目付近)
　→サーバネームを追記する

[修正前]
　　　　　#ServerName www.example.com:8080
[修正後]
  #ServerName www.example.com:8080
  ServerName localhost:80

・ドキュメントルートの設定(250行目付近)
　→ドキュメントルートのパスを修正する


[修正前]
   DocumentRoot "/opt/homebrew/var/www"
   <Directory "/opt/homebrew/var/www">
[修正後]
   DocumentRoot "●任意のディレクトリ●"
   <Directory "●任意のディレクトリ●">

・AllowOverrideディレクティブの設定変更(275行目付近)
　→全てのディレクティブの設定変更を許可する


[修正前]
   AllowOverride None
[修正後]
   AllowOverride All

② Apacheを再起動

brew services restart httpd

MySQL

① MySQLにログイン

mysql -u root -p

② 現状のデータベース一覧を表示

SHOW DATABASES;

　→実行結果

+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.01 sec)

③ WordPress用のデータベースを作成

CREATE DATABASE IF NOT EXISTS ●任意のデータベース名● ;

④ 再度データベース一覧を表示

SHOW DATABASES;

　→実行結果

+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
| wordpress          |　　←できてる
+--------------------+
5 rows in set (0.00 sec)

WordPressをインストールしてサイト表示をしてみよう

1. WordPressをインストール

WordPressのパッケージファイルをダウンロード

① WordPressの公式サイトをブラウザで表示
　
② 「WordPress 6.2.2 をダウンロード」ボタンを押下して、.zipファイルをダウンロード
　
③ ダウンロードした.zipファイルを展開する
　 →展開後のディレクトリ名：wordpress

ブラウザでセットアップ画面を表示

① 展開した「wordpress」ディレクトリごと、ドキュメントルートに配置

② ブラウザを起動して、WordPressのセットアップ画面を表示
　　※私がブラウザに表示した時のURL：http://localhost/wordpress/wp-admin/setup-config.php

WordPressをセットアップ

(1)データベースの内容を設定

① セットアップ画面内の、「さあ、始めましょう！」ボタンを押下

② WordPressで使用するデータベースの情報を入力する画面を表示するので下記を入力

項目	入力内容	今回の入力内容
データベース名	WordPress用環境構築で作成したデータベース名	wordpress
ユーザー名	WordPress用データベースにログインするユーザー名	root
パスワード	「ユーザー名」でログインするためのパスワード	secret
データベースのホスト名	WordPress用データベースのホスト名	localhost
テーブル接頭辞	WordPress用データベース内のテーブルにつける接頭辞	wp_

③ 「送信」ボタンを押下

④ WordPressサイトの設定ページを表示するので下記を入力

項目	入力内容	今回の入力内容
サイトのタイトル	作成するWebサイトのタイトル	An-don
ユーザー名	管理画面にログインするユーザー名	834andon
パスワード	「ユーザー名」でログインするためのパスワード	secret
メールアドレス	作成するWebサイトについて通知を受信するメールアドレス	secret
検索エンジンでの表示	GoogleやYahooなどの検索エンジンでサイトを検索した時に結果に表示するか	チェックつける