Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~

7,235 views
6,988 views

Published on

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

Published in: Technology

Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~

  1. 1. 2014 Twenty Fourteen 徹底解剖! ∼デフォルトテーマに学ぶ今ドキテーマの作り方∼
  2. 2. 自己紹介 井村 圭介 K E I S U K E I M U R A フリーランスの Webデザイナー/エンジニア。 WordPressが大好きです。 @imura_design
  3. 3. photo by yorozu2009
  4. 4. 本を書きました。 現場のプロが教える
 Web制作の最新常識 ・配色のトレンド
 ・スタイルガイド
 ・Git
 ・プロジェクト管理ツール
 ・CMS
 ・バックエンド高速化 など書いています。
  5. 5. 2014 Twenty Fourteen について
  6. 6. Twenty Fourteenの特徴 • WordPress 3.8からデフォルトテーマに採用 • レスポンシブ・デザイン • マガジンスタイル • ホームページにピックアップコンテンツを表示 • 短冊ウィジェット • Lato欧文タイプフェイス
  7. 7. 入江隆さんのデザイン via http://takashiirie.com/about
  8. 8. では本題…
  9. 9. 私たちは「見学の見」で、画家は「観察の観」で見ている。 –本田宗一郎
  10. 10. 徹底解剖お品書き 1. CSS編 2. テンプレート構成編 3. デバッグ編
  11. 11. 2014 Twenty Fourteen 徹底解剖 ∼ CSS編 ∼
  12. 12. CSSの解剖 • モバイルファーストなMedia Queriesの記述 • editor-style.cssももちろん完備 • Genericonsを使ったアイコンフォント
  13. 13. モバイルファーストなMedia Queriesの記述 Media Queriesの記述を全て消した状態
  14. 14. editor-style.cssももちろん完備 css/editor-style.css をチェック!
  15. 15. editor-style.css設定の仕方の記事を書きました。 http://wp-d.org/2013/04/11/3928/
  16. 16. Genericonsを使ったアイコンフォント • Automattic社制、アイコンフォント • SVG、woffなどベクターデータなので
 マルチデバイスでもくっきり • GPLなので自分のテーマはもちろん、
 WordPress以外のサイトにも使えます
  17. 17. http://genericons.com/
  18. 18. 2014 Twenty Fourteen 徹底解剖 ∼ テンプレート構成編 ∼
  19. 19. WHAT ?
  20. 20. index.php を見てみよう
  21. 21. 投稿フォーマットの使い方 Twenty Fourteenでは、 「チャット」「ステータス」以外の 7種類をサポート //functions.phpに記述
 add_theme_support( 'post-formats', array( ) ); 'aside', 'image', 'video', 'audio', 'quote', 'link', 'gallery',
  22. 22. 投稿フォーマットについて詳しく知りたい方は http://wpdocs.sourceforge.jp/投稿フォーマット
  23. 23. inc/ ディレクトリにファイルを分割
  24. 24. 2014 Twenty Fourteen 徹底解剖 ∼ デバッグ編 ∼
  25. 25. デバッグツールをTwenty Fourteenで試してみる • Theme-Check プラグイン • Developer プラグイン • Theme Unit Test
  26. 26. Theme-Check プラグイン http://wordpress.org/plugins/theme-check/
  27. 27. Theme-Check の使い方 1. プラグインをインストールして有効化 2. wp-config.php の WP_DEBUG を true に define('WP_DEBUG', true); 3. 管理画面「外観」>「Theme Check」から実行
  28. 28. 自分のテーマでエラーがでるときは
 Twenty Fourteen を参考にしてみよう!
  29. 29. Developer プラグイン http://wordpress.org/plugins/developer/
  30. 30. Developer の特徴 Developerをインストールすると、開発に役立つ 複数のプラグインを一括でインストールできます。 その中のひとつ、Monster Widget を試してみます。
  31. 31. Widgetエリアに崩れがないか簡単に確認できます
  32. 32. テーマユニットテストとは? テーマテストの一環で、
 テスト用の記事を書きだしたXMLファイルを読み込んで
 正しく表示されるかを確認するテストです。 http://wpdocs.sourceforge.jp/テーマユニットテスト
  33. 33. テーマユニットテストの手順 1. テスト用データをダウンロード https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml 2. 管理画面「ツール」>「インポート」>「WordPress」 3. 手順に従って「WordPress Importer」をインストール 4. ダウンロードしたxmlをインポート
  34. 34. インポート完了後の Twenty Fourteen
  35. 35. まとめ デフォルトテーマは WordPressテーマ開発者にとって お手本とも言えるテーマです。
 ぜひ深く観察して自分のテーマにも フィードバックしていきましょう!
  36. 36. ご清聴ありがとうございました m(_ _)m

×