Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
最新デフォルトテーマをひも解きながら、
オリジナルテーマへとカスタマイズするヒントを学ぼう。
2014.1.11 ゆるゆるカフェ

一戸健宏
自己紹介

• 一戸 健宏(いちのへ たけひろ)
• 株式会社ロクナナのWebディレクター
• Twitter @ichi1984
こんな本書きました

• 2013年11月発売
• WordPressテーマの制作
• 体系的なノウハウを得る
今日の目的
WordPressで
オリジナルサイトをつくるための
ノウハウを身につける
WordPressでオリジナルサイトをつくる
オリジナルのWordPressテーマをつくる
オリジナルテーマ制作前に
WordPressテーマを学ぶ

• 概要からテーマの全体像を学ぶ
• デフォルトテーマから基本を学ぶ
• カスタマイズ例から応用法を学ぶ
概要からテーマの全体像を学ぶ
WordPressテーマとは
Webサイトの
「デザイン」と「機能」
WordPressテーマの「デザイン」

• HTML
• CSS
• JavaScript
WordPressテーマの「機能」

• 管理画面とWebサイトを紐付けている
• PHP
• WordPress独自の手法
WordPressテーマでやること
管理画面上のデータをPHPで出力して

HTMLでマークアップして

CSSでスタイルを定義して

(場合によっては)JavaScriptで効果を加える
WordPressテーマでやること
PHPプログラミング+WordPress特有のノウハウ
管理画面上のデータをPHPで出力して

HTMLでマークアップして

CSSでスタイルを定義して

(場合によっては)JavaScriptで効果を加える
WordPressテーマでやること
PHPプログラミング+WordPress特有のノウハウ
管理画面上のデータをPHPで出力して

HTMLでマークアップして

CSSでスタイルを定義して

(場合によっては)JavaScriptで効果を加える...
そんなWordPressテーマを
具体的に学ぶために

• 完成している他者のテーマから学ぼう
• できれば公式のテーマから学ぼう
• 特にデフォルトテーマから学ぼう
公式のテーマって?

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

管理画面から検索、ダウンロードができない
sonoichi

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

基本は装飾を控えたシンプルデザイン
コンテンツに影響を与えない

サンプルサイト
sonoichi.67.org
公式ならではの工程

• テーマユニットテスト
• プラグイン「Theme-Check」
• 第三者のテーマレビュー
テーマを利用する際に推奨される
公式ディレクトリ掲載テーマを
学習にも推奨します。
最新のデフォルトテーマから学ぼう

• 現在の最新は「Twenty Fourteen」
• WordPressの最新バージョン3.8対応
• デモの役割があり十二分に機能実装済
テーマ学習の方針を確認
WordPressでオリジナルサイトをつくるために

オリジナルのWordPressテーマをつくるために

WordPressテーマを学ぶために

最新のデフォルトテーマを参考にする
休憩とか質問とか
デフォルトテーマから基本を学ぶ
Twenty Fourteen

•

デモサイト
http://twentyfourteendemo.wordpress.com/
WordPressテーマの必須ファイル

• style.css
• index.php
テンプレートは複数パーツに分けている
テンプレートからパーツや機能を読込む

• header.php   → ヘッダー
• footer.php   → フッター
• sidebar.php   → サイドバー
• content.php   → メインコンテンツ
• funct...
テンプレートからパーツや機能を読込む

• header.php   → get_header();
• footer.php   → get_footer();
• sidebar.php   → get_sidebar();
• conte...
テーマのよくある構成

• style.css
• index.php
• ファイル内で読込む各種パーツ
• 機能をまとめたfunctions.php
テーマのよくある構成

• style.css
• index.php
• ファイル内で読込む各種パーツ
• 機能をまとめたfunctions.php
• + テンプレート階層でパターン分け
• + 投稿フォーマットでパターン分け
テンプレート階層?
•
•
•
•
•
•
•
•
•

404.php
archive.php
author.php
category.php
page.php
search.php
single.php
tag.php
taxonomy-p...
投稿フォーマット?

•
•
•
•
•
•
•

content-aside.php
content-audio.php
content-gallery.php
content-image.php
content-link.php
conte...
休憩とか質問とか
カスタマイズ例から応用法を学ぶ
テーマをカスタマイズする5段階の手法

• Lv1 : 管理画面
• Lv2 : CSS
• Lv3 : HTML
• Lv4 : 関数
• Lv5 : フック
Lv1 : 管理画面でカスタマイズ

• Webサイトにヘッダー画像を挿入する
Lv2 : CSSカスタマイズ

• サイトタイトルの文字サイズを変える
Lv3 : HTMLカスタマイズ

• サイトタイトルを飾る
Lv4 : 関数でカスタマイズ

• 投稿タイトルの語頭に「■」をつける
Lv5 : フックでカスタマイズ

• カレンダーのprev/nextの文字を変える
テーマ開発の補助ツール

• テーマユニットテスト
• プラグイン「Theme-Check」
質疑応答
ありがとうございました。
Upcoming SlideShare
Loading in …5
×

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

1,290 views

Published on

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

Published in: Self Improvement
  • Be the first to comment

  • Be the first to like this

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

  1. 1. 最新デフォルトテーマをひも解きながら、 オリジナルテーマへとカスタマイズするヒントを学ぼう。 2014.1.11 ゆるゆるカフェ 一戸健宏
  2. 2. 自己紹介 • 一戸 健宏(いちのへ たけひろ) • 株式会社ロクナナのWebディレクター • Twitter @ichi1984
  3. 3. こんな本書きました • 2013年11月発売 • WordPressテーマの制作 • 体系的なノウハウを得る
  4. 4. 今日の目的
  5. 5. WordPressで オリジナルサイトをつくるための ノウハウを身につける
  6. 6. WordPressでオリジナルサイトをつくる オリジナルのWordPressテーマをつくる
  7. 7. オリジナルテーマ制作前に WordPressテーマを学ぶ • 概要からテーマの全体像を学ぶ • デフォルトテーマから基本を学ぶ • カスタマイズ例から応用法を学ぶ
  8. 8. 概要からテーマの全体像を学ぶ
  9. 9. WordPressテーマとは Webサイトの 「デザイン」と「機能」
  10. 10. WordPressテーマの「デザイン」 • HTML • CSS • JavaScript
  11. 11. WordPressテーマの「機能」 • 管理画面とWebサイトを紐付けている • PHP • WordPress独自の手法
  12. 12. WordPressテーマでやること 管理画面上のデータをPHPで出力して HTMLでマークアップして CSSでスタイルを定義して (場合によっては)JavaScriptで効果を加える
  13. 13. WordPressテーマでやること PHPプログラミング+WordPress特有のノウハウ 管理画面上のデータをPHPで出力して HTMLでマークアップして CSSでスタイルを定義して (場合によっては)JavaScriptで効果を加える
  14. 14. WordPressテーマでやること PHPプログラミング+WordPress特有のノウハウ 管理画面上のデータをPHPで出力して HTMLでマークアップして CSSでスタイルを定義して (場合によっては)JavaScriptで効果を加える 通常の静的なWebサイト制作のノウハウ
  15. 15. そんなWordPressテーマを 具体的に学ぶために • 完成している他者のテーマから学ぼう • できれば公式のテーマから学ぼう • 特にデフォルトテーマから学ぼう
  16. 16. 公式のテーマって? 管理画面から検索、ダウンロードができる
  17. 17. 公式じゃないテーマって? 管理画面から検索、ダウンロードができない
  18. 18. sonoichi • 公式ディレクトリ掲載テーマ • 2013.9.3 公開 • 最新バージョンは1.1.1
  19. 19. sonoichiについて 基本は装飾を控えたシンプルデザイン コンテンツに影響を与えない サンプルサイト sonoichi.67.org
  20. 20. 公式ならではの工程 • テーマユニットテスト • プラグイン「Theme-Check」 • 第三者のテーマレビュー
  21. 21. テーマを利用する際に推奨される 公式ディレクトリ掲載テーマを 学習にも推奨します。
  22. 22. 最新のデフォルトテーマから学ぼう • 現在の最新は「Twenty Fourteen」 • WordPressの最新バージョン3.8対応 • デモの役割があり十二分に機能実装済
  23. 23. テーマ学習の方針を確認 WordPressでオリジナルサイトをつくるために オリジナルのWordPressテーマをつくるために WordPressテーマを学ぶために 最新のデフォルトテーマを参考にする
  24. 24. 休憩とか質問とか
  25. 25. デフォルトテーマから基本を学ぶ
  26. 26. Twenty Fourteen • デモサイト http://twentyfourteendemo.wordpress.com/
  27. 27. WordPressテーマの必須ファイル • style.css • index.php
  28. 28. テンプレートは複数パーツに分けている
  29. 29. テンプレートからパーツや機能を読込む • header.php   → ヘッダー • footer.php   → フッター • sidebar.php   → サイドバー • content.php   → メインコンテンツ • functions.php  → 機能や設定
  30. 30. テンプレートからパーツや機能を読込む • header.php   → get_header(); • footer.php   → get_footer(); • sidebar.php   → get_sidebar(); • content.php   → get_template_part(); • functions.php  → 自動的に読込む
  31. 31. テーマのよくある構成 • style.css • index.php • ファイル内で読込む各種パーツ • 機能をまとめたfunctions.php
  32. 32. テーマのよくある構成 • style.css • index.php • ファイル内で読込む各種パーツ • 機能をまとめたfunctions.php • + テンプレート階層でパターン分け • + 投稿フォーマットでパターン分け
  33. 33. テンプレート階層? • • • • • • • • • 404.php archive.php author.php category.php page.php search.php single.php tag.php taxonomy-post_format.php
  34. 34. 投稿フォーマット? • • • • • • • content-aside.php content-audio.php content-gallery.php content-image.php content-link.php content-quote.php content-video.php
  35. 35. 休憩とか質問とか
  36. 36. カスタマイズ例から応用法を学ぶ
  37. 37. テーマをカスタマイズする5段階の手法 • Lv1 : 管理画面 • Lv2 : CSS • Lv3 : HTML • Lv4 : 関数 • Lv5 : フック
  38. 38. Lv1 : 管理画面でカスタマイズ • Webサイトにヘッダー画像を挿入する
  39. 39. Lv2 : CSSカスタマイズ • サイトタイトルの文字サイズを変える
  40. 40. Lv3 : HTMLカスタマイズ • サイトタイトルを飾る
  41. 41. Lv4 : 関数でカスタマイズ • 投稿タイトルの語頭に「■」をつける
  42. 42. Lv5 : フックでカスタマイズ • カレンダーのprev/nextの文字を変える
  43. 43. テーマ開発の補助ツール • テーマユニットテスト • プラグイン「Theme-Check」
  44. 44. 質疑応答
  45. 45. ありがとうございました。

×