最近、WordPressのテーマを制作することが多くなってきています。

その制作の道中によく使うものをまとめておこうと思います。

フレームワーク的な

よく使うフレームワーク的なものはこちら。

bootstrap-sass

bootstrapをsassで利用できる公式のもの。昔はこれを直接組み込んでごにょごにょしていましたが、最近は開発環境の中に最初から組み込んでおいて、そこで使うか使わないかをプロジェクトごとに随時選択するような感じになっています。

bootstrap-sass

underscores

WordPressテーマを制作するにあたって色々なフレームワークがあります。bonesとかrootsとか。触ってみたりもするのですが、一番良く使うunderscoresに勝るまでにはまだ至りません。automattic社制作っていうところもあると思う。

underscores

FontAwesome

サイトに使うWebフォントアイコンに関しては、最近はFontAwesomeばかりを使っています。特別他のものを使わないといけない場合は当然使いますが、基本的にこれで十分な案件が多いです。でも、過多な感じもしなくもないので今後は必要なアイコンを自前でWebフォント化して使う流れを取り入れたいと考えています。

FontAwesome

独自開発環境

こちらの書籍を参考に作った開発環境（ほぼパクリ）。

これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装〈Bootstrap・コンテンツファースト・コンポーネント設計〉

posted with ヨメレバ

松田直樹,後藤賢司,こもりまさあき エムディエヌコーポレーション 2015-03-23

gulp + Bootstrap + Sassで自分好みで自動化しています。お好きな方はどうぞ。

https://github.com/OleinDesign/olein-devset

バリデート的な

色々とチェックしたりするときに利用しています。

W3C Validator

HTMLがおかしくないかチェックしています。できるだけエラーを出さないようにしていますが、プラグインが吐き出すコードでエラーが出る場合には難儀します。

https://validator.w3.org/

Theme Check

開発環境内のWordPressに入れて使っています。デバッグモードはオンにして使いましょう。

https://wordpress.org/plugins/theme-check/

PageSpeed Insights

Googleのページ表示速度を改善するために色々とアドバイスしてくれます。だいたい毎回同じこと言われるので、あらかじめ対応しておくことができるようになってきました。

https://developers.google.com/speed/pagespeed/insights/?hl=ja

モバイルフレンドリーテスト

こちらもGoogleのモバイルフレンドリー対応を評価してくれるサービスです。レスポンシブ対応することが最近多いので重宝しています。

http://www.google.com/webmasters/tools/mobile-friendly/?hl=ja

最近はこのような感じのツールやサービスを利用してWordPressテーマの開発を行っています。みなさんそれぞれのやりやすい環境というのがあるとは思います。オススメがあったらアドバイスいただけると飛んで喜びます。