• Like
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Upcoming SlideShare
Loading in...5
×

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

  • 5,924 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,924
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
12
Comments
0
Likes
13

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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