MAMPを使ったWordpressでのWEB制作方法1　初心者向け

#MAMPを使ったWordpressでのWEB制作方法1　初心者向け

こちらの記事ではMAMPを使用したwordpressでの
WEB制作について記事にしていきます。
今回はWordpressの概要〜開発環境準備までです。

wordpress version 5.4
PHP version 7.4.2

#Wordpressとは？
####無料で使えるブログシステム
　オープンソースで誰でも使えるブログシステム
　世の中の３５％のホームページがWPでできている
####デザインもはじめから複数用意されている
　テーマと呼ばれるテンプレが無料/有料で用意されている
####自由にカスタマイズすることができる
　プログラミングの知識があればブログ以上のWEBページを手軽に作ることができる
####プラグインを使えば、簡単に機能拡張できる
　世界中で様々なプラグインが開発されている
####使用言語はPHP
　Wordpress用の関数も多数用意されている

#この記事で目指すこと
①本格的なホームページが作れるようになる
②PHPを少しずつ理解ができるようになる
③wordpressのテーマを作れるようになる
④さまざまなカスタマイズができるようになる

#wordpressのインストール
[wordpress](https://ja.wordpress.org/download/)
[![Image from Gyazo](https://i.gyazo.com/a89e72fcd65dc26648172e51ce27c473.png)](https://gyazo.com/a89e72fcd65dc26648172e51ce27c473)
まずはこちらからwordpressをDLしましょう

#MAMP導入
[MAMP](https://www.mamp.info/en/mac/)
次にこちらからMAMPをインストールしましょう
無料版のMAMPと有料版のMAMPProがありますが無料版のMAMPで大丈夫です
インストールが終わったらアプリケーションからMAMPを選択します。
[![Image from Gyazo](https://i.gyazo.com/3b0387c1744eedc0c7898542ef086cec.png)](https://gyazo.com/3b0387c1744eedc0c7898542ef086cec)
こちらの画面が出てくれば成功です。
startserversをクリックしてMAMPを起動しましょう
すると以下の画面が出てきます。

[![Image from Gyazo](https://i.gyazo.com/410b2187195284c34cd4219cc8d1bcd7.png)](https://gyazo.com/410b2187195284c34cd4219cc8d1bcd7)
###データベースの作成

ツールからPHPMYADMINを選択しましょう
以下のデータベース設定画面が出てきますので
タブのdatabaseを選択し
database nameに"Wordpress_test"（今回のデータベース名）
と入力してデータベースをcreateします。

[![Image from Gyazo](https://i.gyazo.com/e0b32a0358015664e316598db236ba03.png)](https://gyazo.com/e0b32a0358015664e316598db236ba03)

続いてapplication/MAMP/htdocsの中にDLしたWordpressを格納しましょう。
この中で様々な制作をしていきます
[![Image from Gyazo](https://i.gyazo.com/95762a40f5ce84e545ad6d4eab48db21.png)](https://gyazo.com/95762a40f5ce84e545ad6d4eab48db21)

MAMPが立ち上がった状態でブラウザーから
localhostに接続し以下の画面になれば成功です
本記事ではポート番号を８８８８としてあります
[![Image from Gyazo](https://i.gyazo.com/d7fb1459987df51895f2cf420b83f070.png)](https://gyazo.com/d7fb1459987df51895f2cf420b83f070)

リンクをクリックすると以下の画面になります。
さあ始めましょうをクリック
[![Image from Gyazo](https://i.gyazo.com/b41e5a73880e0a66e73091c09c462588.png)](https://gyazo.com/b41e5a73880e0a66e73091c09c462588)

#wordpressの設定
次にデータベース名、ユーザー名、パスワード、ホスト名の入力画面になります。
データベース名：wordpress_test
ユーザー名：root (MAMPの初期管理者アカウント)
パスワード:root (MAMPの初期管理者アカウント)
データベースのホスト名：localhost
で送信をしましょう

[![Image from Gyazo](https://i.gyazo.com/f1fcd5e024fb3777d6ede0882cdc99dc.png)](https://gyazo.com/f1fcd5e024fb3777d6ede0882cdc99dc)

以下の画面ではサイトのタイトル（任意）
ユーザー名/パスワード/メールアドレスを設定します。
入力が終わったらwordpressをインストールをクリックします。

[![Image from Gyazo](https://i.gyazo.com/8fffbffc488e41669df3c61a0baba00a.png)](https://gyazo.com/8fffbffc488e41669df3c61a0baba00a)

すると管理者ログインの画面になりますので
設定したユーザー名とパスワードでログインしましょう。

[![Image from Gyazo](https://i.gyazo.com/9ba1670cbf49f5a6f658fac3e448c1a3.png)](https://gyazo.com/9ba1670cbf49f5a6f658fac3e448c1a3)

このような管理者画面に入れれば開発環境の準備完了です。
[![Image from Gyazo](https://i.gyazo.com/32b50d8eac72ad7e8f3222cf18b0ba3d.png)](https://gyazo.com/32b50d8eac72ad7e8f3222cf18b0ba3d)

#Wordpressのディレクトリ構成について
[![Image from Gyazo](https://i.gyazo.com/0cb91f73e4266850209e9897b6979800.png)](https://gyazo.com/0cb91f73e4266850209e9897b6979800)

最後にMAMP以下のディレクトリ構成を確認しておきます。
今後は主にwp-contentの中身で作業を進めます。
themesの中に作成するWEBファイルを格納します。
pluginsは導入したプラグインの確認ができます。
uploadsは写真などのアップロードしたメディアが確認できます。

次はこちらです
[MAMPを使ったWordpressでのWEB制作方法2　初心者向け](https://qiita.com/fumiya0414/items/5cd17bf734af65368763)