Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1 of 20

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

16

Share

Download to read offline

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

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. 1. 文系女子デザイナーのための twentytwelveカスタマイズ  初 中級 基本的なコーポレイトサイト作成編 Mami Kuroki @mamy315 ラクして得するかもしれない
  2. 2. Who am I ? Mami Kuroki @mamy315 Webディレクター/デザイナー 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: 16px font-size: 1.142857143rem; となる。
  11. 11. Twentytwelve’s CSS TwentytwelveはCSS3のMedia queries を使って表示サイズごとに切り替えてい ます。 カスタマイズしたあとは、下記のtesterか ら確認すると便利です。 Simple  Media  Queries  Tester
  12. 12. 3rd Step : TOP and Post page top front-page.php トップ post home.php ブログ(新着) post page.php 固定ページ style.css functions .php header. php footer.p hp 固定ページに「トップページ」「新着情報」の ページを作成(本文は入力しなくてもいいです) 設定>表示設定から下記の通りに設定 これで、トップを固定、新着情報を 投稿に設定できました。 でもトップにも新着一覧を表示したいんだけど! 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: Menu footerにもカスタムメニューを追加したい 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 Slider http://wordpress.org/ extend/plugins/ responsive-slider/ 各固定ページのアイキャッ チ画像をヘッダーイメージ として表示できるようにす る header.phpのメニューコード下に上記を記述 ・topページにはスライダー表示 ・固定ページにはアイキャッチ画像表示 ・それ以外(新着情報)には指定画像表示
  18. 18. 6th Step: Web font Webフォントでロゴの書体を変える(CSSに追加するだけだから簡単) http://www.google.com/fonts/ タイトルロゴに、Sintonyというフォントを使ってみました。
  19. 19. Useful Plugins
  20. 20. Thank you サンプルサイト http://mamydesign.net/sample_wbkobe ありがとうございました(*^^*) サンプル子テーマは参加者にのみ配布します。

×