WordPress テーマ作成入門

WordPress テーマ作成入門

こんにちは!
今日も頑張ろう

Lesson-1
開発環境

目次

L1.1 はじめに

L1.1.1 WordPress 開発環境

  • WordPress は、サーバーサイドで動作するアプリケーションであり WordPress が稼働可能なレンタルサーバーを契約していれば動作可能です。ただ、テーマやプラグインの開発作業では修正作業のたびにサーバーのファイルを入れ替えるのは手間のかかる作業です。
  • WordPress の Web サイト開発やテーマやプラグインの開発に使用するのであればローカル環境(PC内)に開発環境を構築して作業するのが便利です。
  • ローカル環境に開発環境を構築するためには、Webサーバー(Apache)、データベース管理システム(MySQL)、処理言語(PHP)に加えてWordPress 本体のインストールが必要ですが、各ソフトウェアを個別にインストールするには難易度は高い作業です。
  • 以前は、MAMP(マンプ) や XAMP(ザンプ) と呼ばれる WordPress 開発環境を一括でインストール可能なパッケージが使われていましたが、最近は設定が簡単な Local というパッケージが人気です。また、Studio や DevKinsta というパッケージも人気なようですが未検証なので検証が終わったら紹介したいと思います。
  • 本章では、Local を用いた開発環境の構築を使用方法を説明します。

L1.2 開発環境

L1.2.1 Local のインストール

Local のインストールを行う場合は、Local の公式サイトからインストール媒体をダウンロードしてインストールを実施します。

本ページでは、Windows 環境を使用した Local の使用法について説明します。

Localのインストール
  1. Local の 公式サイト(https://localwp.com/) を開きます。
    「DOWNLOAD FOR FREE」ボタンを押下します。
  2. 対象のプラットフォーム(OS)を選択します。Mac/Windows/Linux のプラットフォームを選択することができます。
  3. 姓名の「名」を入力します。
  4. 姓名の「姓」を入力します。
  5. 組織の種類を選択します。「Other」で大丈夫です。
  6. メールアドレスを入力します。
  7. 「GET IT NOW!」を押下します。
  8. ダウンロードしたインストール媒体を使用してインストールを実施します。

L1.2.2 Local の操作

Local の基本的な操作について説明します。詳しい内容は、関連図書や関連サイトを参照してください。また、WordPress の操作についても説明を省略しますので、こちらも関連図書や関連サイトを参照してください。

(1) Local の起動

Local を起動してください。

Local は、ポート 80 を使用しますので、他のプログラム(Apache など)でポート 80 が使用されていると Local の起動は失敗します。 この場合は、他のプログラムを停止させてポート 80 が空いている状態で Local を起動してください。
他のプログラムと共存させたい場合は、Local が使用するポート番号を変更することもできます。 Local の Preferences メニュー(左上の人アイコン内)を開いて Advanced サブメニューから Router mode 設定を localhost に変更してください。 この変更をすることでポート 80 以外を使用するようになりますが、すでに作成済みのサイトは開けなくなるのでサイトの再作成が必要になります。

下記の画面は、最初に Local を起動した時に表示されます。2 回目以降の起動では、表示されません。また、数件の確認メッセージが表示される場合があります。

Local の起動
  1. 「Create a new site」ボタンを押下します。

(2) WordPress サイトの作成

(a) WordPress サイトの作成開始
WordPress サイトの作成開始
  1. 「Create a new site」を選択します。
  2. 「Continue」ボタンを押下します。
(b) WordPress サイト名の入力
WordPress サイト名の入力
  1. WordPress サイト名を入力します。
  2. 「Continue」ボタンを押下します。
(c) WordPress サイト作成条件の入力
WordPress サイト作成条件の入力
  1. 「Preferred」を選択します。
  2. 「Continue」ボタンを押下します。
(d) WordPress サイトアカウントの入力
WordPress サイトアカウントの入力
  1. WordPress サイトの管理画面(ダッシュボード)に入るためのユーザー名を指定します。(忘れないでください)
  2. WordPress サイトの管理画面(ダッシュボード)に入るためパスワードを指定します。(忘れないでください)
  3. 「Add Site」ボタンを押下します。
(e) Local の確認メッセージ
Local の確認メッセージ
  1. Local の環境を変更するための確認メッセージが出力されたら「許可」を押下します。複数回出力されることがあります。

(3) WordPress サイト管理画面(ダッシュボード)の起動

(a) WordPress サイト管理画面の起動
WordPress サイト管理画面の起動
  1. 起動する WordPress サイトを選択します。
  2. 「WP Admin」ボタンを押下します。
(b) WordPress 管理アカウントの入力(ブラウザ画面)
WordPress 管理アカウントの入力(ブラウザ画面)
  1. WordPress サイトの管理画面(ダッシュボード)のユーザー名を入力します。
  2. WordPress サイトの管理画面(ダッシュボード)のパスワードを入力します。
  3. 「Log in」ボタンを押下します。
(c) WordPress 日本語環境の設定-Settings(設定)メニュー(ブラウザ画面)

サイト作成時の初期状態を日本語環境にしたい場合は、サイトの作成前に Local の Preferences メニュー(左上の人アイコン内)を開いて New site defaults サブメニューから Default Site Language 設定を「日本語」に変更してください。

WordPress 日本語環境の設定-Settings メニュー(ブラウザ画面)
  1. Settings メニューを選択します。
(d) WordPress 日本語環境の設定-General(一般)メニュー(ブラウザ画面)
WordPress 日本語環境の設定-General メニュー(ブラウザ画面)
  1. General メニューを選択します。
(e) WordPress 日本語環境の設定-日本語設定(ブラウザ画面)
WordPress 日本語環境の設定-日本語設定(ブラウザ画面)
  1. 「Site Language」で「日本語」を選択します。
  2. 「Timezone」で「Tokyo」を選択します。
(f) WordPress 日本語環境の設定-設定更新(ブラウザ画面)
WordPress 日本語環境の設定-設定更新(ブラウザ画面)
  1. 画面をスクロールさせて下部の「Save Changes」ボタンを押下します。
(g) WordPress 日本語環境の設定-画面確認(ブラウザ画面)
WordPress 日本語環境の設定-画面確認(ブラウザ画面)
  1. 日本語画面に変わったことを確認します。

(4) WordPress サイト参照画面の表示

(a) WordPress サイト参照画面の表示-参照画面の起動
WordPress サイト参照画面の表示-参照画面の起動
  1. 表示する WordPress サイトを選択します。
  2. 「Open site」ボタンを押下します。
(b) WordPress サイト参照画面の表示-参照画面の確認(ブラウザ画面)
WordPress サイト参照画面の表示-参照画面の確認(ブラウザ画面)
  1. WordPress サイトが表示されることを確認します。

(5) WordPress サイトの停止

WordPress サイトの停止
  1. 停止する WordPress サイトを選択します。
  2. 「Stop site」ボタンを押下します。

(6) WordPress サイトの追加

WordPress サイトの追加
  1. 「+」ボタンを押下します。
    以降の操作は「(2) WordPress サイトの作成」を参照してください。

L1.2.3 Local インストールフォルダの構成

Windows 環境で Local をユーザー単位の設定でインストールした場合は、Local が使用する管理フォルダとして以下の構成のフォルダやファイルが生成されます。


📁 [Windows のユーザーフォルダ] 				// Windows のユーザーフォルダ(通常は「C:\Users\[ユーザー名]」または「C:\ユーザー\[ユーザー名]」)
└─📁 Local Sites								// Local のベースフォルダ
  ├─📁 [Local で指定したサイト名]			// サイト固有フォルダ
  │ ├─📁 app								// アプリケーションフォルダ
  │ │ ├─📁 publib						// WordPressインストールフォルダ
  │ │ │ ├─📁 wp-admin 				// 管理プログラム群(以下省略)
  │ │ │ ├─📁 wp-content				// サイト固有情報フォルダ
  │ │ │ │ ├─📁 languages			// 翻訳辞書/以下省略
  │ │ │ │ ├─📁 plugins				// プラグインフォルダ(以下省略) *1
  │ │ │ │ ├─📁 themes				// テーマフォルダ(以下省略) *2
  │ │ │ │ ├─📁 upgrade				// 更新フォルダ(以下省略)
  │ │ │ │ ├─📁 uploads				// メディアフォルダ(年・月単位で管理)(以下省略) *3
  │ │ │ │ └─ [管理プラグラム群]		// 管理プログラム群
  │ │ │ ├─📁 wp-includes				// 管理プログラム群(以下省略)
  │ │ │ └─ [管理プラグラム群]			// 管理プログラム群
  │ │ └─📁 sql							// データベース管理フォルダ(以下省略)
  │ ├─📁 conf 							// 環境設定フォルダ(以下省略)
  │ └─📁 logs 							// ログフォルダ(以下省略)
  └─📁 [Local で指定したサイト名]			// 次のサイト固有フォルダ(以下省略) *4

*1 プラグインフォルダ:インストールしたプラグイン単位でフォルダが作成され管理されます。
*2 テーマフォルダ:インストールしたテーマ単位でフォルダが作成され管理されます。
*3 メディアフォルダ:メディアをアップロードた日付で年・月単位のフォルダで管理されます。
*4 Local で作成したサイトの数だけ作成されます。

テーマやプラグインを開発する場合は、以下のフォルダ内容を直接修正してください。

  • テーマの開発
    [Windows のユーザーフォルダ]/Local Sites/[Local で指定したサイト名]/app/public/wp-content/themes/[テーマ名]
  • プラグインの開発
    [Windows のユーザーフォルダ]/Local Sites/[Local で指定したサイト名]/app/public/wp-content/plugins/[プラグイン名]

ロケット本体
PAGE
TOP
ロケット炎