Upload
takehiro-ichinohe
View
941
Download
1
Embed Size (px)
DESCRIPTION
最新デフォルトテーマ「Twenty Fourteen」を基に、WordPressテーマの基礎やカスタマイズ、オリジナルテーマ作成へのヒントを学びます。
Citation preview
最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。
2014.1.11 ゆるゆるカフェ × 一戸健宏
自己紹介
•一戸 健宏(いちのへ たけひろ)•株式会社ロクナナのWebディレクター• Twitter @ichi1984
こんな本書きました
• 2013年11月発売•WordPressテーマの制作•体系的なノウハウを得る
今日の目的
WordPressでオリジナルサイトをつくるための
ノウハウを身につける
WordPressでオリジナルサイトをつくる
オリジナルのWordPressテーマをつくる
オリジナルテーマ制作前にWordPressテーマを学ぶ
•概要からテーマの全体像を学ぶ•デフォルトテーマから基本を学ぶ•カスタマイズ例から応用法を学ぶ
概要からテーマの全体像を学ぶ
WordPressテーマとはWebサイトの
「デザイン」と「機能」
WordPressテーマの「デザイン」
• HTML• CSS• JavaScript
WordPressテーマの「機能」
•管理画面とWebサイトを紐付けている• PHP•WordPress独自の手法
管理画面上のデータをPHPで出力して
HTMLでマークアップして
CSSでスタイルを定義して
(場合によっては)JavaScriptで効果を加える
WordPressテーマでやること
管理画面上のデータをPHPで出力して
HTMLでマークアップして
CSSでスタイルを定義して
(場合によっては)JavaScriptで効果を加える
WordPressテーマでやることPHPプログラミング+WordPress特有のノウハウ
管理画面上のデータをPHPで出力して
HTMLでマークアップして
CSSでスタイルを定義して
(場合によっては)JavaScriptで効果を加える
WordPressテーマでやることPHPプログラミング+WordPress特有のノウハウ
通常の静的なWebサイト制作のノウハウ
そんなWordPressテーマを具体的に学ぶために
•完成している他者のテーマから学ぼう•できれば公式のテーマから学ぼう•特にデフォルトテーマから学ぼう
公式のテーマって?
管理画面から検索、ダウンロードができる
公式じゃないテーマって?
管理画面から検索、ダウンロードができない
sonoichi
•公式ディレクトリ掲載テーマ• 2013.9.3 公開•最新バージョンは1.1.1
基本は装飾を控えたシンプルデザインコンテンツに影響を与えない
サンプルサイトsonoichi.67.org
sonoichiについて
公式ならではの工程
•テーマユニットテスト•プラグイン「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 → メインコンテンツ• functions.php → 機能や設定
テンプレートからパーツや機能を読込む
• header.php → get_header();• footer.php → get_footer();• sidebar.php → get_sidebar();• content.php → get_template_part();• functions.php → 自動的に読込む
テーマのよくある構成
• 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-post_format.php
投稿フォーマット?
• content-aside.php• content-audio.php• content-gallery.php• content-image.php• content-link.php• content-quote.php• content-video.php
休憩とか質問とか
カスタマイズ例から応用法を学ぶ
テーマをカスタマイズする5段階の手法
• Lv1 : 管理画面• Lv2 : CSS• Lv3 : HTML• Lv4 : 関数• Lv5 : フック
Lv1 : 管理画面でカスタマイズ
•Webサイトにヘッダー画像を挿入する
Lv2 : CSSカスタマイズ
•サイトタイトルの文字サイズを変える
Lv3 : HTMLカスタマイズ
•サイトタイトルを飾る
Lv4 : 関数でカスタマイズ
•投稿タイトルの語頭に「■」をつける
Lv5 : フックでカスタマイズ
•カレンダーのprev/nextの文字を変える
テーマ開発の補助ツール
•テーマユニットテスト•プラグイン「Theme-Check」
質疑応答
ありがとうございました。