1. TOP
  2. FIELD JOURNAL
  3. FIELD JOURNAL
  4. MANABI
  5. テストサイトと本番サイトで 表示を切り替える方法

はじめまして、hashimotoです。

5月ですね。なんだかずっと春ですね。
いつもこのくらいの時期ってもう暑かった気がしますが、
気のせいでしょうか。
コロナのせいでしょうか。

過ごしやすくていいですね。

 

さて、日々サイトの更新などをやっているとテストサイトと本番サイトで
あえて表示内容に差異がある状態にして欲しい。と依頼が来ることはありませんか?
具体的にどういうことかと言いますと、

こんな風なスライダーがありまして、

テストサイト:1〜3枚目の画像全て表示
本番サイト :2枚目までの画像は表示させて、3枚目は指定の日に表示

 

というご依頼。
都度手作業でテストサイト用、本番サイト用にコードを書いてアップして。
でもいいですが、それだとファイル内で差分が出てしまう。
もっと良い方法ないかなぁ。。
 
そこで、1つのファイルで、テストサイトと本番サイトを切り替える方法をご紹介します。
(wordpressを導入したサイトで実装。)

1. .htaccessに環境変数を記述

このサイトはテストサイト、このサイトは本番サイト。
と環境ごとに切り替える設定をします。(環境変数)
(テストサイト、本番サイトどちらの.htaccessにも記述。
コメントアウトで切り分けます。)


----コメントアウト#を外して有効----

# テスト環境
SetEnv APP_ENV 'develop'

# 本番環境
# SetEnv APP_ENV 'production'

 

2. 環境変数の情報を取得

.htaccessで設定した環境の情報を取得します。
(自分はwp-config.phpに記述しました。)

$appEnv = getenv('APP_ENV');

 

3. テストサイト本番サイトで出し分けしたい箇所があるphpファイルに記述


<?php if ($appEnv == 'develop'):?>
<!-- テストサイトで表示させたいもの -->

<?php elseif ($appEnv == 'production'):?>
<!-- 本番サイトで表示させたいもの -->


<?php endif; ?>

 

今回の場合なら

<div class="mv-slide">
  <div class="mv-slideItem">
    <img src="<?php echo get_template_directory_uri(); ?>/images/mv-slideImg01"alt="スライド画像1">
  </div>
  <div class="mv-slideItem">
    <img src="<?php echo get_template_directory_uri(); ?>/images/mv-slideImg02"alt="スライド画像2">
  </div>
  
  <!-- テストサイトで表示させたいもの -->
  <?php if ($appEnv == 'develop'):?>
  <div class="mv-slideItem">
    <img src="<?php echo get_template_directory_uri(); ?>/images/mv-slideImg03"alt="スライド画像3">
  </div>

  <!-- 本番サイトで表示させたいもの -->
  <?php elseif ($appEnv == 'production'):?>
    
  <!-- 指定時間になったら表示 タイマースタート -->
  <?php if (strtotime('2021-05-13 10:00:00') <= time()): ?>
  <div class="mv-slideItem">
    <img src="<?php echo get_template_directory_uri(); ?>/images/mv-slideImg03"alt="スライド画像3">
  </div>
  <?php endif; ?>
  <!-- タイマー終了 -->

  <?php endif; ?>
</div>

 

4. まとめ

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

ファイルをテストサイト用と本番サイト用に2つ作る必要がなくなり、
ソースの差分もなく、ずいぶんスッキリしたのではないでしょうか。
 
タイマーや条件分岐などを削除するという、
ソースをきれいにする作業が後々発生してしまうのは残念ですが、致し方なしです。
 
それでは、またの機会に〜。

WRITTEN BY

WRITTEN USER ICON

hashimoto

エンジニア

欲しいソファーが高額すぎて、もういっそ作ってはどうかと迷走中

  • facebook
  • pocket
  • feedly

デザインパートナーを
お探しではありませんか?

フィールドは、グラフィックやウェブの制作を通して、企業の経営戦略をサポートするデザイン会社です。お客様からのご相談に、クリエイティブの力でお応えします。