WordPress のデザインをちょっと変更したいな、というときに管理画面から直接 CSS をいじって失敗したことがあるかもしれません。
テストブログを作ったりローカル環境を整えておけばそんな失敗は防げるのですが、それはそれで面倒ですよね。できれば、読者には今までと同じデザインを見せておいて、裏でこっそりカスタマイズしたい…。
そんな願いをあっさりかなえてくれるのが「Theme Test Drive」というプラグインです。使い方を解説していきますので、ご覧ください。
Headline
誰にも見られずにテーマをカスタマイズする方法
プラグインをご紹介する前にちょっとだけ寄り道。
もしメインとなるブログをひとつだけ運営しているのであれば、先述のとおりカスタマイズ専用のブログを作ってしまう方法があります。
- ローカル環境で作る
- サブドメインで作る
- 無料サーバーを使う
本格的にテーマを開発したり、現行テーマを大幅にカスタマイズするのであればこういった環境があると便利です。気になるプラグインもまずテスト用で試して、というのができますね。
ただし、見出しのデザインをちょっと変えるとか、フォントカラー・サイズを変えるぐらいのカスタマイズであれば、わざわざテスト用の環境を作るのは大げさな気がします。
運営中のブログと同じ環境を再現するなら、記事本文やカテゴリーなどの構造と本体のバージョンやプラグインをメインブログと同じにしなければなりません。
とは言うものの、やはり運営中のブログを直接いじるのはちょっと不安が残ります。
余白を調整したらカラム落ちしてしまった！ ループ処理のミスで表示がおかしくなった！ なんていうのはよくある話。
というわけで、現在運営中のブログを表向きはそのままに、裏側でこっそりカスタマイズできる方法が理想です。それを実現できるのが「Theme Test Drive」というプラグインなのです。
Theme Test Drive のインストールと設定方法
それでは、さっそく使い方を見ていきましょう。
このプラグインは、読者に対しては現行のテーマを見せ、ログインしている管理人だけ別のテーマを反映させる仕組みになっています（設定によっては寄稿者にも見せたりできます）。
まずはバックアップを忘れずに
裏側でこっそりやるにしても、どんなトラブルが起きるかわかりません。作業を開始する前には必ずバックアップをとりましょう。
備えあれば憂いなしです。
プラグインのインストール
インストール方法は他のプラグインと同じで難しいことはありません。
WordPress のサイトからダウンロードするか、管理画面から検索してインストールします。
インストール後、管理画面のサイドバー［外観］に「Theme Test Drive」の項目が追加されます。
それでは、設定画面に移動してみましょう。
設定画面で調整したいテーマとレベルを決める
設定画面はシンプルで難しい点はとくにありません。
設定項目は「カスタマイズしたいテーマ」と「アクセスレベル」のみ。
すでにテーマがインストールされている場合、プルダウンからどれを調整したいのか選択できます。
アクセスレベルの設定は下記のようになっています。
- LEVEL 10 ・・・管理者
- LEVEL 7 ・・・編集者
- LEVEL 4 ・・・投稿者
- LEVEL 1 ・・・寄稿者
複数人で運営している場合は、どこまで見せたいか設定しましょう。自分ひとりで運営しているなら、初期状態の LEVEL 10 で OK です。
設定を終えたら、「Enable Theme Drive」をクリック。これで、表（読者）と裏（管理者）で違うテーマが反映されます。
カスタマイズ作業が終わったら、「Disable Theme Drive」をクリックし、［外観］からテーマを変更すれば全作業終了！
テーマを複製してカスタマイズ用テーマを作成する方法
現在利用中のテーマから別のテーマへ変更する場合は、設定画面からテーマを指定するだけなので簡単です。
では、現在のテーマをカスタマイズしたい場合はどうすればよいのでしょうか。
そんなときは、カスタマイズ用にテーマを複製しておきましょう。この方法を知っておくと、Theme Test Drive を使うときのみならず、ローカル環境などで作業するときも役立ちますよ！
テーマ複製の手順は以下のとおりです。
- FTP で現在のテーマをダウンロード
- フォルダ名を変更
- CSS を書き換え
- 変更済みのテーマをアップロード
順番に解説します。
現行テーマをダウンロードする
最初に、現在利用しているテーマをダウンロードします。バックアップの記事でも解説していますが、FTP ソフトを利用します。
テーマは WordPress 本体がある場所から、「wp-content/themes」の中に格納されています。
サーバーで用意されている簡単インストール機能を使ったのであれば、たいていはルートディレクトリに WordPress があるのですぐに見つけられると思います。
- エックスサーバーの場合
- ドメイン名/public_html/wp-content/themes
わかりやすくデスクトップにダウンロードしてみました。
フォルダ名を変更する
つづいて、ダウンロードしたフォルダの名前を書き換えます。
今まで利用していた「GUSH」という名前から「gush-naifix-edition」に変えてみました。
ここはお好みで OK です。
CSS を書き換える
WordPress にテーマ名を認識してもらうためには、CSS の変更も必要です。
テキストエディタで開くと、CSS はこのようになっていました。
ここで書き換えるのは、「Theme Name」です。先ほど変更したフォルダ名と同じにしておくとわかりやすいですね。
/* Theme Name: gush-naifix-edition Theme URI: https://naifix.com/ Description: レスポンシブデザインテーマ Version: 1.0 Author: Ellora Author URI: https://naifix.com/ */
概要である「Description」や「Version」もお好みで変更しておきましょう。
この時点で PHP などをカスタマイズしていっても大丈夫ですが、テキストエディタの設定に注意してください。文字コードは「UTF-8 BOMなし（UTF-8N）」で、改行コードは「LF」です。
ここを間違うと、エラーが出る可能性があります。
書き換えたテーマをアップロードする
フォルダ名と CSS を書き換えたら、テーマをアップロードします。
ダウンロードと逆の手順で FTP からアップロードするか、ZIP に圧縮して管理画面からインストール。通常のテーマインストール作業と同じです。
インストールすると、このように違うテーマとして認識してくれます。
ちなみに、テーマのイメージ画像（サムネイル）には「screenshot.png」が使われています。これも変更しておくとオリジナリティが出ますね。管理者しか見ないので自己満足ですけどｗ
Theme Test Drive のテーマ選択部分にも、カスタマイズ用テーマが加わっています。
まだ表から見るぶんにはデザインが変わっていませんが、裏側ではこのように作業が進行しています。
さて、どう変わるのでしょう。
まとめ
というわけで、テーマのカスタマイズを考えているなら、超便利なプラグイン「Theme Test Drive」をぜひ使ってみてください。
カスタマイズはしないけど、新しいテーマに変更したらどう見栄えが変わるのか試してみたい！ という時にもこのプラグインがあると便利ですよ。
それでは、また。