【超簡単】WordPressのローカル環境(自分のPC)を構築し、人気無料テーマ「Cocoon」を導入する。

ブログ

こんにちは。タケ(@Take40slife)です。

今回は自分のパソコンにWordPressの環境を構築し、WordPressの人気無料テーマ「Cocoon」を導入するまでの手順を解説していきたいと思います。

初心者の方でも簡単にWordPressの環境を構築できると思いますので、これからブログを始めようとしている方の参考になればと思います。

はじめに

ローカル環境とは?

本来WordPressでブログを運営する場合、WordPressが使用可能なレンタルサーバーを借りてブログをインターネット上に公開します。(レンタルサーバーは初期費用+月額費用が発生します)

ローカル環境とは自分のPC(パソコン)にWordPressの環境を構築します。自分のPC(パソコン)なのであなたのブログを許可なく第三者が無断で閲覧することはできません。

レンタルサーバを借りる場合は費用が発生しますが、ローカルにWordPressの環境を構築するのは無料となります。

ローカル環境が必要な理由は?

ローカル環境を構築すると、どのようなメリットがあるのでしょうか?そもそもローカル環境とは、勉強する環境だけではなく、検証する環境としても使えます。検証とは具体的に何を検証するのか見てみましょう。

検証内容とは?
  • ブログのデザイン(CSS)をカスタマイズし、デザイン崩れが起きていないか確認する
  • 新たなプラグインを導入し、動作検証をする(※1)

※1 プラグインとは、WordPressの機能を拡張するためのツールです。WordPress上でインストールを行い、使用することができます。

WordPress ローカル環境構築

local WordPress development toolをインストールする

local WordPress development toolとは?

local WordPress development toolとは、WordPressのローカル開発環境を簡単に構築できるツールとなっています。

local WordPress development tool ダウンロード/インストール手順

※LOCALのバージョンは2021年4月時点で最新の「5.10.1」になります。

インストール環境

インストーラをダウンロードする際に「Mac」「Windows」を選ぶことができます。ダウンロード/インストール手順は「Windows10」で解説し進めていきます。

ダウンロード/インストール手順

(1). LOCALにアクセスする。

(2). 「DOWNLOAD」をクリックする。

(3). プルダウンより「OS」を選択する

OSの種類
  • Mac
  • Windows
  • Linux – Debian based (Ubuntu, etc)
  • Linux – RPM based (Red Hat, Fedora, CentOS, etc)

※自分のマシンに入っているOSと同じものを選んでください。私のパソコンはWindows環境なので、ここではWindowsを選択し手順の開設を進めていきます。

(4). 以下を入力し「GET IT NOW!」をクリックする。

入力内容
  1. (任意)名を入力します。
  2. (任意)姓を入力します。
  3. (必須)Emailを入力します。
  4. (任意)電話番後を入力します。

※「Email」だけの入力でもOKです。

(5). ダウンロードが完了するまで待ちます。

ダウンロードが開始されない場合は「click here」をクリック

(6). ダウンロードした「local-5.10.1-windows.exe」をダブルクリックし、インストーラを起動します。

(7). Localを全てのユーザで使用するか、現在ログインしているユーザのみ使用するかを選択します。

ヒント

デフォルトは「現在のユーザーのみにインストールする」が選択されています。お使いのパソコンで特にユーザーを使い分けていないのであれば、そのまま「次へ」ボタンを押下してください。

(8). インストール先のディレクトリを選びます。

ヒント

デフォルトで「C:¥Users¥{ユーザー名}\AppData\Local\Programs\Local」がインストール先に設定されています。特にインストール先ディレクトリにこだわりがないのであれば、そのまま「インストール」ボタンを押下してください。

(9). インストールが開始されます。

(10). インストール完了です。

「Localを実行」がチェックONの場合、Localの画面が起動します。

「Local by Flywheel WordPressサイト構築手順」をご覧ください。

WordPressのサイト作成

WordPressサイト作成手順

Local by Flywheelのダウンロード及びインストールが完了しましたので、次はWordPressのサイトを作成していきます。作成手順は以下になります。

WordPressサイト作成手順

(1). Localを起動します。

※実行ファイルとなるExeファイルはインストール時に選択したディレクトリにあります。自分でインストール先を変更していない場合は以下のディレクトリになります。

インストールディレクトリ(デフォルト)

C:¥Users¥{ユーザー名}\AppData\Local\Programs\Local

(2). 「+」または「+ CREATE A NEW SITE」をクリックする。

(3). サイト名を入力し、「CONTINUE」をクリックする。

(4). 環境を選択し、「CONTINUE」をクリックする。

環境とは?

▼WordPressを動作させるためには以下が必要になります。

  • 【プログラミング言語】PHP
  • 【Webサーバー】nginx or Apache
  • 【データベース】MySQL or MariaDB
Preferred? or Custom?

他のPC、サーバーと同じ環境を自分自身のPC上に構築する場合は「Custom」を選択し、PHPのバージョン、Webサーバー、データベースを他の環境に合わせて選ぶ必要があると思いますが、それ以外の場合で特にこだわりがないのであれば「Preferred」で問題ないと思います。

ここでは「Preferred」を選択し、進めます。

(5). 以下を入力し、「ADD SITE」をクリックする。

入力内容
  1. WordPressにログインするためのユーザ名を入力する。
  2. WordPressにログインするためのパスワードを入力する。
  3. 「dev-email@flywheel.local」のままでOKです。
  4. 「No」のままでOKです。
  5. 「ADD SITE」をクリックするとセットアップが開始されます。

ユーザ名とパスワードはWordPressの管理画面にログインする際に必要になります。忘れないようにメモしておきましょう。

(6). セットアップが完了するまで待ちます。

(7). サイトが作成されました。これで完了になります。

Localの基本的な操作

サイト起動方法

サイトを選択してください。

「START SITE」をクリックすると起動します。

サイト停止方法

「STOP SITE」または「STOP ALL」をクリックすると停止します。

サイトが起動していない状態でWordPressの管理画面、Webサイトにブラウザでアクセスするとエラーページが表示されます。サイトが起動されている状態でアクセスしましょう。

WordPressサイトを表示

「OPEN SITE」をクリックします。※SITEが停止している場合は自動で起動されます。

ブラウザ画面が立上がり、サイトが表示されます。

デフォルトでは上記のサイトが表示されます。後ほどテーマを導入し、デザインを変更していきたいと思います。

WordPressサイトの共有(Live Link)

Live Linkを利用して自分が作成したWebサイトを外部に共有することができます。第三者に自分のWebサイトを共有したいとき、自分のスマホ(実機)で作成したWebサイトを確認したいときなどに便利です。

「Enable」をクリックします。

「COPY」をクリックすると共有用のURLがコピーされます。

コピーしたURLは「http」ですが、「https」に変更してください。変更したURLを別端末のブラウザでアクセスするとサイトを閲覧することができます。

共有を無効にする際は、「Live Link」をクリックし「Disable Link」をクリックすると無効にできます。

WordPress管理画面を表示する

「ADMIN」をクリックします。※SITEが停止している場合は自動で起動されます。

ブラウザが立上り、ログイン画面が表示されます。

ログイン手順
  1. WordPressセットアップ時のユーザ名を入力する。
  2. WordPressセットアップ時のパスワードを入力する。
  3. 「Log In」ボタンをクリックする。

※当記事「Wordpressサイト作成手順の(5)」で入力したユーザとパスワードを入力

正常にログインできた場合、以下の管理画面が表示されます。

管理画面より、記事の作成やカテゴリの作成、サイトのデザイン変更など、様々な設定を行うことができます。

WordPress管理画面を日本語化する。

管理画面にログインすると全て英語で表示されると思います。以下の手順で日本語に変更しましょう。

日本語化手順
  1. メニューの「Settings」をクリック。
  2. Site Languageを「日本語」にする。
  3. Timezoneを「Tokyo」にする。
  4. 「Save Changes」ボタンをクリック。

WordPressのテーマ「Cocoon」を導入する

<画像出典:Cocoon

当ブログでも使用しているWordPressの人気無料テーマ「Cocoon」を導入していきましょう。

Cocoonをダウンロードする

以下のダウンロードページにアクセスし、「“Cocoonテーマ” をダウンロード」「“Cocoon子テーマ” をダウンロード」ボタンより、親テーマと子テーマの2つのテーマをダウンロードしてください。

ダウンロードファイル
  • 【親テーマ】cocoon-master-2.2.8.7.zip
  • 【子テーマ】cocoon-child-master-1.1.2.zip

※ダウンロードしたzipファイルは、このまま使用するので解凍する必要はありません。

Cocoonのアップロードとインストール方法

ダウンロードした親テーマと子テーマのZIPファイルをアップロードしインストールを行います。

以下の順番でアップロード/インストールを行ってください。

アップロード/インストール順
  1. 【親テーマ】cocoon-master-2.2.8.7.zip
  2. 【子テーマ】cocoon-child-master-1.1.2.zip

ファイルのアップロード/インストール手順は以下の通りです。

Cocoon アップロード/インストール手順
  1. メニューの「外観」をクリック。
  2. 「新規追加」ボタンをクリック。
  3. 「ファイルを選択」ボタンを押下し、ダウンロードしたテーマのZIPファイルを選択する。
  4. 「今すぐインストール」ボタンをクリックし、インストールが完了するまで待ちます。

Cocoon テーマの有効化

親テーマと子テーマのインストールが完了したら子テーマを有効化します。

Cocoon Child テーマの有効化
  1. メニューの「外観」をクリック。
  2. Cocoon Childの「有効化」をクリック。

テーマを有効化するとメニューに「Cocoon 設定」が表示されます。

Webサイトを確認すると、デザインも変更されているのが確認できます。

ブログデザインの変更について

Cocoon設定でデザインを変更する

「Cocoon 設定」画面の「スキン」「全体」「ヘッダー」タブでサイト全体のデザインを変更することもできます。

CSS(スタイルシート)でデザインを変更する

Cocoonには既にデザインされた見出し、ボックス、リストなど記事に必要な部品が用意されています。自分で各部品となるタグのデザインを変更したい場合は、以下の手順でcssに追加してください。

Cocoon CSS変更手順
  1. メニューの「テーマエディター」をクリック。
  2. Cocoon Child」が選択されていること。
  3. 「スタイルシート(style.css)」をクリック。
  4. コメントの下にコードを追加する。
  5. 「ファイルを更新」ボタンを押下し、追加したスタイルを保存する。

保存後にデザイン崩れが起きてしまう場合もあるので、スタイルを変更する前はstyle.cssのバックアップを取るようにしましょう。

ブログで使える無料ソフトウェアの紹介

Inkscape(インクスケープ)

<画像出典:Inkscape

Inkscapeとは、無料の描画ソフトです。有償である「Adobe Illustrator​」の代替ソフトとして使われることもあるようなので機能も豊富です。

ブログで使えるポイント!
  • ブログのアイコン作成
  • ブログのアイキャッチ画像、説明用の画像など作成

ブログ用でしか使っていないので本来の機能を使いこなせていないかもしれませんが、「フォントの種類」「色の種類」「ファイル形式」も多く、ブログ記事で使う画像を作成するときに、なくてはならない存在です。

Inkscapeダウンロードページ

GIMP(ギンプ)

<画像出典:GIMP

GIMPは、無料のビットマップ画像編集/加工ソフトです。有償である「Adobe Photoshop」の代替ソフトとして使用しています。

ブログで使えるポイント!
  • 写真など画像の加工

前に運営していたブログでは、商品レビューをしていたので、GIMPで商品画像の明るさ・コントラストを調整していました。

GIMPダウンロードページ

最後に

いかがでしたでしょうか?

PHPの開発環境は20年前に構築した経験もあり、Webサーバー、データベースを自分でインストールし設定ファイルを変更していました。XAMPPの登場にも驚きましたが、WordPress(PHP)の環境をこんなに簡単に構築してしまう「local WordPress development tool」には、もっと驚かされました。

こんな簡単にWordPressの環境を構築することができるので、これからブログを始めようとしている方は是非、ローカル環境を構築し勉強してみてください。

最後まで読んでいただき、ありがとうございます。

コメント

タイトルとURLをコピーしました