はじめてWordPressローカル開発環境を作る場合
はじめてWordPressのローカル開発環境を作る場合のステップは下記のとおりです。各ステップの操作は過去に別記事にまとめましたので、そちらを参照願います。
PHP は macOS バージョン10 および 11 に標準添付されていましたが、 macOS Monterey (12.0.0) 以降には含まれていません。 最近のバージョンをインストールするには、サードパーティーのパッケージを使用するか、 ソースコードからコンパイルする必要があります。
方法は下の記事を参照してください。
次節２回目以降の設定で詳しく紹介しています。
２回目以降のWordPressローカル開発の作り方
無料の方法（有料プラグインを使わない方法）
WordPressのローカル開発環境を作るのが２回目以降の場合は、雛形となるファイルを過去に作ったWordPressファイル群からコピーペーストするなどすれば、省力化できます。
ここでは、上記プラグインを使わずに、最初にご紹介した雛形となるような必要ファイルを手動でコピペしてローカル開発環境を作る方法を紹介します。
すでにインストール済みの場合はこのステップをスキップしてください。PHP は macOS バージョン10 および 11 に標準添付されていましたが、 macOS Monterey (12.0.0) 以降には含まれていません。 最近のバージョンをインストールするには、サードパーティーのパッケージを使用するか、 ソースコードからコンパイルする必要があります。
方法は下の記事を参照してください。
はじめてローカル開発環境を作る場合と同じです。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を「スーパーリロード」する
- WordPress管理画面＞外観＞テーマで、先程変更したテーマを選択
- メディアライブラリーの全画像ファイルを削除
- 投稿タイプおよびカスタム投稿タイプの全ての記事を削除
- 投稿タイプ・カスタム投稿タイプのカテゴリーがあれば、デフォルトカテゴリー以外を全削除
テンプレートファイル等で使用する画像を保存しているフォルダの中身を空にする
- 上で紹介したプラグインを使わない方法と同様です。
gulpの設定ではブラウザの立ち上げに関するbrowserSyncのproxyのURLをWordPressアドレスと同じにすること。
フォントを変更する場合は、functions.phpのGoogleフォント設定を変更
global>setting>_color.scssファイル等に記載されたカラー設定を変更する。
下記は私の事例です。
@useと@forwordに関する記述は残して、そのまま利用する。
以下、削除するコード。
- foundationフォルダ：変更なし・そのまま利用
- globalフォルダ：上記color設定以外は変更なし・そのまま利用
- layoutフォルダ：l-footer, l-header, l-main, l-sidebar内に記述したコードを全削除
- object>componet＞_c-button.scss：上に戻るボタンはそのまま利用。その他のボタンは削除。
- object>componet＞_c-headline.scss, _c-info-category.scssのコードは全削除。
- projectフォルダ：フォルダ内ファイルに記述された全コードを削除
- pagesフォルダ：フォルダ内ファイルに記述された全コードを削除
基本的に、パーツファイルを読み込むWordPress関数以外のコードを削除する。
なお、上記の状態でバックアップされたAll-in-One WP Migrationのエクスポートファイルがあれば、WordPress開発の雛形にすることができ、上記ステップのうちの幾つかの作業を省略することができる。
