はじめてWordPressローカル開発環境を作る場合
はじめてWordPressのローカル開発環境を作る場合のステップは下記のとおりです。各ステップの操作は過去に別記事にまとめましたので、そちらを参照願います。
次節２回目以降の設定で詳しく紹介しています。
２回目以降のWordPressローカル開発の作り方
無料の方法（有料プラグインを使わない方法）
WordPressのローカル開発環境を作るのが２回目以降の場合は、雛形となるファイルを過去に作ったWordPressファイル群からコピーペーストするなどすれば、省力化できます。
ここでは、上記プラグインを使わずに、最初にご紹介した雛形となるような必要ファイルを手動でコピペしてローカル開発環境を作る方法を紹介します。
はじめてローカル開発環境を作る場合と同じです。MAMP PROの場合、SSL設定をしない方が無難です。理由はバージョンとタイミングによってバグることがあるからです。
雛形となるWordPressサイトを参考に管理画面の基本設定を行う
- サイトの言語＞「日本語」
- サイトタイトル
- キャッチフレーズ
- サイトアイコン
- 日付形式（例：Y年n月j日）
最後に変更を保存
DEMOサイトでインデックスの必要がない場合は、「検索エンジンがサイトをインデックスしないようにする」にチェックを入れる
- Admin Bar Position
- WP Multibyte Patch
- Advanced Custom Fields
- All-in-One WP Migration
- All-in-One WP Migration Unlimited Extension
- Contact Form 7
- Snow Monkey Blocks
- Snow Monkey Editor
私の場合は通常上記８種類のみだが、過不足はケースバイケースで調整願います。
読者のコメントが必要ない場合は、「新しい投稿へのコメントを許可」からチェックを外す。
- 以前に作成したローカル開発環境のWordPressファイル群のうち、wp-content>themes＞「テーマ名」フォルダーをフォルダーごとコピー。
- Step1で新しく作ったWordPressのwp-content>themesフォルダー内にペーストし、「テーマ名」を任意のものに変更する。
WordPress管理画面＞外観＞テーマを開き、開発用テーマを選択して不要テーマを削除する。上でコピペしたファイル群にテーマ設定した「style.css」ファイルがあれば開発用テーマとして選択できるはず。
- 画像フォルダー内の画像はすべて削除
- Sassファイルのうち不要なものは削除（おもに下層の固定ページ）
wp-content>themes＞「テーマ名」フォルダー内直下に作る。
これは制作中に必要に応じて作っても良い
主に下層の固定ページなど。
- @useを使っている場合は、全てのSassファイルを集約するファイルの設定も確認しておく。
- 色を関数化している場合は、設定をデザインカンプに合わせて変更する。
- メディアクエリーなどのブレークポイントを関数化している場合は、設定を必要に応じて変更する。
gulpfile.js内の下記記述のうち、proxyのURLを変更しておく
// ブラウザの立ち上げ
function browserInit(done) {
browserSync.init({
proxy: "https://テーマ名:8888" //ここの""内の変更を忘れずに！
});
done();
}詳細は下記関連記事を参照願います。
プラグインで一気に作る方法
こちらは有料プラグイン「All-in-One WP Migration Unlimited Extension」を使って、簡単かつ迅速にWordPressローカル開発環境を作る方法です。
- 設定＞サイトの言語＞「日本語」
- プラグインのインストールと有効化「All-in-One WP Migration」「All-in-One WP Migration Unlimited Extension」
- wp-content>themes＞「テーマ名」フォルダーの名称を変更する
- WordPress管理画面＞外観＞テーマで、先程変更したテーマ名を選択
- メディアライブラリーの全画像ファイル
- 投稿タイプおよびカスタム投稿タイプの全ての記事
テンプレートファイル等で使用する画像を保存しているフォルダの中身を空にする
- Sass、FLOCCS、Gulp関連の設定等
