WordPressの本番環境に影響を与えずにテスト用テーマの確認ができるプラグイン「Theme Test Drive」の使い方

2015.01.08
スポンサーリンク

201501_0182[4]

先日、当ブログのデザインを変更しました。

ブログデザインをリニューアル＆ブログタイトルを「ラブグアバ」に変更しました！

デザイン変更とは言え、今回はテーマをまるっと差し替える対応になったのですが、そうなると困るのが作成中テーマの確認方法です。

さすがに現在稼動しているブログに作成中テーマを適用するわけにはいきません。せっかくのデザイン変更、サプライズ感を出したいですから。

で、私が思い浮かんだのは、

  • ローカル（自分のパソコン）に環境を作る
  • 別ブログを立ち上げる

くらいだったのですが、今回デザイン変更をお願いしたQtaroさんが「Theme Test Drive使うと良いですよー」というのを教えてくれました。で、使ってみたのですが、これがめちゃくちゃ便利だったんですよ！

もしこれがなければ、作成中テーマの確認ができない上に、本番環境へ新テーマを適用する際にももっと手こずってしまうのは間違いなかったでしょう。

今回は、作成中のWordPressテーマのテストや動作確認に使える「Theme Test Drive」プラグインの特徴や使い方をご紹介したいと思います。

スポンサーリンク

Theme Test Driveプラグインの特徴

Theme Test Driveの何が優れているのか？その点を挙げてみましょう。

一般の人には現在のテーマが表示される

当たり前なんですけど、検索やSNS経由でブログにアクセスしてきてくれた人達にはこれまでとなんら変わりのないブログが表示されます。

つまり、特定の人のみ作成中テーマが確認できる状態を簡単に作れるわけです。

作成中テーマを見れるユーザーは限定できる

上記で「特定の人のみ見れるようになる」と書きましたが、これは自分で設定できます。

WordPressユーザーの権限によってテストテーマを見れるかどうかを制御できるんですね。詳細は使い方のところで説明します。

実際に使用しているサーバー環境で動作確認できる

作成中テーマをWordPress用サーバーにアップして確認するわけなので、限りなく本番環境に近い状態でテストが可能です。

ローカル環境とサーバー環境の微妙な違いが原因で不具合や差異が生じるというのはわりとよくあることです。

使用するデータ（データベースや画像ファイルなど）も本物なので、環境の違いによる不具合が発生するリスクを極小化できます。これはすごいです。

スポンサーリンク

Theme Test Driveプラグインをインストールする

さて、一通り特徴を説明したところで、実際に使ってみたいと思います。

まずTheme Test Driveがなくては話になりません。いつものように「Theme Test Drive」で検索してインストールしましょう。有効化するのをお忘れなく。

201501_0185[4]

スポンサーリンク

Theme Test Driveプラグインの使い方

使い方と言っても、ちょっとした設定を施すだけです。

▼WordPressの管理メニューの「外観」→「Theme Test Drive」をクリック。

201501_0184[4]

▼Theme Test Driveの設定画面が表示されます。

201501_0183

変更すべきは2箇所です。

1つ目はテーマの選択です。テストしたいテーマをプルダウンリストから選択します。

2つ目はAccess level（アクセスレベル）です。これは、WordPressにログインできるユーザーの権限を意味します。

ユーザー権限については以下を参考に。

ユーザーの種類と権限 – WordPress Codex 日本語版

自分だけ（＝ブログ管理者だけ）でよいなら「10」を指定します。複数人でブログを運営していて、例えば「投稿者ユーザー（アクセスレベル＝4）」にテスト用テーマを確認してもらいたい場合は「4」を指定します。

設定できたら「Enable Theme Drive」をクリックします。これを押さないと適用されません。反対に、解除するときは「Disable Theme Drive」をクリックします。

必要に応じてユーザーを作成しよう

自分だけ確認するのであればここまでで終わりですが、上記のように自分以外の誰かも確認できるようにしたい場合、ユーザーの作成または権限グループを確認しておきましょう。

▼ユーザーを新規作成する場合、WordPressの管理メニューの「ユーザー」→「新規追加」をクリック。

201501_0186

ここの「権限グループ」というのが先ほど説明したアクセスレベル（＝ユーザーレベル）と関係してきます。権限グループとユーザーレベルの対応表は以下のとおりです。

  • 購読者…レベル0
  • 寄稿者…レベル1
  • 投稿者…レベル4
  • 編集者…レベル7
  • 管理者…レベル10

記事を投稿するわけでなく、ただ作成中テーマを確認するためだけなら「購読者」ユーザーで事足りるはずです。不必要な権限は与えないほうが良いでしょう。

ログインしたユーザーのみテスト中テーマが見れるようになる

これで設定は完了です。設定画面で指定したアクセスレベル以上の権限を持ったユーザーでログインし、その状態でブログにアクセスしてみましょう。すると、テスト中のテーマが見れるはずです。

実に簡単でしたね！

まとめ

本番環境に影響を及ぼすことなく開発中テーマの確認ができるTheme Test Driveプラグインのご紹介でした。

新たなテーマをちょっと試してみたいな…と思うときには絶対役に立つプラグインだと思います。

＜関連記事＞

WordPressのDBやファイルをバックアップしてくれるプラグイン「BackWPup」の設定方法

これからWordPressでブログを始める初心者に知っておいてほしい7つのこと

WordPressのテーマを変更するときに気をつけておきたいポイントまとめ

あなたもアフィリエイト✕アドセンスで稼げる! はじめてのWordPress本格ブログ運営法
posted with ヨメレバ
大串 肇,染谷 昌利,北島 卓,清野 奨,福嶌 隆浩 エムディエヌコーポレーション 2017-07-11
Amazon
Kindle
楽天ブックス
楽天kobo
WordPress
スポンサーリンク
シェアする
ラブグアバをフォローする
スポンサーリンク
グアバ
ラブグアバ
スポンサーリンク
',b.captions&&s){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=s,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",r),c.alt=a&&a.alt||"",b.titleTag&&s&&(c.title=s),l.appendChild(c),b.async&&n&&n()}}function X(){return M(o+1)}function D(){return M(o-1)}function M(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(q(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||q(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||q(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n","http://www.w3.org/2000/svg"===(e.firstChild&&e.firstChild.namespaceURI)}(),m.passiveEvents=function i(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(n){}return e}(),function a(){if(r=G("baguetteBox-overlay"))return l=G("baguetteBox-slider"),u=G("previous-button"),c=G("next-button"),void(d=G("close-button"));(r=J("div")).setAttribute("role","dialog"),r.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(r),(l=J("div")).id="baguetteBox-slider",r.appendChild(l),(u=J("button")).setAttribute("type","button"),u.id="previous-button",u.setAttribute("aria-label","Previous"),u.innerHTML=m.svg?f:"<",r.appendChild(u),(c=J("button")).setAttribute("type","button"),c.id="next-button",c.setAttribute("aria-label","Next"),c.innerHTML=m.svg?g:">",r.appendChild(c),(d=J("button")).setAttribute("type","button"),d.id="close-button",d.setAttribute("aria-label","Close"),d.innerHTML=m.svg?p:"×",r.appendChild(d),u.className=c.className=d.className="baguetteBox-button",function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;U(r,"click",x),U(u,"click",E),U(c,"click",C),U(d,"click",B),U(l,"contextmenu",A),U(r,"touchstart",T,t),U(r,"touchmove",N,e),U(r,"touchend",L),U(document,"focus",P,!0)}()}(),S(e),function s(e,a){var t=document.querySelectorAll(e),n={galleries:[],nodeList:t};return w[e]=n,[].forEach.call(t,function(e){a&&a.filter&&(y=a.filter);var t=[];if(t="A"===e.tagName?[e]:e.getElementsByTagName("a"),0!==(t=[].filter.call(t,function(e){if(-1===e.className.indexOf(a&&a.ignoreClass))return y.test(e.href)})).length){var i=[];[].forEach.call(t,function(e,t){var n=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,H(i,a),I(t)},o={eventHandler:n,imageElement:e};U(e,"click",n),i.push(o)}),n.galleries.push(i)}}),n.galleries}(e,t)},show:M,showNext:X,showPrevious:D,hide:j,destroy:function e(){!function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;W(r,"click",x),W(u,"click",E),W(c,"click",C),W(d,"click",B),W(l,"contextmenu",A),W(r,"touchstart",T,t),W(r,"touchmove",N,e),W(r,"touchend",L),W(document,"focus",P,!0)}(),function t(){for(var e in w)w.hasOwnProperty(e)&&S(e)}(),W(document,"keydown",F),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),w={},h=[],o=0}}});