Download as PDF, PPTX
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
- 2. 自己紹介 瀬口理恵（せぐちりえ）＠rie05 1983年大阪うまれ大阪そだち 5DGの屋号でフリーランスデザイナーしてます Web/DTP/AppUI/講師業/Ust配信 etc WordCamp大阪 実行委員長 WordBench大阪 管理人 WordCamp神戸実行委員・スピーカー @rie05 /rie.seguchi
- 3. アジェンダ もっと知ろう触ろうWordPress!! １ WordPressって？最新事情 2 子テーマでカスタマイズ 3 スマホ対応について
- 4. WordPressとは １ WordPressって？
- 5.
- 6.
- 7. WordPressとは WordPressを採用している国内企業事例 クックパッド株式会社 http://info.cookpad.com/ 株式会社カカクコム（コーポレートサイト） http://corporate.kakaku.com/ さいたまスーパーアリーナ http://www.saitama-arena.co.jp/
- 8. WordPressとは 管理画面はこんな感じ
- 9.
- 10. WordPressとは WordPress最新版は現在3.4.1 ✓ライブテーマプレビュー ✓カスタムヘッダー ✓Twitterのツイート埋め込み ✓パフォーマンス向上 頻繁にアップデート→日本語化されています 2012年12月に3.5がリリース予定
- 11. 子テーマカスタマイズ 2 子テーマカスタマイズ
- 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' ;
- 28. 子テーマカスタマイズ WordPress最新バージョン3.4新機能 ライブテーマプレビュー 有効に使うと更にソースコードを触らず見た目の変更が可能です！
- 29. 子テーマカスタマイズ DEMO
- 30. 子テーマカスタマイズ 子テーマカスタマイズ 色々やっても親テーマは汚さないので練習に最適 どんどんcssレベルでデザインを変更！ 子テーマの 最小構成 style.cssのみ で可能
- 31. 子テーマカスタマイズ 子テーマカスタマイズ 子テーマである程度慣れてきたら、 スクラッチでオリジナルテーマ作成も楽に取り組みやすい ヘッダー（header.php） サイドバー（sidebar.php） 記事一覧のループ部分（loop.php） フッター（footer.php） トップページ等（index.php） 記事ページ（single.php） テーマのための関数（functions.php） スタイルシート（style.css）
- 32. スマホ対応について 3 スマホ対応について
- 33.
- 34. STEP3 DEMO
- 35.
- 36.
- 37. おまけ WordBench http://wordbench.org/ 地域に根づいたWordPress勉強会コミュニティ
- 38. おまけ 大阪もやってます！
- 39. おまけ WordCamp Osaka 2012 11月3日(土) 天満研修センター
- 40. おまけ WordPress 超初心者セミナー やります！ 日時：8月19日(日) 時間：講演12:00∼14:00 場所：デジタルハリウッド大阪校(梅田・茶屋町) 参加：無料／予約制 http://blog.dhw.co.jp/osaka_event/ 2012/08/819wordbenchwor-ac5e.html#more