--- title: "_s(underscores)でテーマ作成するための準備" canonical_url: "https://olein-design.com/blog/ready-for-creating-theme-by-underscores" language: "ja" date_published: "2014-12-09T16:26:21+09:00" date_modified: "2014-12-09T16:26:21+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "WordPress" post_tag: - "underscores" --- # _s(underscores)でテーマ作成するための準備 今回から数回に分けて**_s（underscores）を利用してWordPressテーマを作成する**手順をご紹介していこうと思います。 とはいっても、僕も学習しながらそれらをまとめていく形になりますので、記事の内容に関して間違いもあるかもしれません。ご指摘やご感想などいただければと思います。 ## なんで_s（underscores）を使ってみようと思ったのか 今までWordPressに関するお仕事をする際には大きく分けて２つの流れがありました。１つは、**既存のテーマをカスタマイズして利用する**方法。そして、もう一つは**ゼロベースでテーマを開発する**方法です。 多いのはどちらかというと後者の方なのですが、作業の大まかな流れとしては以下のようになります。 1. デザインを確定する（IllustratorもしくはPhotoshopなどを用いて） 2. それらをコーディングする（HTML/CSS/jQueryなど） 3. ブラウザにて検証（Chromeとか~~IEとか~~） 4. WordPressテーマ化する（WordPressのテンプレートタグなどを入れていく） 5. WordPress上で実際に検証する 大まかにこのような流れですかね（実際は作業によって流れは様々です）。 この流れの中で４番目の項目あたりに該当する作業なのですが、WordPressテーマにする際の作業をもっと効率化できないかと日々考えていました。 既存のテーマまたは有料テーマなどをカスタマイズする方が楽に感じることもあるのですが、やはりある程度の形になっているものを変更していくには無理をする必要が出てくるときもあります。そのテーマとしてはベストな状態になっているものに、修正・変更を加えて自分用（もしくはクライアント用）にしていくので、追加したい仕様や変更したい内容によっては無理くり実装しないといけない場合も少なくありません。 であるのであれば、ゼロベースで作った方がトラブルも少ないし…と考えてしまうのですが、クライアントの予算都合によってはゼロベースでの開発までの予算が出せないという状況も発生します。 ゼロベースでなくとも開発しやすいプレーンなものはないかと考えていたら、**underscores**のことをすっかり忘れていました。ということで、**underscores**を触ってみて実践に活かせるようになろう！と考えたわけです。 ## _s（underscores）ってなに？ 僕もあまり詳しく知っているわけではないのですが、[こちらのサイト](http://gatespace.jp/2012/12/19/underscores00/)に記載されている文章を引用させていただきます。 > _s（underscores）はWordPressのテーマです。Automattic社のテーマチームが汎用テーマを作るために自社開発しました（HTMLでいえばフレームワークですかね）。 **ハッキング（カスタマイズ）されることを前提として作られている**そうです。詳しくはこちらの記事に記載がございます。 [スターターテーマ _s を使ってWordPressのテーマをつくる（準備編） | Gatespace's Blog](http://gatespace.jp/2012/12/19/underscores00/)[!\[\](http://b.hatena.ne.jp/entry/image/http://gatespace.jp/2012/12/19/underscores00/)](http://b.hatena.ne.jp/entry/http://gatespace.jp/2012/12/19/underscores00/) --- では、今回は**「_s（underscores）でテーマ作成するための準備」**という内容です。よろしくお願いします。 ## まずは_s（underscores）をダウンロードする [Underscores | A Starter Theme for WordPress](http://underscores.me/)[!\[\](http://b.hatena.ne.jp/entry/image/http://underscores.me/)](http://b.hatena.ne.jp/entry/http://underscores.me/) Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don ... まずはこちらにアクセスして_s（underscores）をダウンロードしてきます。 ![](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-01-1-1024x630.png) `Theme Name`と入力フォームにありますので、そちらに今からダウンロードして制作する**テーマの名前**を入力します。英数字で入れましょうね。 そして、入力フォームの下に`Advanced Options`とあります。こちらは**テーマ名だけではなく、もう少しカスタマイズした状態のものが欲しい**時に利用します。今回はこちらを利用した方法もご紹介します。 ![ready-for-underscores-02-1](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-02-1-1024x319.png) `Advanced Options`をクリックすると上のような画面になります。項目の内容を説明すると上から順にこのようになります。 - Theme Name : テーマの名前 - Theme Slug : テーマのフォルダの名前 - Author : テーマを作る人の名前 - Author URI : テーマを作る人のURL - Description : テーマの説明 こちらの内容に沿って順に埋めていくと、僕の場合こうなりました。 ![ready-for-underscores-02](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-02-1024x319.png) 一番下の`_sassify!`の部分ですが、開発にSassを利用したい方はチェックを入れると、それ用のファイルを生成してくれます。 必要事項を入力したら【GENERATE】ボタンを押してunderscoresをダウンロードしましょう。 ## テーマを反映させる ![](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-03-1-1024x825.png) 管理画面から【外観】を選択すると上のような画面になります。右下の【新しいテーマを追加】をクリックして進みましょう。 ![ready-for-underscores-04](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-04-1024x232.png) すると、このようなページに移動します。【テーマのアップロード】をクリックします。 ![ready-for-underscores-05](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-05-1024x272.png) テーマファイルを選択する画面となりますので、先ほどダウンロードした_s（underscores）ファイルを選択します。（今回の場合だと、olein.zipという圧縮ファイルになります） ![ready-for-underscores-06](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-06-1024x267.png) 【いますぐインストール】をクリックしてインストールを開始します。 ![ready-for-underscores-07](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-07-1024x229.png) 正常にインストールが終了すると、このようにテーマを有効化することができます。 ![ready-for-underscores-09](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-09-1024x767.png) デフォルトのテーマ（この場合はTwenty fourteen）はこちらで… ![](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-10-1-1024x825.png) _s（underscores）のプレーンはこのような状態になっています。 これでテーマをサイトに反映させることができました。 ## WordPressテーマ開発環境を整える 余談ではありますが、WordPressテーマを作成していくにあたって必要な環境をご紹介します。といっても受け売りなので、詳しくはこちらの記事を参照ください。 [スターターテーマ _s を使ってWordPressのテーマをつくる（準備編・補足） | Gatespace's Blog](http://gatespace.jp/2013/01/07/underscores01/)[!\[\](http://b.hatena.ne.jp/entry/image/http://gatespace.jp/2013/01/07/underscores01/)](http://b.hatena.ne.jp/entry/http://gatespace.jp/2013/01/07/underscores01/) ### テスト環境を用意する どのような環境でもいいので自分が使いやすいテストできる環境を作っておくべきだと思います。実際に走っているサイトに直に修正を加える勇気があれば別ですが怖くてできませんよね？ 僕の場合は、ローカル開発環境としてMAMPを利用して構築しています。といっても、とても簡単にWordPress環境を導入することができるのでオススメです。 [MAMP & MAMP PRO](http://www.mamp.info/en/)[!\[\](http://b.hatena.ne.jp/entry/image/http://www.mamp.info/en/)](http://b.hatena.ne.jp/entry/http://www.mamp.info/en/) ### WordPressをデバッグモードにする WordPressテーマを開発していくにあたって、WordPress自体にエラーが発生した場合に知らせてくれるように設定しておきます。 `wp-config.php`のファイルを修正することで実現できます。 記事執筆時の_s（underscores）のバージョンでは`wp-config.php`の75行目に、 ![ready-for-underscores-11](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-11.png) ``` define('WP_DEBUG', false); ``` とありますが、こちらを ![ready-for-underscores-12](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-12.png) ``` define('WP_DEBUG', true); ``` に変更するだけで設定終了です。 ### テストデータをインポートする WordPressにサンプルのデータをインストールしておきます。こちらのデータは、WordPressで必要になり得る状況をある程度網羅した**表示確認に最適なサンプルデータ**です。 まずはこちらでデータをダウンロードしてきましょう。 [テーマユニットテスト - WordPress Codex 日本語版](http://wpdocs.sourceforge.jp/Theme_Unit_Test)[!\[\](http://b.hatena.ne.jp/entry/image/http://wpdocs.sourceforge.jp/Theme_Unit_Test)](http://b.hatena.ne.jp/entry/http://wpdocs.sourceforge.jp/Theme_Unit_Test) ![](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-14-1-1024x555.png) 【管理画面】の【ツール】より【インポート】と進み【WordPress】を選択し、インポート用のプラグインをまずはインストールして有効化します。 その後、こちらのような画面になります。先ほどダウンロードしたサンプルデータのxmlファイルを選択しましょう。画像ではエラーが吐き出されていますが見てないことにしてくださいw） ![](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-16-1-1-1024x522.png) インポートを開始すると、各種インポートする項目が出てきます。その際に、一番したの【Import Attachments】のところをチェックして【Submit】します。必要が画像等も一緒にダウンロードしてきて入れてくださいというチェックです。 ![ready-for-underscores-17](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-17.png) その後、「Have fun!」と表示されれば完了です。 ![ready-for-underscores-18](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-18-1024x445.png) インポートされたサンプルデータはこのように表示されている状態になります。 ![ready-for-underscores-19](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-19-1-1024x993.png) ### テーマチェックプラグインを導入する 最後になりますが、テーマを制作していくにあたって異常がないかを厳しくチェックしてくれるプラグインを入れておきます。 【管理画面】の【プラグイン】、【新規追加】と進み**「Theme-Check」**というプラグインを検索します。 ![ready-for-underscores-20](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-20-1024x229.png) 該当するプラグインが表示されますので、インストールして完了です。 ## まとめ まずは最初ですので、基本的な導入部分の説明になりました。 テーマのダウンロードから、開発環境についても言及しましたが、最終的には自己判断で必要な環境を作っていってもらえれば問題ないかと思います。僕の場合ですと、Gulp.jsで環境を作ったりしています。とても便利ですよね、Gulp。 次回からは細かく区切りながら_s（underscores）カスタマイズ方法をご説明できるよう、頑張って勉強します。