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

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

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」

質疑応答

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