WordPressで独自テーマ作成環境をサクッと作る方法

面倒なテスト環境の構築は不要です。

そろそろテーマ変えたい季節ですね。

wordpress-logo-stacked-rgb

 ですよね?

 このサイトの現時点(2013/12)でのテーマは320pressさんの”wp-bootstrap”というテーマを使用しています。

 レスポンシブ対応したくて、Bootstrap(Twitter社)が実装された”wp-bootstrap”が気に入ってました。ちなみに、@masuidriveさんのブログも320pressさんのテーマのようです。(フッターを見る限りでは)

 気に入ってはいるのですが、色々改造しているうちに、逆に見づらくなったり、ソースがスパゲッティになって訳が分からない状態になってしまったので、WordPressのテーマ構造の勉強も兼ねて、自分でテーマを作ろうかと思っています。

どうやってテーマを作ろうか

 ただ、普通に考えると以下の方法でやるのかなぁと思ってしまいます。

1.ブログのデータのコピーとDBデータのダンプをローカルで落として作る。

wordpressで自分が運営するサイトを、全く同じ内容でコピーする.. – 人力検索はてな

2.ブログデータのコピーとDBデータのダンプをサーバの別ディレクトリにコピーして作る。

サーバーの別フォルダにWordPressのテスト環境を作る | フリーランスのWEBデザイン事務所:サカグチデザインオフィス

 ※ブログデータ:Wordpressのディレクトリ内のデータ

 …面倒くさい。せめて、テストディレクトリにブログデータをコピーして、本番DBをそのまま参照しながら、テーマを弄る程度で作りたいなぁ。

 と思ってたら、もっと簡単な方法がありました。

簡単!テーマ開発のテスト環境構築

 便利なプラグインがあります。「Theme Test Drive」というプラグインです。

 このプラグインの特徴は「WordPress」にログイン状態の場合でサイトにアクセスしたときのみ、指定したテーマに切り替わるという点です。

 つまり、新しいテーマファイルさえ用意しておけば、ブログ読者には影響を与えず、テーマをテストできるわけです。例えば、以下のようにすれば、新しいテーマを作る環境が構築できます。

1.「Theme Test Drive」をインストール
2.WordPressディレクトリ内の「wp-content/themes」にある今作ってあるテーマをコピー
(例: cp -r wordpress-bootstrap-master/ tkoyama-theme/)
3.テーマ名を変更。テーマディレクトリ名の変更だけではテーマ名が変わらないので、style.cssの先頭のコメントを書き換える。

無題2

4.「Theme Test Drive」からテーマ選択とアクセスレベル(10:管理者のみ)で「Enabled Theme Drive」を選択。

無題

 これでとりあえず、開発用のテーマファイルとテスト環境が用意できた。

※ちなみにテーマを戻したい時は「Disabled Theme Drive」を押すと元に戻すことができます。

テーマを作っていくにあたっての注意

 ということでこれからテーマを作っていきたいと思います。

 と、ちょっとその前に注意したいのが、テーマディレクトリ内とは別のファイルを修正したら、表示されているテーマにも影響するということ。当然と言えば、当然ですが、修正作業中についついテーマディレクトリ外のファイルも変更してしまうことがあります。注意しましょう。

 

Sponsored link

便利な商品紹介

オムロン クッションマッサージャ(マッサージクッション) HM-341-BG ベージュ

意外と気持ち良い

富士通 FUJITSU ScanSnap iX500 (A4/両面/Wi-Fi対応) FI-IX500A

自炊するならやっぱり持っておきたい。せっかくスキャンするならOCR付きにしておくに越したことはない。

Zenback

コメント

ブックマーク

ブログランキング

ページ上部へ戻る