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