【WordPress】インストールしてサイトを表示してみた！

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

:computer:環境
・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を推奨
 
:::note warn
※上記、2023年6月10日時点の必要要件
:::



# 環境構築

### 1. MAMP環境を構築

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

https://qiita.com/834_andon/items/6f5bdeacf6f9a99b9baa


### ２. WordPress用に環境を構築

#### Apache

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

<details open>
    <summary>修正内容はこちらをクリック</summary>

・ポート(53行目付近)
　→80番ポートを追記
<dd>
<pre>[修正前]
  Listen 8080
[修正後]
  Listen 8080
  Listen 80
</pre>
</dd>
 
・rewriteモジュールの有効化(180行目付近)
　→コメントアウトを外す
<dd>
<pre>[修正前]
  #LoadModule rewrite_module lib/httpd/modules/mod_rewrite.so
[修正後]
　　　　　LoadModule rewrite_module lib/httpd/modules/mod_rewrite.so
</pre>
</dd>

・PHPを使用モジュールの一覧に追加(250行目付近)
　→PHPモジュールをLoadModuleの最後尾に追記
<dd>
<pre>[追記内容]
　　　　　LoadModule php_module /opt/homebrew/opt/php/lib/httpd/modules/libphp.so
　　　　　&lt;FilesMatch \.php$>
　　　　　　　　　　SetHandler application/x-httpd-php
　　　　　&lt;/FilesMatch>
</pre>
</dd>

・サーバネームの設定(228行目付近)
　→サーバネームを追記する
<dd>
<pre>[修正前]
　　　　　#ServerName www.example.com:8080
[修正後]
  #ServerName www.example.com:8080
  ServerName localhost:80
</pre>
</dd>

・ドキュメントルートの設定(250行目付近)
　→ドキュメントルートのパスを修正する
<dd>
<pre>
[修正前]
   DocumentRoot "/opt/homebrew/var/www"
   &lt;Directory "/opt/homebrew/var/www">
[修正後]
   DocumentRoot "●任意のディレクトリ●"
   &lt;Directory "●任意のディレクトリ●">
</pre>
</dd>

・AllowOverrideディレクティブの設定変更(275行目付近)
　→全てのディレクティブの設定変更を許可する
<dd>
<pre>
[修正前]
   AllowOverride None
[修正後]
   AllowOverride All
</pre>
</dd>
</details>

② Apacheを再起動
<dd>
<pre>brew services restart httpd</pre>
</dd>

#### MySQL

① MySQLにログイン
<dd>
<pre>mysql -u root -p</pre>
</dd>

② 現状のデータベース一覧を表示
<dd>
<pre>SHOW DATABASES;</pre>
</dd>

　→実行結果
<dd>
<pre>+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.01 sec)</pre>
</dd>

③ WordPress用のデータベースを作成
<dd>
<pre>CREATE DATABASE IF NOT EXISTS ●任意のデータベース名● ;</pre>
</dd>

④ 再度データベース一覧を表示
<dd>
<pre>SHOW DATABASES;</pre>
</dd>

　→実行結果
<dd>
<pre>+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
| wordpress          |　　←できてる
+--------------------+
5 rows in set (0.00 sec)</pre>
</dd>

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

### 1. WordPressをインストール

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

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

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

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

② ブラウザを起動して、WordPressのセットアップ画面を表示
　　※私がブラウザに表示した時のURL：http://localhost/wordpress/wp-admin/setup-config.php
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3473595/df319afa-fc04-35eb-4717-0bd9b6fffbfb.png">

#### WordPressをセットアップ

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

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

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

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

③ 「送信」ボタンを押下

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

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

⑤ 「インストール」ボタンを押下

⑥ 「成功しました！」というタイトルで、ユーザー名とパスワードを表示したらインストール成功:v_tone1:

### 2. サイトを表示

 - [http://localhost/wordpress/index.php](http://localhost/wordpress/index.php)でサイトのトップページを表示
![スクリーンショット 2023-06-27 20.54.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3473595/7ae3ae97-d66f-8d87-e9d7-525a76ef6f21.png)

 - [http://localhost/wordpress/wp-admin/index.php](http://localhost/wordpress/wp-admin/index.php)で管理画面を表示
![スクリーンショット 2023-06-27 20.54.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3473595/d1876693-c54d-65db-29bc-22010f65855c.png)