WordPressはローカル環境で検証がしにくいので、サーバ環境で作りたくなりますね。 ローンチ前はいいけども、ローンチしたらユーザーが見てるページで作成中の姿を見せるわけにはいかない。。 そんな時に、思う存分テストができる環境を考えました。
目次：
※参考：WordPressについてはこちら
ざっくりWordPress：PHP書式とテンプレートタグの識別-前編 - クモのようにコツコツと
ざっくりWordPress：PHP書式とテンプレートタグの識別-前編 - クモのようにコツコツと
投稿ページではなく固定ページで
投稿ページと固定ページでは基本的にできることは同じなので、投稿ページ上で何かやりたい場合もテストは固定ページで行いましょう。
そうすれば、カテゴリのアーカイブに上がることはありません。
完成したらその内容を投稿ページに反映すればいいのです。
固定ページを非公開に
固定ページの編集画面内でパーマリンク は任意で設定できます。「test」などのわかりやすい名前をつけましょう。
さらに念のため、固定ページは非公開設定にします。
http://hoge.jp/test/
などURLにダイレクトに入力してもページが表示されなくなります。
（ページはユーザーがログインしているときだけ表示されます）
テスト用のphpファイルを作成
次にテーマ（themes）フォルダの中にテスト用のphpファイルを作成します。
固定ページの大元はpage.phpなので、パーマリンク がtestの場合はpage-test.phpというファイルを作るとテストページにだけに適用されます。
プラグインテスト
テストページ本文内にプラグインのショートコードを配置すると、プラグインがどんなものかを試すことができます。
[hoge]
作り込みもここで思う存分行えますね。
また、本文だけでなく、テーマファイル内にショートコードを埋め込みたい場合もあると思います。
page-test.php内に下記のような埋め込みコードを書くと、その検証もできます。
<!--ショートコード埋め込み--> <?php echo do_shortcode('[hoge]'); ?>
カスタムフィールドやフォームなど大掛かりなプラグインもこのページなら気兼ねなく試すことができます。
ウィジェットテスト
ウィジェットの検証を行いたい場合は、まずfunctions.php内にテスト用のウィジェット領域を作成します。
register_sidebar( array(
'name' => 'Test',
'id' => 'test',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2 class="rounded">',
'after_title' => '</h2>',
) );
次にpage-test.php内に下記のコードを書きます。
<!--テスト用ウィジェット--> <div class="test"> <?php dynamic_sidebar( 'test' ); ?> </div>
ダッシュボードの「外観＞ウィジェト」の中には「test」というウィジェット領域が増えているので、その中に試してみたいウィジェットを投げてみましょう。 テストページに表示されます。
外部PHPファイルのインクルード
WP_Query（サブループ ）など、サイト内で使いまわしたい共通パーツは外部PHPファイルにしますよね。
外部PHPファイルもまずはテストページにだけインクルードすれば存分に作り込みができます。
例えばincというフォルダの中にtest.phpというパーツファイルを作った場合は下記のように書きます。
<!--PHPパーツインクルード --> <?php get_template_part('inc/test'); ?>
別デザインのテスト
本体サイトとは別デザインのページやカテゴリを作りたい時、header.phpとば別ファイルを作ります。 今回はheader-test.phpという名前にするとします。
page-test.php内のheaderインクルードの引数にはtestを入れます。
<!--テスト用ヘッダー読み込み--> <?php get_header('test'); ?>
そうするとheader.phpではなくheader-test.phpが読み込まれます。
header-test.phpの中でCSSファイルを先行して試すことができます。
<!--CSSファイル読み込み--> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/hoge.css">
このヘッダーに独自にカスタムメニューを作ることもできますね。
JSファイルをフッターに書きたい場合は同様にfooter-test.phpを作り、footerインクルードの引数にtestを入れます。
<!--テスト用フッター読み込み--> <?php get_footer('test'); ?>
CSSと同様にJSファイルもテストページだけで試すことができます。
<!--JSファイル読み込み--> <script src="<?php echo get_template_directory_uri(); ?>/js/hoge.js"></script>
まとめ
ローンチ後にサイトをガラッと変える作業って何気に身動きが取りにくいなーと思っていて、こっそり水面下で（しかしながら思う存分）テストができないもんかと考え、たどり着いた方法です。こういうページが1ページくらいあってもいいかと思い、思いつく範囲でやりたいことを詰め込んでみましたー。
