2016/09/2135 Shares

WordPressテーマカスタマイズに便利な「Theme Test Drive」の使い方

カスタムカー

WordPress ブログでデザインを変更したいなー、という時に管理画面から直接 CSS をいじって失敗したことがあるかもしれません。僕は何度かありますw

調整用のブログを作ったりローカル環境を整えておけばそんな失敗は防げるのですが、それはそれで面倒ですよね。できれば、読者には今までと同じデザインを見せておいて、裏でこっそりカスタマイズしたい。

そんな願いをあっさりかなえてくれるプラグインをご紹介します。

追記

(2015/11/26)

しばらく公式サイトから削除されていましたが、いつの間にか元どおり使えるようになっていました。

誰にも見られずにテーマをカスタマイズする方法

プラグインをご紹介する前にちょっとだけ寄り道。

もしメインとなるブログをひとつだけ運営しているのであれば、先述のとおりカスタマイズ専用のブログを作ってしまう方法があります。

  • ローカル環境で作る
  • サブドメインで作る
  • 無料サーバーを使う

本格的にテーマを開発したり、現行テーマを大幅にカスタマイズするのであればこういった環境があると便利です。気になるプラグインもまずテスト用で試して、というのができますね。

ただし、見出しのデザインをちょっと変えるとか、フォントカラー・サイズを変えるぐらいのカスタマイズであれば、わざわざテスト用の環境を作るのは大げさな気がします。

運営中のブログと同じ環境を再現するなら、記事本文やカテゴリーなどの構造と本体のバージョンやプラグインをメインブログと同じにしなければなりません。

自分の PC に WordPress をインストールする方法はこちら

PCにWordPressを!BitNamiインストールと日本語化までの全手順

とは言うものの、やはり運営中のブログを直接いじるのはちょっと不安が残ります。

余白を調整したらカラム落ちしてしまった! ループ処理のミスで表示がおかしくなった! なんていうのはよくある話。

というわけで、現在運営中のブログを表向きはそのままに、裏側でこっそりカスタマイズできる方法が理想です。それを実現できるのが「Theme Test Drive」というプラグインなのです。

Theme Test Drive のインストールと設定方法

それでは、さっそく使い方を見ていきましょう。

このプラグインは、読者に対しては現行のテーマを見せ、ログインしている管理人だけ別のテーマを反映させる仕組みになっています(設定によっては寄稿者にも見せたりできます)。

まずはバックアップを忘れずに

裏側でこっそりやるにしても、どんなトラブルが起きるかわかりません。作業を開始する前には必ずバックアップを。

WordPress初心者でも簡単にできるバックアップ方法

備えあれば憂いなしです。

プラグインのインストール

Theme Test Drive
Theme Test Drive

インストール方法は他のプラグインと同じで難しいことはありません。

WordPress のサイトからダウンロードするか、管理画面から検索してインストールします。

管理画面からインストールする場合は「Theme Test Drive」で検索

管理画面からインストールする場合は「Theme Test Drive」で検索

インストール後、管理画面のサイドバー[外観]に「Theme Test Drive」の項目が追加されます。

管理画面にTheme Test Driveが追加される

それでは、設定画面に移動してみましょう。

設定画面で調整したいテーマとレベルを決める

設定画面はシンプルで難しい点はとくにありません。

Theme Test Drive 設定画面

設定項目は「カスタマイズしたいテーマ」と「アクセスレベル」のみ。

すでにテーマがインストールされている場合、プルダウンからどれを調整したいのか選択できます。

アクセスレベルの設定は下記のようになっています。

  • LEVEL 10 ・・・管理者
  • LEVEL 7 ・・・編集者
  • LEVEL 4 ・・・投稿者
  • LEVEL 1 ・・・寄稿者

複数人で運営している場合は、どこまで見せたいか設定しましょう。自分ひとりで運営しているなら、初期状態の LEVEL 10 で OK です。

設定を終えたら、「Enable Theme Drive」をクリック。これで、表(読者)と裏(管理者)で違うテーマが反映されます。

カスタマイズ作業が終わったら、「Disable Theme Drive」をクリックし、[外観]からテーマを変更すれば全作業終了!

テーマを複製してカスタマイズ用テーマを作成する方法

現在利用中のテーマから別のテーマへ変更する場合は、設定画面からテーマを指定するだけなので簡単です。

では、現在のテーマをカスタマイズしたい場合はどうすればよいのでしょうか。

そんなときは、カスタマイズ用にテーマを複製しておきましょう。この方法を知っておくと、Theme Test Drive を使うときのみならず、ローカル環境などで作業するときも役立ちますよ!

テーマ複製の手順

  1. FTP で現在のテーマをダウンロード
  2. フォルダ名を変更
  3. CSS を書き換え
  4. 変更済みのテーマをアップロード

順番に解説します。

現行テーマをダウンロードする

最初に、現在利用しているテーマをダウンロードします。バックアップの記事でも解説していますが、FTP ソフトを利用します。

テーマは WordPress 本体がある場所から、「wp-content/themes」の中に格納されています。

サーバーで用意されている簡単インストール機能を使ったのであれば、たいていはルートディレクトリに WordPress があるのですぐに見つけられると思います。

エックスサーバーの場合
ドメイン名/public_html/wp-content/themes

わかりやすくデスクトップにダウンロードしてみました。

テーマファイルをデスクトップに保存

フォルダ名を変更する

つづいて、ダウンロードしたフォルダの名前を書き換えます。

今まで利用していた「GUSH」という名前から「gush-naifix-edition」に変えてみました。

テーマフォルダの名前を任意に変更

ここはお好みで OK です。

CSS を書き換える

WordPress にテーマ名を認識してもらうためには、CSS の変更も必要です。

テキストエディタで開くと、CSS はこのようになっていました。

WordPressテーマのCSS

ここで書き換えるのは、「Theme Name」です。先ほど変更したフォルダ名と同じにしておくとわかりやすいですね。

概要である「Description」や「Version」もお好みで変更しておきましょう。

この時点で PHP などをカスタマイズしていっても大丈夫ですが、テキストエディタの設定に注意してください。文字コードは「UTF-8 BOMなし(UTF-8N)」で、改行コードは「LF」です。

ここを間違うと、エラーが出る可能性があります。

書き換えたテーマをアップロードする

フォルダ名と CSS を書き換えたら、テーマをアップロードします。

ダウンロードと逆の手順で FTP からアップロードするか、ZIP に圧縮して管理画面からインストール。通常のテーマインストール作業と同じです。

インストールすると、このように違うテーマとして認識してくれます。

カスタマイズ用テーマの複製完了

ちなみに、テーマのイメージ画像(サムネイル)には「screenshot.png」が使われています。これも変更しておくとオリジナリティが出ますね。管理者しか見ないので自己満足ですけどw

Theme Test Drive のテーマ選択部分にも、カスタマイズ用テーマが加わっています。

Theme Test Drive 設定画面に新しいテーマが追加

まだ表から見るぶんにはデザインが変わっていませんが、裏側ではこのように作業が進行しています。

Naifix テーマ変更テスト中

さて、どう変わるのでしょう。

まとめ

というわけで、テーマのカスタマイズを考えているなら、超便利なプラグイン「Theme Test Drive」をぜひ使ってみてください。

ふつうは、テーマをガラリと変えた後に『実はこのプラグインを使って裏でこっそり作業していました!』と紹介するところですが、あえて逆にしてみました。

新年度がスタートする 4 月には新デザインにしたいなーと考えていますが、どうなることやら。

追記2015.2.20 新テーマ稼動しました

カスタマイズはしないけど、新しいテーマに変更したらどう見栄えが変わるのか試してみたい! という時にもこのプラグインがあると便利ですよ。

それでは、また。