Embed Size (px)
DESCRIPTION
CSS Nite in OSAKA, Vol.32
Citation preview
瀬口理恵（せぐちりえ）＠rie05
1983年大阪うまれ大阪そだち
5DGの屋号でフリーランスデザイナーしてます
Web/DTP/AppUI/講師業/Ust配信 etc
@rie05 /rie.seguchi
WordCamp大阪 実行委員長WordBench大阪 管理人WordCamp神戸実行委員・スピーカー
自己紹介
アジェンダ
もっと知ろう触ろうWordPress!!
１WordPressって？最新事情
2子テーマでカスタマイズ
3スマホ対応について
WordPressって？
WordPressとは
１
WordPressとは
世界標準のWebパブリッシングプラットフォーム
✓ブログ、CMSとしてWebサイトを効率良く制作できるソフトウェア
✓世界中でのWebサイトで約1割以上は、WordPressで作られたサイト
WordPressとは
リアルタイムでダウンロードされているWordPresshttp://wordpress.org/download/counter/
WordPressを採用している国内企業事例
クックパッド株式会社 http://info.cookpad.com/
株式会社カカクコム（コーポレートサイト）http://corporate.kakaku.com/
さいたまスーパーアリーナ http://www.saitama-arena.co.jp/
WordPressとは
WordPressとは
管理画面はこんな感じ
WordPressとは
つまりWordPressって？
✓プログラムの知識があまりなくても更新管理が簡単なサイトを作成できる
✓複数人で管理でき、オンライン上で編集可能
✓無料で使える（商用も無料）
✓豊富なテーマ（デザイン外観）とプラグイン拡張
WordPressとは
WordPress最新版は現在3.4.1
✓ライブテーマプレビュー
✓カスタムヘッダー
✓Twitterのツイート埋め込み
✓パフォーマンス向上
頻繁にアップデート→日本語化されています
2012年12月に3.5がリリース予定
子テーマカスタマイズ
子テーマカスタマイズ
2
WordPressをインストールします
✓サーバーに契約✓WordPressをダウンロード✓サーバーにインストール✓初期設定
子テーマカスタマイズ
子テーマカスタマイズテーマ構成
全てのテーマファイルは、ここ
Twenty Eleven最新公式テーマ
レスポンシブ・ウェブ・デザインに対応
Twenty Ten公式テーマ
Elevenに比べて構成はシンプル
子テーマカスタマイズ
最初からインストールされているテーマ以外にもたくさんテーマは公開されています（無料でも有料でも）
子テーマカスタマイズテーマ中身Twenty Ten
いっぱいファイルがありますが、これがテーマの絶対構成ではありません
子テーマカスタマイズ
テーマ最小構成
index.php
php
style.css
css
php
header.php
php
sidebar.php
php
footer.php
include(読み込み)してくる用
子テーマカスタマイズ構造サンプル
index.php
header.php
footer.php
ブログ記事
（最新記事ループ表示）sidebar.php
ナビゲーション
メインビジュアル
子テーマカスタマイズ
例えばこんな感じのindex.php
<?php get_header(); ?>
コンテンツ
<?php get_sidebar(); ?><?php get_footer(); ?>
子テーマとは✓ 別のテーマ（親テーマ）の機能を継承、追加や修正ができるテーマ✓ HTMLとCSSの知識で触ることができる✓ バージョンアップで親テーマが自動アップデートされても影響ない
公式テーマを親テーマにしてカスタマイズ親テーマは直に触らない、編集しない
参照：WordPress Codex日本語版http://wpdocs.sourceforge.jp/子テーマ
子テーマカスタマイズ
子テーマの考え方基本的に親テーマは「そのまま」
変えたいところだけ子テーマで「上書き」
親（Twenty Ten） 子（自分で上書きしたり足したりする）
変更したい部分だけ！
子テーマカスタマイズ
子テーマ準備
@charset "utf-8";/*Theme Name:rie05Theme URI:http://wptest.5dg.biz/Description:Twenty Ten themeの子テーマAuthor:rie05Author URI:http://wptest.5dg.biz/Template:twentytenVersion:1.0*/@import url('../twentyten/style.css');
/wp-content/themes/に新規テーマフォルダを作成、その中に新規cssファイル(style.css)を作成
子テーマカスタマイズ
子テーマ準備作った子テーマフォルダをそのままサーバーへアップロード
★同じことをしてくれる（最低限の子テーマを作成）プラグイン
One-Click Child Theme
子テーマカスタマイズ
子テーマ準備WordPress管理画面＞外観＞テーマに
作った子テーマが反映されてるので有効化
これで子テーマの準備ができました！
子テーマカスタマイズ
240px×180pxでデザインのスクリーンショットを撮ってテーマフォルダ直下へ「screenshot.jpg」として保存。
ここで使われます！
ついでに
子テーマカスタマイズ
✓ 最初から全てを理解するのは難しいので必要最低限のところからカスタマイズしていく
✓ phpが分からなくてもできることがいっぱいあるから苦手意識は捨てる
今回はstyle.cssだけ使ってとにかく見た目を変えるよ( ・∀・)ﾉｼ
子テーマカスタマイズ
子テーマカスタマイズ例えば、タイトル文字の色を変えたい時は
#site-title a { color: #FF0000;}
FirebugなんかでID名やclass名を調べて、該当箇所を直接子テーマのstyle.cssに記述すれば、上書きされて反映
子テーマカスタマイズ
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' ;
子テーマカスタマイズ
WordPress最新バージョン3.4新機能ライブテーマプレビュー
有効に使うと更にソースコードを触らず見た目の変更が可能です！
子テーマカスタマイズ
DEMO
子テーマカスタマイズ
子テーマカスタマイズ色々やっても親テーマは汚さないので練習に最適
どんどんcssレベルでデザインを変更！
子テーマの最小構成
style.cssのみで可能
子テーマカスタマイズ
子テーマである程度慣れてきたら、スクラッチでオリジナルテーマ作成も楽に取り組みやすい
子テーマカスタマイズ
ヘッダー（header.php）サイドバー（sidebar.php）記事一覧のループ部分（loop.php）フッター（footer.php）トップページ等（index.php）記事ページ（single.php）テーマのための関数（functions.php）スタイルシート（style.css）
子テーマカスタマイズ
スマホ対応について
スマホ対応について
3
■WPtap Mobile Detectorhttp://wordpress.org/extend/plugins/wptap-mobile-detector/
インストール→有効化すると、iPhoneやAndroidなど色々なデバイスの設定ができます。
各デバイスからアクセスした場合、どのテーマを適用するか設定、テーマ以外でも指定し
たURLにリダイレクトもできる
スマホ対応について
DEMO
STEP3
まとめ
✓WordPressはphpで構成されているけどデザイナーさんが触りやすいような作りだと思います
✓まずは子テーマで構造把握、WordPressに慣れてからオリジナルテーマ作成にも是非挑戦を
✓htmlとcssだけでもかなりカスタマイズできるのは魅力ですよね！
WordPressはコミュニティ活動が熱い！
おまけ
WordBench http://wordbench.org/
地域に根づいたWordPress勉強会コミュニティ
おまけ
大阪もやってます！おまけ
11月3日(土)
天満研修センター
おまけ
WordCamp Osaka 2012
WordPress超初心者セミナー
やります！
おまけ
日時：8月19日(日)
時間：講演12:00～14:00
場所：デジタルハリウッド大阪校(梅田・茶屋町)
参加：無料／予約制http://blog.dhw.co.jp/osaka_event/
2012/08/819wordbenchwor-ac5e.html#more
