LoginSignup
2
4

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-04-24

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

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

wordpress version 5.4
PHP version 7.4.2

Wordpressとは?

無料で使えるブログシステム

 オープンソースで誰でも使えるブログシステム
 世の中の35%のホームページがWPでできている

デザインもはじめから複数用意されている

 テーマと呼ばれるテンプレが無料/有料で用意されている

自由にカスタマイズすることができる

 プログラミングの知識があればブログ以上のWEBページを手軽に作ることができる

プラグインを使えば、簡単に機能拡張できる

 世界中で様々なプラグインが開発されている

使用言語はPHP

 Wordpress用の関数も多数用意されている

この記事で目指すこと

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

wordpressのインストール

wordpress
Image from Gyazo
まずはこちらからwordpressをDLしましょう

MAMP導入

MAMP
次にこちらからMAMPをインストールしましょう
無料版のMAMPと有料版のMAMPProがありますが無料版のMAMPで大丈夫です
インストールが終わったらアプリケーションからMAMPを選択します。
Image from Gyazo
こちらの画面が出てくれば成功です。
startserversをクリックしてMAMPを起動しましょう
すると以下の画面が出てきます。

Image from Gyazo

データベースの作成

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

Image from Gyazo

続いてapplication/MAMP/htdocsの中にDLしたWordpressを格納しましょう。
この中で様々な制作をしていきます
Image from Gyazo

MAMPが立ち上がった状態でブラウザーから
localhostに接続し以下の画面になれば成功です
本記事ではポート番号を8888としてあります
Image from Gyazo

リンクをクリックすると以下の画面になります。
さあ始めましょうをクリック
Image from Gyazo

wordpressの設定

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

Image from Gyazo

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

Image from Gyazo

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

Image from Gyazo

このような管理者画面に入れれば開発環境の準備完了です。
Image from Gyazo

Wordpressのディレクトリ構成について

Image from Gyazo

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

次はこちらです
MAMPを使ったWordpressでのWEB制作方法2 初心者向け

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4