自己紹介        瀬口理恵(せぐちりえ)@rie05        1983年大阪うまれ大阪そだち        5DGの屋号でフリーランスデザイナーしてます        Web/DTP/AppUI/講師業/Ust配信 etc     ...
アジェンダもっと知ろう触ろうWordPress!!        1            WordPressって?最新事情        2             子テーマでカスタマイズ        3              スマホ対...
WordPressとは       1 WordPressって?
WordPressとは世界標準のWebパブリッシングプラットフォーム✓ブログ、CMSとしてWebサイトを効率良く制作できるソフトウェア✓世界中でのWebサイトで約1割以上は、WordPressで作られたサイト
WordPressとはリアルタイムでダウンロードされているWordPress http://wordpress.org/download/counter/
WordPressとは  WordPressを採用している国内企業事例                 クックパッド株式会社                 http://info.cookpad.com/                 株式...
WordPressとは          管理画面はこんな感じ
WordPressとはつまりWordPressって?✓プログラムの知識があまりなくても更新管理が簡単 なサイトを作成できる✓複数人で管理でき、オンライン上で編集可能✓無料で使える(商用も無料)✓豊富なテーマ(デザイン外観)とプラグイン拡張
WordPressとは     WordPress最新版は現在3.4.1       ✓ライブテーマプレビュー       ✓カスタムヘッダー       ✓Twitterのツイート埋め込み       ✓パフォーマンス向上 頻繁にアップデート...
子テーマカスタマイズ    2 子テーマカスタマイズ
子テーマカスタマイズ   WordPressをインストールします✓サーバーに契約✓WordPressをダウンロード✓サーバーにインストール✓初期設定                       
子テーマカスタマイズ                               テーマ構成                      全てのテーマファイルは、ここ   Twenty Eleven        Twenty Ten      ...
子テーマカスタマイズ    最初からインストールされているテーマ以外にも  たくさんテーマは公開されています(無料でも有料でも)
子テーマカスタマイズ                       テーマ中身                      Twenty Ten               いっぱいファイルがありますが、             これがテーマの絶対...
子テーマカスタマイズ                        テーマ最小構成               index.php                  style.css                 php          ...
子テーマカスタマイズ                            構造サンプル             index.php         メインビジュアル                               header.p...
子テーマカスタマイズ    例えばこんな感じのindex.php     <?php get_header(); ?>             コンテンツ     <?php get_sidebar(); ?>     <?php get_fo...
子テーマカスタマイズ            子テーマとは✓ 別のテーマ(親テーマ)の機能を継承、追加や修正ができるテーマ✓ HTMLとCSSの知識で触ることができる✓ バージョンアップで親テーマが自動アップデートされても影響ない    公式テー...
子テーマカスタマイズ          子テーマの考え方          基本的に親テーマは「そのまま」        変えたいところだけ子テーマで「上書き」                          変更したい           ...
子テーマカスタマイズ                      子テーマ準備          /wp-content/themes/に新規テーマフォルダを作成、              その中に新規cssファイル(style.css)を作成...
子テーマカスタマイズ          子テーマ準備  作った子テーマフォルダをそのままサーバーへアップロード ★同じことをしてくれる(最低限の子テーマを作成)プラグイン One-Click Child Theme
子テーマカスタマイズ         子テーマ準備      WordPress管理画面>外観>テーマに     作った子テーマが反映されてるので有効化                 これで子テーマの準備が                  ...
子テーマカスタマイズ               ついでに240px×180pxでデザインのスクリーンショットを撮ってテーマフォルダ直下へ「screenshot.jpg」として保存。         ここで使われます!
子テーマカスタマイズ             ✓ 最初から全てを理解するのは難しいので必要              最低限のところからカスタマイズしていく             ✓ phpが分からなくてもできることがいっぱい        ...
子テーマカスタマイズ              子テーマカスタマイズ               例えば、タイトル文字の色を変えたい時は#site-title a {  color: #FF0000;}          Firebugなんかで...
子テーマカスタマイズ                    Webフォントの話                     CSS3の@font-face  TTF形式フォントが使えるブラウザ:Safari、Chrome、Firefox、Opera...
子テーマカスタマイズWordPress最新バージョン3.4新機能        ライブテーマプレビュー 有効に使うと更にソースコードを触らず見た目の変更が可能です!
子テーマカスタマイズ        DEMO
子テーマカスタマイズ     子テーマカスタマイズ    色々やっても親テーマは汚さないので練習に最適      どんどんcssレベルでデザインを変更!                              子テーマの           ...
子テーマカスタマイズ          子テーマカスタマイズ            子テーマである程度慣れてきたら、       スクラッチでオリジナルテーマ作成も楽に取り組みやすいヘッダー(header.php)サイドバー(sidebar.p...
スマホ対応について    3 スマホ対応について
スマホ対応について■WPtap Mobile Detectorhttp://wordpress.org/extend/plugins/wptap-mobile-detector/インストール→有効化すると、iPhoneやAndroidなど色々な...
STEP3        DEMO
まとめ✓WordPressはphpで構成されているけどデザイ ナーさんが触りやすいような作りだと思います✓まずは子テーマで構造把握、WordPressに慣れて からオリジナルテーマ作成にも是非挑戦を✓htmlとcssだけでもかなりカスタマイズで...
おまけWordPressはコミュニティ活動が熱い!
おまけWordBench      http://wordbench.org/地域に根づいたWordPress勉強会コミュニティ
おまけ      大阪もやってます!
おまけWordCamp Osaka 2012        11月3日(土)        天満研修センター
おまけ      WordPress      超初心者セミナー                       やります!日時:8月19日(日)時間:講演12:00∼14:00場所:デジタルハリウッド大阪校(梅田・茶屋町)参加:無料/予約制htt...
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
Upcoming SlideShare
Loading in...5
×

CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ

17,646

Published on

CSS Nite in OSAKA, Vol.32

Published in: Design
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
17,646
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
47
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ

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

    Clipping is a handy way to collect important slides you want to go back to later.

×