2014
Twenty Fourteen 徹底解剖!
∼デフォルトテーマに学ぶ今ドキテーマの作り方∼
自己紹介

井村 圭介
K E I S U K E

I M U R A

フリーランスの
Webデザイナー/エンジニア。
WordPressが大好きです。
@imura_design
photo by yorozu2009
本を書きました。

現場のプロが教える

Web制作の最新常識
・配色のトレンド

・スタイルガイド

・Git

・プロジェクト管理ツール

・CMS

・バックエンド高速化
など書いています。
2014
Twenty Fourteen について
Twenty Fourteenの特徴
•

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

•

レスポンシブ・デザイン

•

マガジンスタイル

•

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

•

短冊ウィジェット

•

Lato欧文タイプフェイス
入江隆さんのデザイン

via http://takashiirie.com/about
では本題…
私たちは「見学の見」で、画家は「観察の観」で見ている。

–本田宗一郎
徹底解剖お品書き

1.

CSS編

2.

テンプレート構成編

3.

デバッグ編
2014
Twenty Fourteen 徹底解剖
∼ CSS編 ∼
CSSの解剖

•

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

•

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

•

Genericonsを使ったアイコンフォント
モバイルファーストなMedia Queriesの記述

Media Queriesの記述を全て消した状態
editor-style.cssももちろん完備

css/editor-style.css をチェック!
editor-style.css設定の仕方の記事を書きました。

http://wp-d.org/2013/04/11/3928/
Genericonsを使ったアイコンフォント

•

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

•

SVG、woffなどベクターデータなので

マルチデバイスでもくっきり

•

GPLなので自分のテーマはもちろん、

WordPress以外のサイトにも使えます
http://genericons.com/
2014
Twenty Fourteen 徹底解剖
∼ テンプレート構成編 ∼
WHAT ?
index.php を見てみよう
投稿フォーマットの使い方

Twenty Fourteenでは、
「チャット」「ステータス」以外の
7種類をサポート

//functions.phpに記述

add_theme_support( 'post-formats', array(	
	

	

) );

'aside', 'image', 'video', 'audio', 'quote', 'link', 'gallery',
投稿フォーマットについて詳しく知りたい方は

http://wpdocs.sourceforge.jp/投稿フォーマット
inc/ ディレクトリにファイルを分割
2014
Twenty Fourteen 徹底解剖
∼ デバッグ編 ∼
デバッグツールをTwenty Fourteenで試してみる

•

Theme-Check プラグイン

•

Developer プラグイン

•

Theme Unit Test
Theme-Check プラグイン

http://wordpress.org/plugins/theme-check/
Theme-Check の使い方
1. プラグインをインストールして有効化
2. wp-config.php の WP_DEBUG を true に
define('WP_DEBUG', true);

3. 管理画面「外観」>「Theme Check」から実行
自分のテーマでエラーがでるときは

Twenty Fourteen を参考にしてみよう!
Developer プラグイン

http://wordpress.org/plugins/developer/
Developer の特徴

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

その中のひとつ、Monster Widget を試してみます。
Widgetエリアに崩れがないか簡単に確認できます
テーマユニットテストとは?

テーマテストの一環で、

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

正しく表示されるかを確認するテストです。
http://wpdocs.sourceforge.jp/テーマユニットテスト
テーマユニットテストの手順
1. テスト用データをダウンロード
https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml

2. 管理画面「ツール」>「インポート」>「WordPress」
3. 手順に従って「WordPress Importer」をインストール
4. ダウンロードしたxmlをインポート
インポート完了後の Twenty Fourteen
まとめ

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

ぜひ深く観察して自分のテーマにも
フィードバックしていきましょう!
ご清聴ありがとうございました m(_ _)m

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