文系女子デザイナーのためのラクして得するtwentytwelveカスタマイズ

12,264 views

Published on

WordBench神戸2013年5月6日の勉強会用資料です。
サンプルサイト:http://mamydesign.net/sample_wbkobe/

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

No Downloads
Views
Total views
12,264
On SlideShare
0
From Embeds
0
Number of Embeds
1,379
Actions
Shares
0
Downloads
40
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

文系女子デザイナーのためのラクして得するtwentytwelveカスタマイズ

  1. 1. 文系女子デザイナーのためのtwentytwelveカスタマイズ 初 中級 基本的なコーポレイトサイト作成編Mami Kuroki @mamy315 ラクして得するかもしれない
  2. 2. Who am I ? Mami Kuroki @mamy315Webディレクター/デザイナーWordBench 神戸メンバーWordCamp Kobe2013 実行委員+副委員長的進行WordCamp Kobe2011 実行委員+スピーカーもともとは紙デザイナー。WordPress歴は3-4年ほどです。やらざるを得ない環境で仕方なく独学で覚えました。すきなもの♡ごはん、外国、旅、猫、レトロかわいいもの。きらいなもの▼システム、サーバー、バグ、チューニング、デスマ、年度末。       ( 耳にしただけでエアハゲます(^O^)/ ) つまんないことしか  つぶやかないので  非公式アカウントです  探さないでください。 世をしのぶ仮の姿
  3. 3. Why twentytwelve I recommend?色んなテーマを試用してみたけど・・高機能なものはカスタマイズしにくく、仕様やCSSを解読するだけで時間がかかる。。。結論自分でテーマを作っちゃう! もしくは、twentytwelveの子テーマが一番使いやすいっっ!Twentytwelveは出来る子!なにが?どこが?・カスタマイズしやすいシンプルテーマ・デフォルトテーマだからとりあえず安全・レスポンシブにも対応してる・機能を最大限活用すれば出来ることはたくさん!
  4. 4. What should you do?これをするだけでデザインかわるよ!の4項目1.  Web Fontを使ってロゴの雰囲気を変える2.  グローバルメニューのクラスを使ってメニューデザインを変える3.  固定ページのヘッダー画像をアイキャッチ画像で設定する4.  スライダープラグインで画像スライドショーいれてみるほんのちょっとfunctions.phpとテンプレートにコード追加で自由度の高いカスタマイズが可能上記は全て、 私がコーポレートサイトを 構築する際、 よくとりいれてます。
  5. 5. Twentytwelve本体http://twentytwelvedemo.wordpress.com/今回説明するサンプルサイト(カスタマイズは極力最小にとどめてます)http://mamydesign.net/sample_wbkobe/
  6. 6. 1st Step : twentytwelveおかーさん(本体)ファイルはこんなに一杯!
  7. 7. 2nd Step : child theme of twentytwelveカスタマイズしたいファイルだけコピペして子テーマにfront-page.phpはおかーさんフォルダの[page-template]の中にあるのでそのままコピペしてきましょう。home.phpはindex.phpをコピペしてください。 ←これは追加で作成しましたが、sidebar.phpをコピって作ります。
  8. 8. 2nd Step : child theme of twentytwelve/* Theme Name:Sample-wbkobe: Twenty Twelve Child Description:Twenty Twelve を利用した子テーマです。 Template:twentytwelve Version:1.0 Author:Mami Kuroki Author URI:http://mamydesign.net/ */ @import url("../twentytwelve/style.css"); CSSに親テーマを呼び出す記述をして管理画面から有効化
  9. 9. 2nd Step : child theme‘s CSS有効化
  10. 10. Twentytwelve’s CSS一見複雑に見えるtwentytwelveのCSSのポイントだけおさらい。サイズ「rem」について・・ルート要素に対する相対的なフォントサイズ/IE8以下は不可             *emは親要素に対して相対的なので場合によってサイズが変わってしまう。                  ピクセル指定は小さいデバイスには不向きTwentytwelveのCSSには基本となる数字が明記されている♪加えてIE8以下用にpx表記も同時に書いていて親切。$rembase: 14;font-size: 16pxの場合、16÷14=1.142857143 (rem)よってfont-size: 16pxfont-size: 1.142857143rem;となる。
  11. 11. Twentytwelve’s CSSTwentytwelveはCSS3のMedia queriesを使って表示サイズごとに切り替えています。カスタマイズしたあとは、下記のtesterから確認すると便利です。Simple  Media  Queries  Tester
  12. 12. 3rd Step : TOP and Post pagetopfront-page.php トップ posthome.php ブログ(新着) postpage.php 固定ページ style.css functions.php header.php footer.php 固定ページに「トップページ」「新着情報」のページを作成(本文は入力しなくてもいいです)設定>表示設定から下記の通りに設定これで、トップを固定、新着情報を投稿に設定できました。でもトップにも新着一覧を表示したいんだけど!sidebar-page.php
  13. 13. 3rd Step : TOP and Post page♡ここがtwentytwelveのすごいとこ。フロントページウィジットエリアに「最近の投稿」一覧を追加できます。こちらはブログ(新着情報)に適用されるサイドバーです。表示したい項目を自由に追加削除してください。
  14. 14. 3rd Step : TOP and Post pageでもこのままでは、固定ページのサイドバーはメインサイドバー(新着情報)と同じまま。。固定ページ用のウィジットを増やしてしまおう!!本体のfunction.php 205∼213行目をコピーして子テーマfunctions.phpへ。sidebar-1をsidebar-4に書き換えます。register_sidebar(  array(      name  =>  __(  固定ページ用サイドバー,  twentytwelve  ),      id  =>  sidebar-­‐4’,      descrip;on  =>  __(  固定ページを作成した時、サイドバーにカスタムメニューが表示されるようにするためのものです,  twentytwelve  ),      before_widget  =>  <aside  id="%1$s"  class="widget  %2$s">’,      aDer_widget  =>  </aside>’,      before_;tle  =>  <h3  class="widget-­‐;tle">’,      aDer_;tle  =>  </h3>’,    )  ); <?php  if  (  is_ac;ve_sidebar(  sidebar-­‐4  )  )  :  ?>  <div  id="secondary"  class="widget-­‐area"  role="complementary">  <?php  dynamic_sidebar(  sidebar-­‐4  );  ?>  </div><!-­‐-­‐  #secondary  -­‐-­‐>  <?php  endif;  ?> 同じくsidebar-page.phpも書き換えます。
  15. 15. 3rd Step : TOP and Post pageでた!固定ページ用ウィジットが追加できました。表示したいウィジットを指定して保存。
  16. 16. 4th Step: Menufooterにもカスタムメニューを追加したいfunctions.phpに以下を記述外観>メニューからheader/footerを追加して、それぞれテーマの場所を選択して保存。メニューのデザインはCSSで変更します。register_nav_menus(array(          footer  =>  フッターナビゲーション’)  ); footer.phpに以下を記述<?php  wp_nav_menu(array(          theme_loca;on  =>  footer’  ));  ?>
  17. 17. 5th Step: Header-img / Slider管理画面から画像変更できるようなスライダーをTOPに表示させ固定ページのヘッダー画像も管理画面から変更したいResponsive Sliderhttp://wordpress.org/extend/plugins/responsive-slider/各固定ページのアイキャッチ画像をヘッダーイメージとして表示できるようにするheader.phpのメニューコード下に上記を記述・topページにはスライダー表示・固定ページにはアイキャッチ画像表示・それ以外(新着情報)には指定画像表示
  18. 18. 6th Step: Web fontWebフォントでロゴの書体を変える(CSSに追加するだけだから簡単)http://www.google.com/fonts/タイトルロゴに、Sintonyというフォントを使ってみました。
  19. 19. Useful Plugins
  20. 20. Thank youサンプルサイトhttp://mamydesign.net/sample_wbkobeありがとうございました(*^^*)サンプル子テーマは参加者にのみ配布します。

×