Movatterモバイル変換


[0]ホーム

URL:


Keisuke Imura, profile picture
Uploaded byKeisuke Imura
8,566 views

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

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

Embed presentation

Downloaded 14 times
2014Twenty Fourteen 徹底解剖!∼デフォルトテーマに学ぶ今ドキテーマの作り方∼
自己紹介井村 圭介K E I S U K EI M U R AフリーランスのWebデザイナー/エンジニア。WordPressが大好きです。@imura_design
photo by yorozu2009
本を書きました。現場のプロが教える
Web制作の最新常識・配色のトレンド
・スタイルガイド
・Git
・プロジェクト管理ツール
・CMS
・バックエンド高速化など書いています。
2014Twenty Fourteen について
Twenty Fourteenの特徴•WordPress 3.8からデフォルトテーマに採用•レスポンシブ・デザイン•マガジンスタイル•ホームページにピックアップコンテンツを表示•短冊ウィジェット•Lato欧文タイプフェイス
入江隆さんのデザインvia http://takashiirie.com/about
では本題…
私たちは「見学の見」で、画家は「観察の観」で見ている。–本田宗一郎
徹底解剖お品書き1.CSS編2.テンプレート構成編3.デバッグ編
2014Twenty 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/
2014Twenty 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/ ディレクトリにファイルを分割
2014Twenty 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.xml2. 管理画面「ツール」>「インポート」>「WordPress」3. 手順に従って「WordPress Importer」をインストール4. ダウンロードしたxmlをインポート
インポート完了後の Twenty Fourteen
まとめデフォルトテーマはWordPressテーマ開発者にとってお手本とも言えるテーマです。
ぜひ深く観察して自分のテーマにもフィードバックしていきましょう!
ご清聴ありがとうございました m(_ _)m

Recommended

PDF
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
PDF
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
PPTX
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
PDF
WordPressテーマ作成
PDF
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
PDF
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
PDF
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
PDF
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
PDF
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
PDF
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
PDF
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
PDF
WordPress公式テーマ登録のための5ステップ
PDF
TwentyTwelveの子テーマつくったらハマった話
PDF
子テーマを使ったサイト制作
PDF
ゼロからつくるWord pressテーマ第8回
PDF
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
PDF
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
PDF
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
PDF
WordBench京都版 _sハンズオン
PDF
バックアッププラグインあれこれ
PDF
4時間まったりWordPressテーマ作成講座
PPTX
新デフォルトテーマ TwentyTen を理解しよう
PPTX
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
PDF
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
PDF
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
PDF
ゼロからつくるWord pressテーマ第5回
PDF
ゼロからつくるWord pressテーマ第9回
PDF
ゼロからつくるWordPressテーマ第4回
PDF
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
PDF
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像

More Related Content

PDF
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
PDF
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
PPTX
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
PDF
WordPressテーマ作成
PDF
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
PDF
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
PDF
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
PDF
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
WordPressテーマ作成
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!

What's hot

PDF
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
PDF
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
PDF
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
PDF
WordPress公式テーマ登録のための5ステップ
PDF
TwentyTwelveの子テーマつくったらハマった話
PDF
子テーマを使ったサイト制作
PDF
ゼロからつくるWord pressテーマ第8回
PDF
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
PDF
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
PDF
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
PDF
WordBench京都版 _sハンズオン
PDF
バックアッププラグインあれこれ
PDF
4時間まったりWordPressテーマ作成講座
PPTX
新デフォルトテーマ TwentyTen を理解しよう
PPTX
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
PDF
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
PDF
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
PDF
ゼロからつくるWord pressテーマ第5回
PDF
ゼロからつくるWord pressテーマ第9回
PDF
ゼロからつくるWordPressテーマ第4回
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
WordPress公式テーマ登録のための5ステップ
TwentyTwelveの子テーマつくったらハマった話
子テーマを使ったサイト制作
ゼロからつくるWord pressテーマ第8回
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordBench京都版 _sハンズオン
バックアッププラグインあれこれ
4時間まったりWordPressテーマ作成講座
新デフォルトテーマ TwentyTen を理解しよう
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第9回
ゼロからつくるWordPressテーマ第4回

Viewers also liked

PDF
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
PDF
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
PDF
イチから学ぶ パッケージマネージャーとLAMP環境
PDF
テーマカスタマイズ入門~バレンタインまでに子テーマをつくろう~ 2
PDF
60点をとれるWebデザイン
PDF
Sass + Foundation 5でレスポンシブペライチ制作
PDF
テクニカルクリエイターの憂鬱
PDF
イマドキWebメディアの制作手法
PDF
High Performance Gulp
PDF
Foundation for Appsでザクザク作るモックアップ
PDF
デザイナーとエンジニアのコミュニケーションについて考えてみた
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
イチから学ぶ パッケージマネージャーとLAMP環境
テーマカスタマイズ入門~バレンタインまでに子テーマをつくろう~ 2
60点をとれるWebデザイン
Sass + Foundation 5でレスポンシブペライチ制作
テクニカルクリエイターの憂鬱
イマドキWebメディアの制作手法
High Performance Gulp
Foundation for Appsでザクザク作るモックアップ
デザイナーとエンジニアのコミュニケーションについて考えてみた

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


[8]ページ先頭

©2009-2025 Movatter.jp