PocketWordPressの開発を行う際は、基本的にローカル開発環境を利用します。今回はMacでローカル開発環境の構築が簡単にできるアプリケーションのMAMP(マンプ)にWordPressを導入する手順についてまとめてみます。Flywheelというもっと便利で、WordPressに特化したアプリケーションもあるのでそちらも検討してみてください。FlywheelでWordPressのローカル開発環境構築のハードルが一気に下がるhttps://webrandum.net/local-by-flywheelWordPress()のローカル開発環境を構築するツールは世の中にたくさんあります。どれもサーバーの知識が無い方からするとローカル開発環境の構築は敷居が高く、「ちょっとWordPress触ってみたいなー」と思ってもなかなか手が出せなかったりします。Flywheel(ローカルバイフライホイール)は比較的簡単にWordPressのローカル開発環境を無料で構築する事ができます。この手のアプリは他にもたくさんありますが、その中でも断然簡単でUIも綺麗で使いやすいので、これからWordPressを勉強したい初心者の方の取っ掛...ローカル開発環境ってなに?WordPressで主に使用されている言語はPHPという言語ですが、ブラウザはHTML・CSS・JavaScriptの3種類しか読み込むことができません。ブラウザで読み込む前にサーバーで処理をしてPHPからHTMLに変換してからブラウザに読み込んでもらう必要があります。サーバーを用意してそこでWordPressの開発を行っても良いのですが、サーバーを借りるためにはお金もかかりますし、ネット環境が必要になります。そこで、自分のパソコン内にサーバーと同じ環境を擬似的に構築して、PHPからHTMLに変換して自分のパソコン内で閲覧する仕組みが作られました。それがローカル開発環境(ローカルサーバー・ローカル環境)です。方法はありますが、今回は代表的なアプリケーション「MAMP」を利用してWordPressのローカル開発環境を構築してみましょう。MAMPって何?MAMPはMacでローカル開発環境を構築するための代表的なアプリケーションです。Macで使用するアプリなのでMac、Apacheは世界的に普及しているWebサーバーの事で、MySQLはデータベース、PHPはプログラミング言語、Macでそれらを利用する事ができるのでそれぞれの頭文字を取ってMAMPという名前になっています。ちなみにWindowsであればXAMPP(ザンプ)、LinuxであればLAMP(ランプ)というアプリケーションが存在するので、OSが変わっても似たようなローカル開発環境構築アプリが存在するんだなと覚えておくと良いと思います(正確にはXAMPPとLAMPはMacでも使用しようと思えばできますし、MAMPはWindowsでも利用できるのですが、一般的にMacはMAMP、WindowsはXAMPP、LinuxではLAMPという風にそれぞれに特価して作られています)。PHPやMySQLを利用したWebサイトやWebアプリケーションの開発や、テストにはもってこいのアプリになっています。Proという有料版の2種類がありますが今回は無料版での利用を前提とします。MAMPのインストール手順では次にMAMPのインストール方法について見ていきましょう。MAMPのダウンロード公式サイトトップのMAMPアイコンの下にあるダウンロードボタンをクリックします。バージョンに関するページに切り替わるのでここで「Download」ボタンをクリックしてインストーラーをダウンロードします。MAMPのインストールインストーラーのダウンロードが完了したら、そのインストーラーをダブルクリックして起動してMAMPのインストールを行います。読んで「インストール先」でインストール先を選択します。PROをインストールするかどうかの選択ができます。PROがそもそもインストールされないので要らない方はチェックを外しておきましょう。あとはインストールが始まって、数分待てばMAMPのインストールは完了です。MAMPの使い方WordPressをMAMPに入れる前に、軽くMAMPを触ってみましょう。アプリケーションフォルダに新しくMAMPフォルダが追加されていると思うので、その中のMAMP.appをダブルクリックしてMAMPを起動します。MAMPを起動すると下の画像のような起動画面が表示されます。Server」の横のチェックボックスが緑色になればサーバーの起動成功です。停止したい時は「サーバーを停止」ボタンを押せば停止ができます。page」をクリックすれば表示されます)。このページでMAMPに関しての情報を得ることができたり、phpMyAdmin(ピーエイチピーマイアドミン)というツールにアクセスしてデータベース(サイトの情報等)の管理を行う事が可能です。実際に自分のPHPファイルを表示させるためには上のメニューバーにある「私のウェブサイト」というボタンをクリックすると、ローカルサーバーのドキュメントルート(一番上のファイル)が表示されます。MAMPのドキュメントルートはデフォルトの設定だとアプリケーションフォルダにあるMAMPフォルダのhtdocsというフォルダに設定されています。このhtdocs内にPHPのファイルやフォルダを入れて先程と同様に「私のウェブサイト」のリンクからアクセスするときちんとPHPがHTMLに変換されて表示されていると思います。Root」から変更する事が可能ですが、何か特別な理由がない場合、特に最初のうちは変更しない方が混乱を避けられると思います。これで基本的なMAMPの使い方はOKです。MAMPアプリの方から「サーバー停止」ボタンをクリックしてサーバーの停止をしておきましょう。MAMPにWordPressを導入するようやくですがWordPressを入れて設定してみましょう。WordPressの公式サイトへ行きます。○.○.○をダウンロード」というボタンがあるのでそれをクリックしてWordPressをダウンロードします。ダウンロードしたWordPressファイルは、ZIPファイルになっているのでクリックして展開して先程のMAMPフォルダ内にあるhtdocs(ドキュメントルート)の中に展開したWordPressファイルを移動します。あとはMAMPを起動して、先程説明した方法でMAMPのスタートページから「私のウェブサイト」をクリックしてみましょう。下の画像のような表示がされていますか?されていればここまでOKです。データベースの作成WordPressを作成するにあたって、データベースというものを作成しておく必要があります。WordPressを利用する事で記事を書いて公開する事が可能になるのですが、その際に書いた記事の内容であったり、タイトルや書いた著者の情報、またそれらを管理しやすいようにIDでまとめておいたりと、ブログシステムにはあらゆる情報が必要になってきます。それらをまとめて保存しておくのがデータベースです。用意したテンプレート(PHPファイル)に合わせて、適切な情報を送ってHTMLに変換する事でコンテンツが表示されるわけです。WordPressを設定する際には、そのデータベースを選択しないといけないので、先にそのデータベースを作ってしまいましょう。データベースの作成には「phpMyAdmin」というツールを利用するのですが、このツールはMAMP内に既に組み込まれています。page」をクリックしてMAMPのスタートページを開きます。MySQLの見出しのすぐ下に「phpMyAdmin」と書かれたリンクがあるのでそれをクリックします。するとphpMyAdminが開きます。今回行いたい事は、WordPress用のデータベースを作成する事なので、まずはphpMyAdminの1番左の「データベース」タブを開きます。「データベースを作成する」という項目があり、名前を入力する欄があるので後から見て分かりやすいようにwordpressという名前をつけて「作成」ボタンをクリックします。ここで付けたデータベース名は後で入力する必要があるのでちゃんと覚えておくようにしましょう。(忘れてもこのphpMyAdminを見に来ればいい話ですが...)これでデータベースの作成は完了です。WordPressのデータベース設定データベースの作成が終わったら先程のドキュメントルートが表示されているページに戻って「wordpress/」と書かれたリンクをクリックしましょう。下の画像のように表示されるので「さあ、始めましょう!」をクリックしてWordPressに先程作成したデータベースの情報を登録していきます。次のページでデータベースに関する情報を入力していきます。データベース名phpMyAdminで登録したデータベースの名前ユーザー名データベースのユーザー名を入力しますが、MAMPの場合は「root」と入力パスワードデータベースのパスワードを入力しますが、MAMPの場合は「root」と入力データベースのホスト名localhostでOKテーブル接頭辞1つのデータベース内に複数WordPress情報を保存しておきたい場合は接頭辞を変える必要がありますが、今回はデフォルトの「wp_」のままでいきましょう(デフォルトのままだとセキュリティ状問題があるのですがローカル環境ですし、良しとします)。入力できたら「送信」ボタンをクリックします。ちなみにデータベースのホスト名やユーザー名とそのパスワードはMAMPのスタートページのphpMyAdminへのリンクがあった場所のすぐ下に表示されているので、何かしらエラーが起きた場合はチェックしてみてください。データベースとの接続ができる状態なら下のようなページになるので、「インストール実行」をクリックしましょう。WordPressの設定いよいよこれで最後です。WordPress本体に関する情報を入力していきます。サイトのタイトル今から作成するWordPressサイトのタイトルを入力します(後から変更可能)。ユーザー名WordPressにログインする際のユーザー名を入力します。今回僕はテストでWordPressを導入するのでユーザー名は「test」にしておきます。パスワードWordPressにログインする際に必要になるパスワードです。文字数が少ない等、あまりに無防備なパスワードを設定している場合はパスワードの下に「非常に脆弱」と表示されるのですが、そのようなパスワードを設定する際にはここでチェックを入れる必要があります。メールアドレスここで入力したメールアドレス宛に、WordPressを構築した通知メールが送られてきたりします。検索エンジンでの表示ローカル開発環境なので関係ありませんが、ここにチェックを入れておくとGoogleにインデックスされなくなります。入力ができたら「WordPressをインストール」ボタンをクリックします。これでWordPressの設定は完了です。「ログイン」ボタンを押すとWordPressのログイン画面へ移動します。試しにログインしてみましょう。WordPressへのログインWordPressのログイン画面で、先程設定したユーザー名とパスワードを入力して「ログイン」ボタンをクリックします。ちなみに「ログイン状態を保存する」にチェックを入れておくと次回以降入力する手間が省けます。ダッシュボードが表示されていればこれにてWordPressのローカル開発環境構築は完了です。ちなみに、次回以降WordPressを立ち上げる手順としてはMAMPアプリを起動して「サーバーを起動」するサイト自体に行きたい場合は「http://localhost/wordpress/」にアクセスする(もしくはMAMPのスタートページから「私のウェブサイト」をクリックした後「wordpress」リンクをクリック)管理画面に行きたい場合は「http://localhost/wordpress/wp-admin/」にアクセスする終了したい場合はMAMPアプリから「サーバーを停止」をクリックで停止といった流れになります。後は思う存分WordPressをいじってみましょう。マサカズ@31mskz101997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。Webrandum表示設定ダークモードこの機能はCookieを使用して、設定した内容を保存しています。個人を特定したりするものではありませんが、気になる方はプライバシーポリシーをご覧ください。システム設定に合わせる。