「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
1 like1,556 views
最新デフォルトテーマ「Twenty Fourteen」を基に、WordPressテーマの基礎やカスタマイズ、オリジナルテーマ作成へのヒントを学びます。
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
- 2. 自己紹介 • 一戸 健宏（いちのへ たけひろ） • 株式会社ロクナナのWebディレクター • Twitter @ichi1984
- 3. こんな本書きました • 2013年11月発売 • WordPressテーマの制作 • 体系的なノウハウを得る
- 4. 今日の目的
- 7. オリジナルテーマ制作前に WordPressテーマを学ぶ • 概要からテーマの全体像を学ぶ • デフォルトテーマから基本を学ぶ • カスタマイズ例から応用法を学ぶ
- 10. WordPressテーマの「デザイン」 • HTML • CSS • JavaScript
- 11. WordPressテーマの「機能」 • 管理画面とWebサイトを紐付けている • PHP • WordPress独自の手法
- 15. そんなWordPressテーマを 具体的に学ぶために • 完成している他者のテーマから学ぼう • できれば公式のテーマから学ぼう • 特にデフォルトテーマから学ぼう
- 18. sonoichi • 公式ディレクトリ掲載テーマ • 2013.9.3 公開 • 最新バージョンは1.1.1
- 20. 公式ならではの工程 • テーマユニットテスト • プラグイン「Theme-Check」 • 第三者のテーマレビュー
- 22. 最新のデフォルトテーマから学ぼう • 現在の最新は「Twenty Fourteen」 • WordPressの最新バージョン3.8対応 • デモの役割があり十二分に機能実装済
- 23. テーマ学習の方針を確認 WordPressでオリジナルサイトをつくるために オリジナルのWordPressテーマをつくるために WordPressテーマを学ぶために 最新のデフォルトテーマを参考にする
- 24. 休憩とか質問とか
- 25. デフォルトテーマから基本を学ぶ
- 29. テンプレートからパーツや機能を読込む • header.php → ヘッダー • footer.php → フッター • sidebar.php → サイドバー • content.php → メインコンテンツ • functions.php → 機能や設定
- 30. テンプレートからパーツや機能を読込む • header.php → get_header(); • footer.php → get_footer(); • sidebar.php → get_sidebar(); • content.php → get_template_part(); • functions.php → 自動的に読込む
- 31. テーマのよくある構成 • style.css • index.php • ファイル内で読込む各種パーツ • 機能をまとめたfunctions.php
- 32. テーマのよくある構成 • style.css • index.php • ファイル内で読込む各種パーツ • 機能をまとめたfunctions.php • ＋ テンプレート階層でパターン分け • ＋ 投稿フォーマットでパターン分け
- 35. 休憩とか質問とか
- 36. カスタマイズ例から応用法を学ぶ
- 37. テーマをカスタマイズする5段階の手法 • Lv1 : 管理画面 • Lv2 : CSS • Lv3 : HTML • Lv4 : 関数 • Lv5 : フック
- 38. Lv1 : 管理画面でカスタマイズ • Webサイトにヘッダー画像を挿入する
- 39. Lv2 : CSSカスタマイズ • サイトタイトルの文字サイズを変える
- 40. Lv3 : HTMLカスタマイズ • サイトタイトルを飾る
- 41. Lv4 : 関数でカスタマイズ • 投稿タイトルの語頭に「■」をつける
- 42. Lv5 : フックでカスタマイズ • カレンダーのprev/nextの文字を変える
- 44. 質疑応答
- 45. ありがとうございました。