< All Topics
  • Main
  • Web
  • WordPress
  • 【簡単丸わかり】ローカルPCにWordPressをインストールし他のPCと共有する
Print

【簡単丸わかり】ローカルPCにWordPressをインストールし他のPCと共有する

社内でのニュースやマニュアルをイントラネットのサイトで共有したいことがあると思いますが、近年ではPCだけでなくスマホやタブレットからも参照したいというニーズが高まっています。しかし、PC向けとスマホ・タブレット向けにそれぞれ専用のページを作るのは手間ですし、メンテナンスも大変です。

そんな時にはMAMPとWordPressを使い、一つのコンテンツを作るだけで、PC・スマホ・タブレットなど異なるデバイスでも違和感なくコンテンツを参照できる(レスポンシブな)サイトを立ち上げてみてはいかがでしょう。

目次

MAMPインストール

まずはMAMPをインストールします。MAMPは公式サイトからダウンロードして下さい。MAC版とWindows版がありますので、環境に応じて選んで下さい。

画像に alt 属性が指定されていません。ファイル名: MAMP.png

ダウンロードしたファイルをダブルクリックし、指示に従いインストールを行います。

画像に alt 属性が指定されていません。ファイル名: MAMPインストール.png

MAMPを起動します。MACの場合、アプリケーションフォルダ「MAMP」フォルダの「MAMP.app」をダブルクリックします。有料版の「MAMP Pro.app」ではないので注意して下さい。

画像に alt 属性が指定されていません。ファイル名: MAMP起動.png

「Preference」をクリックし、設定画面を開きます。Windowsの場合には「MAMP」メニューの中に「Preference」があります。

画像に alt 属性が指定されていません。ファイル名: Preference.png

ポートタブを開き、「Set Web & MySQL port to : 80 & 3306」の「80 & 3306」のところをクリックします。

画像に alt 属性が指定されていません。ファイル名: Set-Port.png

Apache Port ・ Nginx Port ・MySQL Port にそれぞれ「80, 80, 3306」がセットされたら「OK」をクリックします。

画像に alt 属性が指定されていません。ファイル名: Set-Port-2.png

データベース作成

初期画面に戻り「Start」ボタンをクリックすると、MAMPサーバーが起動します。

画像に alt 属性が指定されていません。ファイル名: MAMP-Statr.png

「WebStart」クリックできる状態になったらボタンをクリックします。

画像に alt 属性が指定されていません。ファイル名: Web-Start.png

ブラウザが起動したら「Tool」タブから「phpMyAdmin」を選択します。

画像に alt 属性が指定されていません。ファイル名: phpMyAdmin.png

続いて「Database」タグをクリックします。

画像に alt 属性が指定されていません。ファイル名: database-tug-1024x831.png

データベース名を入力し「Create」ボタンをクリックします。この時、「utf8_general_ci」であることを確認します。

画像に alt 属性が指定されていません。ファイル名: database-create.png

データベースが作成されたことを確認します。

画像に alt 属性が指定されていません。ファイル名: database-check.png

WordPressインストール

MAMPを起動したら、WordPressをインストールします。WerdPress.orgのサイトから最新版のWordPressをダウンロードします。

画像に alt 属性が指定されていません。ファイル名: wp_download-709x1024.png

ダウンロードしたzipファイルを解凍し、展開したファイルを「htdocs」内に作成したフォルダ(ここでは「test01」)へ移動します。

画像に alt 属性が指定されていません。ファイル名: move_files.png

MAMPが起動している状態でブラウザを開き、アドレスバーに「localhost/(htdocsに作成したフォルダ名)」と入力します。WordPressのインストール画面が現れるので「さあ、始めましょう!」をクリックします。

画像に alt 属性が指定されていません。ファイル名: wp_start-1.png

データベースへの接続画面が表示されるので、MAMPのユーザー名とパスワード(デフォルトは “root/root”)を入力します。

画像に alt 属性が指定されていません。ファイル名: wp_db接続-1.png

データベースへの接続が成功すると、以下の画面が表示されるので、「インストール実行」をクリックします。

画像に alt 属性が指定されていません。ファイル名: wp_db接続2-1.png

続いてWordPressへのログイン画面が現れるので、サイトタイトル、ユーザー名、パスワード、メールアドレスを入力し「WordPressをインストール」をクリックします。

画像に alt 属性が指定されていません。ファイル名: wp_login-2.png

インストールが成功すると次の画面が現れるので、「ログイン」をクリックします。

画像に alt 属性が指定されていません。ファイル名: wp_login2-1.png

WordPressのインストールが完了するとダッシュボードが表示されます。

画像に alt 属性が指定されていません。ファイル名: wp_install_finish-1.png

管理画面への再ログイン

管理画面に再ログインするには、まずブラウザで「localhost/(db名:test01等)」を開きます。

画像に alt 属性が指定されていません。ファイル名: wp_再ログイン.png

続いて「localhost/(db名)/ wp-login.php」を開くとログイン画面が表示されます。

画像に alt 属性が指定されていません。ファイル名: wp_再lログイン2.png

他のPCからアクセスできるよう設定する

一旦MAMPサーバーを停止し「MAMP/conf/appache/httpd.conf 」に以下の記述を追加します(IPアドレス:192.168.0.10、ポート:8888とした場合)。- Lang Select -HTMLCSSSCSSJavaScriptTypeScriptPHPRubyPythonSwiftCC#C++Objective-CSQLJSONBashGit

  MAMPサーバーを再度起動し、他のPCからアクセスできることを確認します。 他のPCでブラウザを開き「 http://192.168.0.10:8888/MAMP 」にアクセスできることを確認して下さい。

次にローカルPC内に構築したWordPress「http://192.168.0.10:8888/wp」にアクセスしてみて下さい。WordPressの画面は正しく表示されますでしょうか?

正しく表示されずに形崩れを起こしている場合、以下のように一般設定でURLを変更することにより、形崩れが発生しなくなります。

  1. 「http://localhost/wp/wp-admin/」で管理画面を開く
  2. 「設定(一般)」の「WordPressアドレス(URL)」と「サイトアドレス」共に「http://192.168.0.10:8888/wp」と記述
画像に alt 属性が指定されていません。ファイル名: ipアドレス設定.png

ここでアドレスの記述を変更した後、「http://localhost/wp/wp-admin/」では管理画面にアクセスできなくなりますので注意が必要です。管理画面にアクセスするには変更後のアドレス「http://192.168.0.10:8888/wp/wp-admin」でアクセスして下さい。

ファイアウォールの設定(Windowsのみ)

Windowsの場合にはこれに加え、ファイアウォールの設定を行う必要があります。設定手順は以下の通りになります。

STEP1:スタートメニューから「Windows管理ツール」「セキュリティが強化されたWindows Defender ファイアウォール」を選択

画像に alt 属性が指定されていません。ファイル名: firewall01.png

STEP2:「受信の規則」を選択し「新しい規則」をクリック

画像に alt 属性が指定されていません。ファイル名: firewall02.png

STEP3:「ポート」を選択

画像に alt 属性が指定されていません。ファイル名: firewall03.png

STEP4:ポート番号を入力

画像に alt 属性が指定されていません。ファイル名: firewall04.png

STEP5:「接続を許可する」をチェック

画像に alt 属性が指定されていません。ファイル名: firewall05.png

STEP6:適用(デフォルトのまま次へ)

画像に alt 属性が指定されていません。ファイル名: firewall06.png

STEP7:名前と説明(省略可)の入力

画像に alt 属性が指定されていません。ファイル名: firewall07.png

STEP8:確認

画像に alt 属性が指定されていません。ファイル名: firewall08.png

手順は以上になります。

スマホやタブレットでアクセスする時には同一ネットワーク内でのWiFi接続となりますので、お忘れなく。

Previous 【簡単丸わかり】無料で始められるWordPress.comの使い方(テーマデザインのカスタマイズ)
Table of Contents
PAGE TOP
MENU