--- title: "WordPress公式に登録するためのテーマ制作ことはじめ" canonical_url: "https://olein-design.com/blog/ready-for-uploading-to-wordpress-theme-directory" language: "ja" date_published: "2016-01-13T14:59:38+09:00" date_modified: "2016-01-13T14:59:38+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "WordPress" post_tag: - "WordPress" --- # WordPress公式に登録するためのテーマ制作ことはじめ 今年の目標の一つとして**「WordPress公式にテーマを登録する」**という、ずっとできていなかったことを掲げてみました。そして、善は急げではありませんが、とっかかりのスピードが大切だと思い、まずは**WordPressテーマ作成をするにあたって準備するもの**をリストアップしておこうと思います。 同じくテーマ制作をやってみようという方の参考になれば幸いです。 ## 開発環境 ネットなどで情報収集していると、テーマ開発やプラグイン開発には[Vagrantでvccw](http://vccw.cc/)を利用して・・・というような流れが専門的かつ拡張性が高いのかもしれませんが、どうしても個人的に敷居が高いと感じています。Vagrantも過去に挑戦していたりもするのですが常用に至りませんでした。 ### ローカル開発環境はMAMP ![MAMP MAMP PRO](https://olein-design.com/wp-content/uploads/2016/01/MAMP-MAMP-PRO.png) ということでMAMPです。 こちらは簡単にローカル開発環境を立ち上げることができるのでとても便利です。最低限テーマが動けば良いのであれば問題ないかなと感じています。 参照：[MAMP](https://www.mamp.info/en/) ### コーディングにはcoda ![Coda](https://olein-design.com/wp-content/uploads/2016/01/Coda.png) 基本的にコーディングやプログラミングはcodaを利用してきました。ローカル開発においてはFTPは必要ないですが、実際のWeb制作ではFTPも含めて一元管理できるので便利に使っています。 参照：[coda](https://panic.com/jp/coda/) ### コンパイラーはprepros ![Prepros Compile Less Sass CoffeeScript and much more with live browser refreshing.](https://olein-design.com/wp-content/uploads/2016/01/Prepros-Compile-Less-Sass-CoffeeScript-and-much-more-with-live-browser-refreshing..png) 以前はgrantやgulpを利用して自分専用のタスクランナーを持っていたのですが、なんか大所帯の割にはそんなに機能使ってないなと常日頃感じていて、何かのきっかけでpreprosを知り導入してみたら、全然十分だったため本格導入しております。 WordPressテーマ開発の場合には、Live Previewの設定がちょっと引っかかったりしましたが、ローカルホストのアドレスを設定してあげることで解決し、PHPも含めて全てのファイル変更に即時にリロードしてくれる便利なコンパイラーです。 参照：[prepros](https://prepros.io/) ## CSSフレームワーク ![twbs bootstrap sass](https://olein-design.com/wp-content/uploads/2016/01/twbs-bootstrap-sass-1.png) 簡単にレスポンシブ対応するために比較的有名なCSSフレームワークを導入しようと検討しています。 候補としては、Twitter BootstrapもしくはFoundationになるかと思いますが、ぶっちゃけると個人的にBootstrapを実案件でも利用することが多くあるため、こちらが採用される可能性が高いです。ですが、レスポンシブ対応だけであれば、別にもっと軽いフレームワークもあるかなとも思っていて、将来的に別フレームワークを導入したテーマを用意しておきたいなとも思っています。 参照：[Twitter Bootstrap Sass](https://github.com/twbs/bootstrap-sass) ## WordPressベーステーマ ![Underscores A Starter Theme for WordPress](https://olein-design.com/wp-content/uploads/2016/01/Underscores-A-Starter-Theme-for-WordPress.png) 完璧にゼロからコードを書いていくと途中で頓挫してしまいそうな気がするので、今回は_s（underscores）というベーステーマを利用しながら開発していこうと思います。 といっても、通常案件でも_sをベースに作ることは多く慣れ親しんでいる感覚は勝手に持っています。 参照：[_s(underscores)](http://underscores.me/) ## その他 他に注意しておいたほうがいいことなどアドバイスもらったことについてまとめておきます。 ### プラグインテリトリーについて これは[YATさん](http://wp.yat-net.com/)からアドバイスいただいたんですが、「プラグインに頼るところは頼る」という考え方らしいです。 この言葉自体は知らなかったのですが、以前から基本的にそういう考えで制作していた面もありまして、比較的同調しやすい考え方でした。 今回制作するテーマも、公式に上げることが目的なのではなく、あくまでも**仕事に使える親テーマとして**考えているので、プラグイン機能はしっかりとプラグインに任せて、テーマとして拡張性を持たせた物を作りたいなと考えています。 ### ローカル開発でのチェック まずは、`wp-config.php`でデバッグモードを`true`にしておくこと。これによって使ってはいけない表現や普段表示されないエラーなども拾うことができます。 そして、[Theme check](https://ja.wordpress.org/plugins/theme-check/)という公式に登録されているプラグインがあるのですが、こちらで随時エラーを確認することを忘れないようにしたいと思います。 最後に、HTMLやCSSなどのバリデートもちっかりと行っておくこと。おかしなコーディングをしないことにも注意したいと思います。 ## まとめ 簡単ではありますが、こんな形で**WordPress公式に掲載してもらえるテーマを制作**していきます。こちらでも随時進行を報告していければと思っています（Githubとかに上げるかなー）。 WordPressテーマ制作に興味のある方の参考になれば幸いです。