Weitere ähnliche Inhalte
Ähnlich wie CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ (20)
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
- 2. 自己紹介
瀬口理恵(せぐちりえ)@rie05
1983年大阪うまれ大阪そだち
5DGの屋号でフリーランスデザイナーしてます
Web/DTP/AppUI/講師業/Ust配信 etc
WordCamp大阪 実行委員長
WordBench大阪 管理人
WordCamp神戸実行委員・スピーカー
@rie05 /rie.seguchi
- 10. WordPressとは
WordPress最新版は現在3.4.1
✓ライブテーマプレビュー
✓カスタムヘッダー
✓Twitterのツイート埋め込み
✓パフォーマンス向上
頻繁にアップデート→日本語化されています
2012年12月に3.5がリリース予定
- 12. 子テーマカスタマイズ
WordPressをインストールします
✓サーバーに契約
✓WordPressをダウンロード
✓サーバーにインストール
✓初期設定
- 13. 子テーマカスタマイズ
テーマ構成
全てのテーマファイルは、ここ
Twenty Eleven Twenty Ten
最新公式テーマ 公式テーマ
レスポンシブ・ウェブ・デザインに対応 Elevenに比べて構成はシンプル
- 14. 子テーマカスタマイズ
最初からインストールされているテーマ以外にも
たくさんテーマは公開されています(無料でも有料でも)
- 15. 子テーマカスタマイズ
テーマ中身
Twenty Ten
いっぱいファイルがありますが、
これがテーマの絶対構成ではありません
- 16. 子テーマカスタマイズ
テーマ最小構成
index.php style.css
php css
header.php sidebar.php footer.php
php php php
include(読み込み)
してくる用
- 17. 子テーマカスタマイズ
構造サンプル
index.php
メインビジュアル
header.php
ナビゲーション
ブログ記事
sidebar.php
(最新記事ループ表示)
footer.php
- 18. 子テーマカスタマイズ
例えばこんな感じのindex.php
<?php get_header(); ?>
コンテンツ
<?php get_sidebar(); ?>
<?php get_footer(); ?>
- 19. 子テーマカスタマイズ
子テーマとは
✓ 別のテーマ(親テーマ)の機能を継承、追加や修正ができるテーマ
✓ HTMLとCSSの知識で触ることができる
✓ バージョンアップで親テーマが自動アップデートされても影響ない
公式テーマを親テーマにしてカスタマイズ
親テーマは直に触らない、編集しない
参照:WordPress Codex日本語版
http://wpdocs.sourceforge.jp/子テーマ
- 20. 子テーマカスタマイズ
子テーマの考え方
基本的に親テーマは「そのまま」
変えたいところだけ子テーマで「上書き」
変更したい
部分だけ!
親(Twenty Ten) 子(自分で上書きしたり足したりする)
- 21. 子テーマカスタマイズ
子テーマ準備
/wp-content/themes/に新規テーマフォルダを作成、
その中に新規cssファイル(style.css)を作成
@charset "utf-8";
/*
Theme Name:rie05
Theme URI:http://wptest.5dg.biz/
Description:Twenty Ten themeの子テーマ
Author:rie05
Author URI:http://wptest.5dg.biz/
Template:twentyten
Version:1.0
*/
@import url('../twentyten/style.css');
- 22. 子テーマカスタマイズ
子テーマ準備
作った子テーマフォルダをそのままサーバーへアップロード
★同じことをしてくれる(最低限の子テーマを作成)プラグイン
One-Click Child Theme
- 23. 子テーマカスタマイズ
子テーマ準備
WordPress管理画面>外観>テーマに
作った子テーマが反映されてるので有効化
これで子テーマの準備が
できました!
- 24. 子テーマカスタマイズ
ついでに
240px×180pxでデザインのスクリーンショットを撮ってテーマフォルダ直下へ
「screenshot.jpg」として保存。
ここで使われます!
- 25. 子テーマカスタマイズ
✓ 最初から全てを理解するのは難しいので必要
最低限のところからカスタマイズしていく
✓ phpが分からなくてもできることがいっぱい
あるから苦手意識は捨てる
今回はstyle.cssだけ使って
とにかく見た目を変えるよ( ・∀・)ノシ
- 26. 子テーマカスタマイズ
子テーマカスタマイズ
例えば、タイトル文字の色を変えたい時は
#site-title a {
color: #FF0000;
}
FirebugなんかでID名やclass名を調べて、
該当箇所を直接子テーマのstyle.cssに記述すれば、上書きされて反映
- 27. 子テーマカスタマイズ
Webフォントの話
CSS3の@font-face
TTF形式フォントが使えるブラウザ:Safari、Chrome、Firefox、Opera
IEはEOT形式のフォントしか対応してないのでTTFからEOTに変換します。
@font-face {
font-family: 'HuiFont29';
src: local('HuiFont29')
url('HuiFont29.ttf') format('truetype');
}
font-family: 'HuiFont29' ;
- 30. 子テーマカスタマイズ
子テーマカスタマイズ
色々やっても親テーマは汚さないので練習に最適
どんどんcssレベルでデザインを変更!
子テーマの
最小構成
style.cssのみ
で可能
- 31. 子テーマカスタマイズ
子テーマカスタマイズ
子テーマである程度慣れてきたら、
スクラッチでオリジナルテーマ作成も楽に取り組みやすい
ヘッダー(header.php)
サイドバー(sidebar.php)
記事一覧のループ部分(loop.php)
フッター(footer.php)
トップページ等(index.php)
記事ページ(single.php)
テーマのための関数(functions.php)
スタイルシート(style.css)
- 37. おまけ
WordBench http://wordbench.org/
地域に根づいたWordPress勉強会コミュニティ
- 40. おまけ
WordPress 超初心者セミナー
やります!
日時:8月19日(日)
時間:講演12:00∼14:00
場所:デジタルハリウッド大阪校(梅田・茶屋町)
参加:無料/予約制
http://blog.dhw.co.jp/osaka_event/
2012/08/819wordbenchwor-ac5e.html#more