2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Local】【WordPress】ローカルでのWordPress環境構築に挑戦

Last updated at Posted at 2024-02-25

サマリ

localというローカル環境でWordPressを使えるようにするツールを使って
WordPressに挑戦してみました!

背景

ITスキルを身につけたい者として、まず思うのが自分のWebページを持つことですよね(偏見
HTMLやCSSの勉強は着手しているのですがなかなか進んでおらず…
手始めにWordPressなら簡単と聞くもののドメインとったりサーバレンタルしたりとかなかなか億劫だしなぁとずっと思っていたところ、
なんとローカル環境でWordPressを触れるツールがあるとのこと!
やってみるしかないですよねぇ!

ゴール

  • localのインストール
  • WordPressページの表示確認

対象読者

  • localが気になっている方
  • サーバ借りるまでは面倒だけどWordPressを触りたい方
  • 自分(備忘のため)

前提

必須:PC、インターネット環境
推奨:WordPressの操作
  (がっつりページ作りこむならある程度知識・学習時間が必要かと思いますが、本記事ではとりあえずページの表示確認するところまでなので、そこまでであれば知識や時間はなくても大丈夫です)

環境

  • ホストOS:Window10 Home
  • local:8.2.1

手順

以下のサイトの手順を参考に実施しました。
ありがとうございます…!

そもそも

  • WordPressとは
    本記事を目にされている方はご存じかと思いますが、
    Wiki先生の言葉を借りるとオープンソースのブログソフトです。(ざっくりすぎ)

  • Localとは
    Local Wordpress Development toolとのことです。

ローカルでWordPress環境を作るためのツールと理解しています。(そのまま)

  • WordPressのローカル環境構築について
    他のやり方として、XAMPP(クロスプラットフォーム+Apache+MariaDB+PHP+Perl)やMAMP(Macintosh+Apache+MySQL+PHP)などの環境・ツールもあるようですが、一番localが簡単なようなので、今回はlocalでの導入をしています。

localのインストール

まずは公式HPにアクセスします。

DOWNLOAD FOR FREEをクリック

image.png

プラットフォームの選択が出るので、自環境に合わせて選択します(今回はWindows)。

image.png

名前とアドレスを打ち込みます。
organization typeはよくわからなかったので、Otherを選択しました。(おい

image.png

GET IT NOW!をクリックすると
こんな感じで、実行ファイルのダウンロードが始まります。

image.png

「local-8.2.1-windows.exe」というファイルがダウンロードできたので、ダブルクリックで実行します。
(バージョンは2024.2.25時点)

インストールオプションの画面が出るのでお好みで選択いただければと思います。
自分は下の「現在のユーザーのみにインストールする」を選択しました。

無題.png

続いてこのような画面が出ます、自分はそのままにしました。

無題.png

とりあえず、インストールは完了しました。
(時間的には数秒で完了しました。)

image.png

利用規約みたいなものがでますが脳死でI agreeです(おい

image.png

アカウント作成の画面がでます。

image.png

image.png

必要な情報を投入…
と思いましたが、localのアプリ上は特にアカウント必要なくても動作しそうだったので、そのまま進めたいと思います。(ローカル外に共有する機能を使う場合などで必要になってくるようです)

気づくとlocalのアプリが開いており、無事サイト作成の画面が表示されています。おぉ~!

image.png

サイトの作成

Create a new siteを選択し、右下Continueを選択します。

image.png

sitenameは自分が作成したい名前を入れます。

image.png

必要に応じてドメインなど編集できるようですが、今回は練習用に触るだけなので、デフォルトのもので行きます。

image.png

続いて環境選択の画面です。

image.png

推奨では画面の通りPHP8.1.23、nginx、MySQL8.0.16になっているようです。

右のCustomを選択すると、ある程度のバージョンを選択できるようになっています。
(が今回は特に触りません)

image.png

続いて、WordPressのユーザ名を投入する画面がでます。
ユーザ名とPWを投入します。
メールアドレスは画面の通りデフォルトで入っているので、特に変更したいということがなければそのままで大丈夫そうです。

image.png

すると無事画面が開きました…!
(途中、mailhog.exeとnginx.exeの実行許可のポップアップがでましが、許可しました)

mailhogは初見だったのですが開発用のメールサーバなんですね…

今回がっつりページを触らないためメールを使うような場面はないのですが、今後必要に応じて学習したいと思います。

そしてlocalアプリの右上OpenSiteをクリックするとブラウザでページが開きました。
おお…!

image.png

image.png

WordPressダッシュボードのアクセス

右上のWP Adminをクリックすると、WordPressのログイン画面が出ます。

image.png

先ほど投入したユーザ名、PWを入れてログインします。

ダッシュボードの画面が開きました!

image.png

あとはWordPressの操作の部分になるので、今回そこまで深堀はしないのですが、
試しに別のテーマをインストールしてみて、
軽く文字を触ったりしてみました!

めちゃくちゃ簡単に編集できて、これは確かに利用者が多いのも納得と思いました…!

image.png

備考

  • ローカルで作成したページを外部へ共有する方法もあるようです。今回参考にさせていただいたサイト下部に記載がありますが、Live Linkという機能を使うようです。
  • また、サーバ環境への移行もできるとのことです。(All-in-One WP Migrationというメジャーなプラグインを使用)
  • localでの環境構築方法は以下のページにも非常にわかりやすく手順が載っていました。

結果

localのインストールによりローカルでのWordPress環境構築し、画面を確認出来ました。

学び

WordPressは食わず嫌いで長らく触ったことがなかったですが、
無料で比較的簡単に導入できることがわかりかなりハードルが下がりました。
また、外部への共有やサーバ環境への移行もあるということで拡張性もあり、便利なツールがあるんだなぁと感動しました…!

まとめ

Webサイトの学習にあたり、WordPressを触ってみるというアプローチが取れるようになったので、
今後もHTMLやCSSなどベースの学習を続けつつもWordPressをいじりながら引き続き勉強したいと思います。

2
2
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
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?