WordPressのカスタマイズは効率よく!Localでローカル環境を作ろう

WordPressのカスタマイズは効率よく!Localでローカル環境を作ろう

WordPressでブログを始めて、ちょうど2カ月になりました!

記事が増え、WordPressの使い方にもちょっとずつ慣れてきて、「もっとこうしたい!」と思い始める時期ではありませんか?

 

avatar

山根ただし

サイトに訪問いただきありがとうございます。
このブログの管理人、山根(@Hackagogo)です。
今回の記事では、WordPressのデザインをするときに知っておきたいローカル環境についてお伝えします!



 

 

 

ローカル環境構築のすすめ

 

サイトのアクセスが増えてきたら、テーマを試しながら変更するというのは難しい。
なぜなら、試している間もリアルタイムでサイトを公開し続けてますからね。

 

テーマを変えたらページデザインが崩れた _| ̄|○ ガクッ

プラグインが効かない (ll゚д゚)ゴーン

Webページが真っ白になった ( ゜A゜;)マジッ?

となってしまっては、せっかくサイトに訪問してくれたユーザーに迷惑をかけてしまいます。

そこで今回の記事では、効率よく! 簡単に! いろいろなテーマを試せる方法をお伝えします!

 

WordPressをカスタマイズするならローカル環境を作ろう!

 

\ ローカル環境構築はこんな方におすすめ /

  • テーマやプラグインをいろいろと試してみたい
  • HTMLやCSSを勉強しながら、デザインのカスタマイズをしてみたい
  • テーマのダッシュボードが使いやすいか確認したい

このどれかに当てはまるなら、ぜひローカル環境を作ってください!

 

avatar

山根ただし

今、はてなブログなどの無料ブログを使っていてWordPressに移行しようか迷っている方は、この方法であればサーバーを契約しないでも無料でWordPressを試せます!
WordPressってどんなもの? という方にもおすすめですよ。

 

ローカル環境とは?

ふつうWebサイトはインターネット回線やサーバーを介して表示されます。
僕らはそれをブラウザを通して見ています。

しかし、ローカル環境は自分のパソコンに仮想サーバーを立てて、Webサイトを表示させます。

難しいですね。

つまり、こういうことです。

 

WordPressのテーマ「Simplicity2」
▲テーマ「Simplicity2」なLIFE-changing-HACKS!

 

WordPressのテーマ「XeoryExtension」
▲テーマ「XeoryExtension」なLIFE-changing HACKS!

 

WordPressのテーマ「Elegant Pink」
▲テーマ「Elegant Pink」なLIFE-changing HACKS!

 

こんな風にテーマをがんがん変えても公開中のサイトには一切影響なし!

 

もちろん、プラグインもたくさんインストールしています。
重くなろうが、不具合が起ころうが関係なし!

 

プラグインの使い勝手やテーマとの相性を確認するのにローカル環境が最適なんですね。

 

WordPressのデザインや開発をしているWeb制作会社やデザイナーさんなどは、ローカル環境で作業する場合がほとんです。
「ローカル環境には興味ない」という方も、そういう方法があるということは知っておいたほうがいいでしょう。

 

avatar

山根ただし

次からはおすすめのローカル環境構築ツールと、インストール方法をお伝えします。

 

ローカル環境構築ツールはLocal by Flywheelの一択!

 

ローカル環境構築ツールには、いくつか種類があります。

有名なところで言えば、WindowsはXAMPP、MacはMAMPといったツールでしょうか。
WordPressを解説する本でもXAMPPやMAMPが紹介されていることがほとんどです。

 

でも、2018年7月現在では「Local by Flywheel(通称:Local)」というツールの一択です!

 

Localを使うメリット


まず伝えたいことは、Localを使うにあたって、難しい設定や操作は必要ありません。

初心者でも比較的簡単に短時間でローカル環境を構築できます。

テーマやプラグインをどんどん試せる

さきほども伝えましたが、いろいろなテーマやプラグインをどんどん試せます。
テーマ変更やプラグイン導入を考えている人はローカル環境で試してから、本番用のサイトに反映したほうがいいともいえます。

LocalはWindowsでもMacでも両方使える

WindowsでもMacでも使えるのはLocalだけではないでしょうか。実はこれ、すごいことなんです。

Localは複数サイトの管理ができる

複数サイトを運営している方でもLocalが1つあれば、まとめて管理できます。

LocalはURLの共有ができる

公開前のテストページを他の人に確認してもらうことができます。ダミーのURLを発行して、そこにアクセスしてもらいます。

Localは無料で使える

これだけの機能をもったツールがなんと無料です!
信じられません! WordPress利用者はLocalを使わないと損です。

 

[adchord]

 

Localのインストール方法

 

avatar

山根ただし

ローカル環境を作るメリットを理解いただけましたか? それではLocalをインストールしてみましょう!
難しく感じるかもしれませんが、手順の通り進んでもらえれば簡単に作業は終わります!

 

インストール~ファイルのダウンロード

 

手順1:Localのサイトにアクセス

まずはLocalのサイトにアクセス。
「FREE DOWNLOAD!」のボタンをクリックします。

 

Localのサイトにアクセス
▲Localのサイトにアクセスして「FREE DOWNLOAD!」をクリック。

手順2:基本情報の入力

そうすると、基本情報の入力画面に移ります。

 

基本情報の入力
▲基本情報を入力します。

 

MacかWindowsかを選択しましょう。

僕はWindowsを使っているので、そちらを選択して進めていきます。
(MacもWindowsも手順に大きな違いはありません!)

 

その下にいくつか入力項目がありますが、「Work Email:登録メールアドレス」「Number of websites:作りたいローカルサイトの数」だけ入力すればOKです!

僕は複数のサイトを持っているので、Number of websitesは「2-10」を選択しました。

入力が終わったら「GET IT NOW!」をクリックしましょう。

 

 

入力したら「GET IT NOW!」をクリック。
▲入力したら「GET IT NOW!」をクリック。

 

手順3:Localをパソコンへインストール

そうすると、インストール用ファイルのダウンロードが始まります。
ダウンロードされたら、アイコンをダブルクリック。

パソコンへのインストールを開始します。

 

Windowsの場合、このとき「WindowsによってPCが保護されました」という警告が出ることがあります。
問題ないので、「実行」をクリックしてください。

 

ウェルカムの画面が出たら「LET’S GO!」をクリック
▲ウェルカムの画面が出たら「LET’S GO!」をクリック

 

Localをパソコンにインストール中
▲Localをパソコンにインストール中

 

avatar

山根ただし

パソコンへのインストールは、けっこう時間がかかります……。

 

インストールが済んだら、いよいよローカル環境の構築

 

ここまで済んだら、あともう少し!
いよいよローカル環境を構築していきます。

ローカルサーバーの設定

インストールが済んだら、下図のような画面が出てきます。

「CREATE A NEW SITE」をクリック。

 

「CREATE A NEW SITE」をクリック
▲「CREATE A NEW SITE」をクリック。

 

手順4:ローカルサーバーの設定

サイトの名前を聞かれるので、入力します。

ここで入力した文字はローカル環境のドメインとなります。

本番用のサイトと同じドメインにするとわかりやすいと思います。

 

ローカル環境のドメインを決める
▲ローカル環境のドメインを決める。

 

次にローカルサーバーの設定をします。

ローカルサーバーの設定
▲ローカルサーバーの設定をする画面

 

初期設定で問題なければ「Preferred」、自分で設定する場合は「Custom」を選びます。

なるべく本番と同じ設定がいいでしょう。

PHPのバージョンやMySQLのバージョンを設定します。

僕は エックスサーバー を使っているので、こんな感じに設定してみました。

 

ローカルサーバーの設定
▲エックスサーバーのユーザーにおすすめのローカルサーバー設定

 

WordPressをセットアップ

ローカルサーバーの設定が済んだら、次にWordPressをセットアップします。

 

手順5:WordPressのセットアップ

▲WordPressのセットアップ。
▲WordPressのセットアップ。

 

ローカル環境用のWordPressのユーザー名とパスワードを設定します。

「WordPress Username」にユーザー名を(英数字で入力)、「WordPress Password」にパスワードを入れてください。
ローカル環境なので不正アクセスの可能性はかなり低いです。簡単なパスワードで構いません。

 

次に下図のような画面が出てきます。
「複数のサイトをローカル環境で作る場合、アカウントとパスワードはどうする?」という内容となっています。

ローカルサイトを複数作成する場合
▲ローカルサイトを複数作成する場合は、同じアカウントとパスワードのほうが楽。

 

Webデザイナーや制作会社の方のようにサイトの持ち主が異なる場合は、ローカル環境を分けて作ったほうがいいですが、個人で運営する場合は「SAVE AS DEFAULT」で構いません。

入力したら緑色の「ADD SITE」のボタンをクリック。

 

avatar

山根ただし

これでローカル環境は完成です!

 

Localのコントロールパネルから、ローカルサイトにアクセスしてみよう

 

こちらがLocalのコントロールパネル。

 

Localのコントロールパネル
▲Localのコントロールパネル
  1. 左メニューからローカルサーバーで立ち上げたいサイトを選ぶ
  2. 右上の「START SITE」をクリック

 

 

そうすると、ローカル環境が立ち上がります。
ローカル環境が右上にある「DEV MODE」がONになります。

 

「ADMIN」をクリックすると、WordPressのログイン画面へ。
「VIEW SITE」をクリックすると、ローカルサイトにアクセスします。

 

ローカルサイトのワードプレスログイン画面
▲ローカルサイトのWordPressログイン画面

 

ここまでくれば、あとは普段からWordPressでやっていることと同じです。
ダッシュボードの初期設定をしてから、使ってくださいね。

まとめ

avatar

山根ただし

おつかれさまでした!
ローカル環境でいろいろなテーマやプラグインを試してみてくださいね!

 

  • WordPressのテーマやプラグインを試すならローカル環境を構築するべき!
  • ローカル環境構築ツールを選ぶならLocal by Flywheelの一択!
  • WordPressを検討中という方もサーバーを契約しないで試せるのがローカル環境!

 

\ あわせて読みたい /

WordPressの管理画面を見てもなんだかよくわからない……
WordPress(ワードプレス)管理画面のダッシュボードを解説!初心者が知っておきたい基本的な使い方

 

広告
>【LCH式】ブログ改善コンサルティング

【LCH式】ブログ改善コンサルティング

勘や経験に頼らないデータドリブンで、Webサイト・ブログを改善します!

特徴1:
Googleアナリティクスを利用した改善提案

特徴2:
データドリブンマーケティング

特徴3:
ご依頼主に合わせた改善提案

CTR IMG