WEBLIC LLC

ブログ

WordPressをローカル環境で動かす方法

開発

2023年8月22日

WordPress

WordPressを自分のPC上で試してみたいけれど、コードの知識がない、サーバーのことがよくわからない、そして何か間違えて本番環境に影響を及ぼすのは怖い…そんなあなたにピッタリの方法があります。

今回は、初心者でも安心して使える「Local」というツールをご紹介します。実際に、弊社が主催した「WordPress研修」で、WEBの知識がまちまちの参加者全員がこのツールを使って、簡単にローカル環境にてWordPressを動かすことができました。この記事では「Local」使って簡単にWordPress環境が構築する方法を紹介します。

WordPressをローカル環境で動かすツール

WordPressをローカル環境で動かすための方法として、今回紹介する「Local」のほかにも、XAMPP、MAMP、Dockerなど、さまざまなツールが存在します。

XAMPPやMAMPを簡単に説明すると、これらはローカル環境でLAMP環境を構築し、PHPの実行環境を提供するツールです。そのため、WordPress環境を構築する場合、自分自身でWordPressをインストールする必要があります。

Dockerは複数人でのチーム開発を行う際に、すべての開発者に同一環境を提供するための優れたツールです。ただし、その利用には専門的なスキルが求められます。

一方で、「Local」はWordPressに特化したツールとして設計されており、インストール手順に従うだけで簡単にWordPress環境を構築できます。

次の章から実際に「Local」をインストールしてWordPress環境を構築していきましょう!

「Local」をダウンロードする

まずは「Local」の公式サイトから「Local」をダウンロードします。

Local公式サイト

ダウンロードボタンをクリックすると、どのプラットフォーム用をダウンロードするのか聞かれますのでご自身のパソコンのOSに合ったものを選択してください。

Localダウンロード画面

私はインテルのMacを使っているので、「Mac Intel」を選択、その後名前やメールアドレスを入力する欄が表示されますが、必須項目はメールアドレスのみですので「Work Mail」の欄にメールアドレスを記入して「GET IT NOW!」ボタンをクリックするとダウンロードが開始します。

Localダウンロード画面

「Local」インストールから設定まで

ここでは「Local」のインストールから設定までを行います。

私の場合はMacですので、先ほどダウンロードした「Local」のインストールファイル「local-7.1.2-mac.dmg」を解凍し、アプリケーションフォルダにドラッグ・アンド・ドロップします。

アプリケーションフォルダに移動した「Local.app」をクリックし起動します。

その際、以下のようなアラートが出た場合は「開く」をクリックします。

「Local」が立ち上がると規約の画面が表示されるので、チェックボックスにチェックをつけて、「I agree」ボタンをクリックします。

Local規約画面

これでやっと「Local」が使える状態になります。今回新規でインストールしたので、まずはアカウント作成を促されます。「Create a free account」をクリックしてください。

「Create a free account」をクリックすると、ブラウザが開き、登録情報の入力画面が表示されますが、「Local」はアカウント登録しなくても使用することが可能なので、開いたブラウザを閉じ、「Local」のアプリケーションに戻ります。

Local設定画面

「Local」のアプリケーションに戻ると、「エラーレポートの共有を有効にしても大丈夫ですか?」と決まれますので、大丈夫な場合は「Turn on error reporting」をクリック、嫌な場合は「No, thanks」をクリックします。

Localエラーレポート共有画面

次は「Local」上にWordPressのサイトを作っていきます。

作ると言ってもコードを書いたりする必要はなく、画面に従って入力、クリックを行うだけでWordPressのサイトが構築できます。

今回新規でインストールしているので、「+ Creat a new site」をクリックします。

Local新規サイト作成画面

次の画面では「Create a new site」にチェックを付け、画面右下の「Continue」をクリックします。

ちなみにもう一方の「Create from a Blueprint」は過去に「Local」で作成したサイトを「Blueprint」で書き出し保存している場合、そのファイルを使って復元することができます。

Local新規サイト作成画面

次の画面ではサイト名を入力しましす。今回は「sample」としました。「Advanced options」を開くと、ドメイン名「sample.local」と保存先のパスが表示されます。

保存先を変更したい場合は、「Browse」の文字をクリックすると保存先を変更できます。

今回はデフォルトの設定のまま「Continue」をクリックします。

Local新規サイト作成画面

次にPHP、サーバー、データベースの環境の設定を行います。

デフォルトでは

PHP・・・8.1.9
Webサーバー・・・nginx
MySQL・・・8.0.16

何を選んで良いのか分からなければ、デフォルトの設定のままで問題ないので、「Preferred」を選択して「Continue」をクリックします。

Local新規サイト作成画面

最後はWordPressのログイン情報を設定します。

ユーザー名とパスワードを入力し、「Add Site」をクリックします。

マルチサイトの設定にしたい場合は、「Advanced options」からサブドメインにするか、サブディレクトリにするか選べます。この記事ではデフォルトの「No」で進めていきます。

Local新規サイト作成画面

「Add site」をクリック後、20〜30秒ほどで、WordPressサイトが構築されます。

構築後は以下のような画面になります。この画面で主に使用するのは右上から

Stop site・・・サイトを停止します。
WP Admin・・・ブラウザで管理画面の開きます。
Open site・・・ブラウザでサイトを開きます。

基本的にこの3つをよく使います。

Localサイト作成後の画面

「Open site」をクリックするとブラウザでTOPページが開きます。

WordPressのフロント画面
WordPressデフォルトテーマ「twenty twenty three」

一旦「Local」に戻って「WP Admin」をクリックすると、WordPressのログイン画面が表示されます。

先ほど「Local」で設定したユーザー名、パスワードを入力してログインします。

WordPressログイン画面

無事ログインすると、英語表示になっていますので、サイトメニューの「Settings」から日本語化しています。

WordPressバックエンド画面

「 Settings」画面の中央あたり、「Site Language」「Timezone」があるので、そちら変更します。

WordPress設定画面

Site Language・・・日本語
Timezone・・・Tokyo

を選択します。これで日本語化は完了です。

WordPress設定画面

最後に日本語化した際に、入れておきたいプラグイン「WP Multibyte Patch」をインストールします。

「Local」はローカル環境で動かしますが、ネットが繋がっていればプラグインをインストールすることも可能です。

WP Multibyte Patchプラグインインストール画面

以上で、「Local」を使ってローカル環境にWordPressを構築する方法をお伝えしました。

普段ノーコードやローコードの環境で作業されているWeb担当者の方でも「Local」を使えば簡単にローカル環境にWordPressを構築することができます。

最後に「Local」を終了する場合は、画面右上の「Stop site」をクリックするとWordPressサイトを終了することができます。

Localの画面

関連記事

開発

Hubs cloud AWSを削除する方法

Mozillaは2024年1月1日よりAWS Marketplaceの「 Hubs&nbs...

2024年1月15日

開発

WordPressプラグインの落とし穴5選

弊社の案件でも使用しているオープンソースのCMSであるWordPressには数多くのプラグインが存在...

2023年8月20日

開発

mordern.IEを使ってのWin8 IE10を試す

最近話題のmordern.IEを試してみました。 OS 10.8.3VMware Fusion 5....

2013年5月28日

開発

Mozilla HubsをCommunity Editionに移行

以前のブログ記事『Hubs cloud AWSを削除する方法』にて情報共有しておりますが、AWS M...

2024年4月22日

開発

Sassコーディングのスピードアップを目指す

開発効率とメンテナンス性のよさを考えてSassの導入を検討中。まずは自社サイトのCSSをSass(s...

2013年6月8日

  • カテゴリー

  • 本日、 4人が閲覧しました

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社