2014/1/27 WordBench東京で発表したセッションです。

1. 2014
Twenty Fourteen 徹底解剖！
∼デフォルトテーマに学ぶ今ドキテーマの作り方∼

2. 自己紹介
井村 圭介
K E I S U K E
I M U R A
フリーランスの
Webデザイナー/エンジニア。
WordPressが大好きです。
@imura_design

4. photo by yorozu2009

5. 本を書きました。
現場のプロが教える
Web制作の最新常識
・配色のトレンド
・スタイルガイド
・Git
・プロジェクト管理ツール
・CMS
・バックエンド高速化
など書いています。

6. 2014
Twenty Fourteen について

7. Twenty Fourteenの特徴
•
WordPress 3.8からデフォルトテーマに採用
•
レスポンシブ・デザイン
•
マガジンスタイル
•
ホームページにピックアップコンテンツを表示
•
短冊ウィジェット
•
Lato欧文タイプフェイス

8. 入江隆さんのデザイン
via http://takashiirie.com/about

9. では本題…

10. 私たちは「見学の見」で、画家は「観察の観」で見ている。
–本田宗一郎

11. 徹底解剖お品書き
1.
CSS編
2.
テンプレート構成編
3.
デバッグ編

12. 2014
Twenty Fourteen 徹底解剖
∼ CSS編 ∼

13. CSSの解剖
•
モバイルファーストなMedia Queriesの記述
•
editor-style.cssももちろん完備
•
Genericonsを使ったアイコンフォント

14. モバイルファーストなMedia Queriesの記述
Media Queriesの記述を全て消した状態

15. editor-style.cssももちろん完備
css/editor-style.css をチェック！

16. editor-style.css設定の仕方の記事を書きました。
http://wp-d.org/2013/04/11/3928/

17. Genericonsを使ったアイコンフォント
•
Automattic社制、アイコンフォント
•
SVG、woffなどベクターデータなので
マルチデバイスでもくっきり
•
GPLなので自分のテーマはもちろん、
WordPress以外のサイトにも使えます

18. http://genericons.com/

19. 2014
Twenty Fourteen 徹底解剖
∼ テンプレート構成編 ∼

20. WHAT ?

21. index.php を見てみよう

22. 投稿フォーマットの使い方
Twenty Fourteenでは、
「チャット」「ステータス」以外の
7種類をサポート
//functions.phpに記述
add_theme_support( 'post-formats', array(
) );
'aside', 'image', 'video', 'audio', 'quote', 'link', 'gallery',

23. 投稿フォーマットについて詳しく知りたい方は
http://wpdocs.sourceforge.jp/投稿フォーマット

24. inc/ ディレクトリにファイルを分割

25. 2014
Twenty Fourteen 徹底解剖
∼ デバッグ編 ∼

26. デバッグツールをTwenty Fourteenで試してみる
•
Theme-Check プラグイン
•
Developer プラグイン
•
Theme Unit Test

27. Theme-Check プラグイン
http://wordpress.org/plugins/theme-check/

28. Theme-Check の使い方
1. プラグインをインストールして有効化
2. wp-config.php の WP_DEBUG を true に
define('WP_DEBUG', true);
3. 管理画面「外観」＞「Theme Check」から実行

29. 自分のテーマでエラーがでるときは
Twenty Fourteen を参考にしてみよう！

30. Developer プラグイン
http://wordpress.org/plugins/developer/

31. Developer の特徴
Developerをインストールすると、開発に役立つ
複数のプラグインを一括でインストールできます。
その中のひとつ、Monster Widget を試してみます。

32. Widgetエリアに崩れがないか簡単に確認できます

33. テーマユニットテストとは？
テーマテストの一環で、
テスト用の記事を書きだしたXMLファイルを読み込んで
正しく表示されるかを確認するテストです。
http://wpdocs.sourceforge.jp/テーマユニットテスト

34. テーマユニットテストの手順
1. テスト用データをダウンロード
https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml
2. 管理画面「ツール」＞「インポート」＞「WordPress」
3. 手順に従って「WordPress Importer」をインストール
4. ダウンロードしたxmlをインポート

35. インポート完了後の Twenty Fourteen

36. まとめ
デフォルトテーマは
WordPressテーマ開発者にとって
お手本とも言えるテーマです。
ぜひ深く観察して自分のテーマにも
フィードバックしていきましょう！

37. ご清聴ありがとうございました m(_ _)m