最新デフォルトテーマ「Twenty Fourteen」を基に、WordPressテーマの基礎やカスタマイズ、オリジナルテーマ作成へのヒントを学びます。

1. 最新デフォルトテーマをひも解きながら、
オリジナルテーマへとカスタマイズするヒントを学ぼう。
2014.1.11 ゆるゆるカフェ
一戸健宏

2. 自己紹介
• 一戸 健宏（いちのへ たけひろ）
• 株式会社ロクナナのWebディレクター
• Twitter @ichi1984

3. こんな本書きました
• 2013年11月発売
• WordPressテーマの制作
• 体系的なノウハウを得る

4. 今日の目的

5. WordPressで
オリジナルサイトをつくるための
ノウハウを身につける

6. WordPressでオリジナルサイトをつくる
オリジナルのWordPressテーマをつくる

7. オリジナルテーマ制作前に
WordPressテーマを学ぶ
• 概要からテーマの全体像を学ぶ
• デフォルトテーマから基本を学ぶ
• カスタマイズ例から応用法を学ぶ

8. 概要からテーマの全体像を学ぶ

9. WordPressテーマとは
Webサイトの
「デザイン」と「機能」

10. WordPressテーマの「デザイン」
• HTML
• CSS
• JavaScript

11. WordPressテーマの「機能」
• 管理画面とWebサイトを紐付けている
• PHP
• WordPress独自の手法

12. WordPressテーマでやること
管理画面上のデータをPHPで出力して
HTMLでマークアップして
CSSでスタイルを定義して
（場合によっては）JavaScriptで効果を加える

13. WordPressテーマでやること
PHPプログラミング＋WordPress特有のノウハウ
管理画面上のデータをPHPで出力して
HTMLでマークアップして
CSSでスタイルを定義して
（場合によっては）JavaScriptで効果を加える

14. WordPressテーマでやること
PHPプログラミング＋WordPress特有のノウハウ
管理画面上のデータをPHPで出力して
HTMLでマークアップして
CSSでスタイルを定義して
（場合によっては）JavaScriptで効果を加える
通常の静的なWebサイト制作のノウハウ

15. そんなWordPressテーマを
具体的に学ぶために
• 完成している他者のテーマから学ぼう
• できれば公式のテーマから学ぼう
• 特にデフォルトテーマから学ぼう

16. 公式のテーマって？
管理画面から検索、ダウンロードができる

17. 公式じゃないテーマって？
管理画面から検索、ダウンロードができない

18. sonoichi
• 公式ディレクトリ掲載テーマ
• 2013.9.3 公開
• 最新バージョンは1.1.1

19. sonoichiについて
基本は装飾を控えたシンプルデザイン
コンテンツに影響を与えない
サンプルサイト
sonoichi.67.org

20. 公式ならではの工程
• テーマユニットテスト
• プラグイン「Theme-Check」
• 第三者のテーマレビュー

21. テーマを利用する際に推奨される
公式ディレクトリ掲載テーマを
学習にも推奨します。

22. 最新のデフォルトテーマから学ぼう
• 現在の最新は「Twenty Fourteen」
• WordPressの最新バージョン3.8対応
• デモの役割があり十二分に機能実装済

23. テーマ学習の方針を確認
WordPressでオリジナルサイトをつくるために
オリジナルのWordPressテーマをつくるために
WordPressテーマを学ぶために
最新のデフォルトテーマを参考にする

24. 休憩とか質問とか

25. デフォルトテーマから基本を学ぶ

26. Twenty Fourteen
•
デモサイト
http://twentyfourteendemo.wordpress.com/

27. WordPressテーマの必須ファイル
• style.css
• index.php

28. テンプレートは複数パーツに分けている

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
• ＋ テンプレート階層でパターン分け
• ＋ 投稿フォーマットでパターン分け

33. テンプレート階層？
•
•
•
•
•
•
•
•
•
404.php
archive.php
author.php
category.php
page.php
search.php
single.php
tag.php
taxonomy-post_format.php

34. 投稿フォーマット？
•
•
•
•
•
•
•
content-aside.php
content-audio.php
content-gallery.php
content-image.php
content-link.php
content-quote.php
content-video.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の文字を変える

43. テーマ開発の補助ツール
• テーマユニットテスト
• プラグイン「Theme-Check」

44. 質疑応答

45. ありがとうございました。