• HOME
  • WORKS
  • SERVICE
  • ABOUT
  • BLOG
  • NEWS
  • RECRUIT
  • CONTACT

エンタメ特化型、心を動かすWeb制作。
まずは無料で相談いたします!

公開日:2025/04/15

ProcessWireでテスト環境と本番環境を一つの管理画面で!

ProcessWireで実現する、スマートな運用設計とは?

Web制作の現場では、クライアントからよくある声が「修正したいけど、いきなり本番に反映されるのは怖い…」

その不安、ProcessWireなら解決できます!

今回は、1つのProcessWire管理画面でテスト環境と本番環境を同時に管理する方法をご紹介します。

フルスタックサイト構築

ニュース(動的コンテンツ)などの場合

ニュースやブログ記事など、複数投稿があるタイプは、チェックボックスでの切り替え運用がベストです。

手順

  1. env_mode という名前の チェックボックスフィールド を作成。

  2. 「テスト環境」「本番環境」の2つを選択肢に。

  3. 各記事ページで必要な方にチェックを入れて運用。

テンプレート側のコード例:

if ($page->env_mode && in_array('本番環境', $page->env_mode)) {
  // 公開記事として表示
}

これで、本番環境用のみにチェックされた記事だけが、サイト上に表示されるようになります!

会社概要(静的ページ)などの場合

静的ページは構成が固定なので、ちょっと工夫が必要です。

 

方法①:ページ単位で「表示モード」フィールドを追加

  • env_mode(ラジオまたはセレクト)で「テスト」「本番」から選択

  • 各ページに追加して、どちらで表示するか選べるように

コード例:

if ($page->env_mode == '本番') {
  echo $page->body;
}

メリット:

  • 管理画面の操作性が統一されてわかりやすい

デメリット:

  • 本番サイトに「テスト用のページ」も存在する(表示はされないがURLにはある)

 

方法②:テスト用の複製ページを /test/ 配下に作る

  • 例:/about/(本番)、/test/about/(テスト)

  • クライアントには/test/about/を編集してもらい、確認後に本番へ反映

メリット:

  • 安全性が高く、URLの混同も防げる

デメリット:

  • 管理コストは少し高め(複製・移行の運用が必要)

 

方法③:一つのページに「テスト」「本番」用の本文フィールドを用意

  • body_test と body_prod の2つのフィールドを作成

  • テンプレート側で切り替えて表示

コード例:

if ($config->env == 'production') {
  echo $page->body_prod;
} else {
  echo $page->body_test;
}

※ $config->env は /site/config.php にて自作変数を設定

メリット:

  • クライアントは一つのページで編集完結できる

デメリット:

  • テンプレートが複雑になるので注意

セキュリティ・SEO対策も忘れずに

テスト用ページに必要な対応

  • .htaccess やBasic認証でアクセス制限

  • <meta name="robots" content="noindex"> で検索除外

  • Google Search Consoleにも登録しない

方法 管理しやすさ 安全性 備考
チェックボックス方式 ◎ △ ニュースなど動的コンテンツに最適
複製ページ方式 ○ ◎ 静的ページにおすすめ
フィールド切り替え方式 △ ○ 複雑なページ構成に柔軟対応

こんな案件におすすめ!

  • 社内確認後に公開したい クライアント様

  • ステージング環境のコストを抑えたい 制作会社

  • 柔軟な更新・反映フロー を求めているディレクター

ProcessWireなら、「柔らかくて強い」 コンテンツ管理が実現できます。

ぜひ、運用設計に取り入れてみてください!

関連記事

  • ProcessWireをおすすめする理由
  • ProcessWireでフォーム送信処理に必要な読み込みファイル
  • ProcessWireをサーバにアップロードする手順
  • ProcessWireにおけるsortパラメータ活用術とカスタムフィールドによる柔軟な並び順制御
  • 【SEO対策】ProcessWireで自動サイトマップ(インデックス)の生成と送信方法

Back to list

© 2019- MUSOU.