WordBench京都 実例で紹介！子テーマを使ったデザインTips

1. 実例で紹介！
子テーマを使ったデザインTips
1
2012.7 .22 WordBench京都 @haruna122

2. @haruna1221
京都でWEB/DTPデザイナー。
ぴんくな人。
iPhoneとかPinkが好き。
趣味はカメラとダーツ。
PENTAXピンクのK-r
Diana F+/mini

3. goryugo.com

4. #wbkyoto

5. 平凡なWordPressテーマでオリジナリティがなく
#wbkyoto
背景やヘッダーが無彩色で地味

6. #wbkyoto

7. テーマのデザイン
1.参考サイトデザインをクライアントと共有
2.クライアントの希望をもとに
Photoshopでデザイン
3.psdデータから必要なパーツを書き出し
4.WordPress Twenty Elevenをベースに
子テーマを作成

8. クライアントとのデザイン共有
Firefoxのアドオン
Pearl Crescent Page Saver でデザイン
を保存して、Evernoteのノート作成→共有

9. 子テーマって？
WordPressの子テーマとは
親テーマを元に機能やデザインの調整がとて
も簡単にできるテーマのこと。
親テーマにはまったく手を加えないので、
親テーマがアップデートされた場合も
子テーマは変更されない。

10. 子テーマの作り方
wp-content > themes にフォルダ作成
style.css
@charset "utf-8";
/*
Theme Name: goryugocom 子テーマの名前※必須
Theme URI: http: //example.com/ 子テーマのWEBページ
Description: Twenty Eleven の子テーマ テーマの説明
Author: goryugo テーマの作者名
Author URI: http: //goryugo.com/ 作者のWEBページ
Template: twentyeleven 親テーマのディレクトリ名 ※必須
Version: 0.1.0 バージョン
*/
@import url('../twentyeleven/style.css');

11. 子テーマの作り方
WordPressのダッシュボード内で
テーマが選択できるようになる

12. テンプレートファイル
1. content-page.php (content-page.php)
2. content-single.php (content-single.php)
3. コメント (comments.php)
4. サイドバー (sidebar.php)
5. フッター (footer.php)
6. ヘッダー (header.php)
7. メインインデックスのテンプレート (index.php)
8. 単一記事の投稿 (single.php)
9. 固定ページテンプレート (page.php)

13. 本日のまとめ
Pearl Crescent Page Saver おすすめ！
クリップデータを自動でEvernoteへ
Evernoteで共有するととても便利！
複数人との共有も可能
子テーマを使って実装すると簡単！

14. @haruna1221
おしまい
ご静聴ありがとうございました。
本日のスライドや参考URLなどは
後日 http://inbox.sow-zow.comにて公開予定です。