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

自己紹介

井村 圭介K E I S U K E I M U R A

フリーランスの Webデザイナー/エンジニア。 WordPressが大好きです。

@imura_design

photo by yorozu2009

本を書きました。

現場のプロが教えるWeb制作の最新常識・配色のトレンド・スタイルガイド・Git・プロジェクト管理ツール・CMS・バックエンド高速化

など書いています。

Twenty Fourteen について2014

• WordPress 3.8からデフォルトテーマに採用

• レスポンシブ・デザイン

• マガジンスタイル

• ホームページにピックアップコンテンツを表示

• 短冊ウィジェット

• Lato欧文タイプフェイス

Twenty Fourteenの特徴

入江隆さんのデザイン

via http://takashiirie.com/about

では本題…

–本田宗一郎

“私たちは「見学の見」で、画家は「観察の観」で見ている。”

CSS編

徹底解剖お品書き

1.

テンプレート構成編2.

デバッグ編3.

Twenty Fourteen 徹底解剖～ CSS編 ～2014

• モバイルファーストなMedia Queriesの記述

• editor-style.cssももちろん完備

• Genericonsを使ったアイコンフォント

CSSの解剖

モバイルファーストなMedia Queriesの記述

Media Queriesの記述を全て消した状態

editor-style.cssももちろん完備

css/editor-style.css をチェック！

editor-style.css設定の仕方の記事を書きました。

http://wp-d.org/2013/04/11/3928/

• Automattic社制、アイコンフォント

• SVG、woffなどベクターデータなのでマルチデバイスでもくっきり

• GPLなので自分のテーマはもちろん、WordPress以外のサイトにも使えます

Genericonsを使ったアイコンフォント

http://genericons.com/

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

WHAT ?

index.php を見てみよう

投稿フォーマットの使い方

//functions.phpに記述add_theme_support( 'post-formats', array(

'aside', 'image', 'video', 'audio', 'quote', 'link', 'gallery',

) );

Twenty Fourteenでは、

「チャット」「ステータス」以外の

7種類をサポート

http://wpdocs.sourceforge.jp/投稿フォーマット

投稿フォーマットについて詳しく知りたい方は

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

Twenty Fourteen 徹底解剖～ デバッグ編 ～2014

• Theme-Check プラグイン

• Developer プラグイン

• Theme Unit Test

デバッグツールをTwenty Fourteenで試してみる

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

Theme-Check プラグイン

Theme-Check の使い方

define('WP_DEBUG', true);

1. プラグインをインストールして有効化

2. wp-config.php の WP_DEBUG を true に

3. 管理画面「外観」＞「Theme Check」から実行

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

http://wordpress.org/plugins/developer/

Developer プラグイン

Developer の特徴

Developerをインストールすると、開発に役立つ 複数のプラグインを一括でインストールできます。

その中のひとつ、Monster Widget を試してみます。

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

http://wpdocs.sourceforge.jp/テーマユニットテスト

テーマユニットテストとは？

テーマテストの一環で、テスト用の記事を書きだしたXMLファイルを読み込んで

正しく表示されるかを確認するテストです。

テーマユニットテストの手順

1. テスト用データをダウンロード

2. 管理画面「ツール」＞「インポート」＞「WordPress」

https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml

3. 手順に従って「WordPress Importer」をインストール

4. ダウンロードしたxmlをインポート

インポート完了後の Twenty Fourteen

まとめ

デフォルトテーマは WordPressテーマ開発者にとって お手本とも言えるテーマです。

ぜひ深く観察して自分のテーマにも フィードバックしていきましょう！

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