文系女子デザイナーのための
twentytwelveカスタマイズ 初~中級 基本的なコーポレイトサイト作成編
Mami Kuroki @mamy315
ラクして得するかもしれない
Who am I ?
Mami Kuroki @mamy315 Webディレクター/デザイナー WordBench 神戸メンバー WordCamp Kobe2013 実行委員＋副委員長的進行 WordCamp Kobe2011 実行委員＋スピーカー もともとは紙デザイナー。WordPress歴は3-4年ほどです。 やらざるを得ない環境で仕方なく独学で覚えました。 すきなもの♡ごはん、外国、旅、猫、レトロかわいいもの。 きらいなもの▼システム、サーバー、バグ、チューニング、デスマ、年度末。 （ 耳にしただけでエアハゲます(^O^)/ ）
つまんないことしか つぶやかないので
非公式アカウントです 探さないでください。
世をしのぶ仮の姿
Why twentytwelve I recommend?
色んなテーマを試用してみたけど・・ 高機能なものはカスタマイズしにくく、仕様やCSSを解読するだけで 時間がかかる。。。 結論 自分でテーマを作っちゃう！ もしくは、 twentytwelveの子テーマが一番使いやすいっっ！ Twentytwelveは出来る子！なにが？どこが？ ・カスタマイズしやすいシンプルテーマ ・デフォルトテーマだからとりあえず安全 ・レスポンシブにも対応してる ・機能を最大限活用すれば出来ることはたくさん！
What should you do?
これをするだけでデザインかわるよ！の4項目 1. Web Fontを使ってロゴの雰囲気を変える 2. グローバルメニューのクラスを使ってメニューデザインを変える 3. 固定ページのヘッダー画像をアイキャッチ画像で設定する 4. スライダープラグインで画像スライドショーいれてみる
ほんのちょっとfunctions.phpとテンプレートにコード追加で 自由度の高いカスタマイズが可能
上記は全て、 私がコーポレートサイトを
構築する際、 よくとりいれてます。
Twentytwelve
本体 http://twentytwelvedemo.wordpress.com/ 今回説明するサンプルサイト（カスタマイズは極力最小にとどめてます） http://mamydesign.net/sample_wbkobe/
1st Step : twentytwelve
おかーさん（本体）ファイルはこんなに一杯！
2nd Step : child theme of twentytwelve
カスタマイズしたいファイルだけコピペして子テーマに
front-page.phpはおかーさんフォルダの[page-template]の中にあるのでそのままコピペしてきましょう。home.phpはindex.phpをコピペしてください。
←これは追加で作成しましたが、sidebar.phpをコピって作ります。
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に親テーマを呼び出す記述をして管理画面から有効化
2nd Step : child theme ‘s CSS
有効化
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; となる。
Twentytwelve’s CSS
TwentytwelveはCSS3のMedia queries を使って表示サイズごとに切り替えています。 カスタマイズしたあとは、下記のtesterから確認すると便利です。 Simple Media Queries Tester
3rd Step : TOP and Post page
top
front-page.php トップ
post
home.php ブログ（新着）
post
page.php 固定ページ
style.css
functions.php
header.php
footer.php
固定ページに「トップページ」「新着情報」の ページを作成（本文は入力しなくてもいいです） 設定＞表示設定から下記の通りに設定
これで、トップを固定、新着情報を 投稿に設定できました。 でもトップにも新着一覧を表示したいんだけど！
sidebar-page.php
3rd Step : TOP and Post page
♡ここがtwentytwelveのすごいとこ。
フロントページウィジットエリアに「最近の投稿」一覧を追加できます。
こちらはブログ（新着情報）に適用されるサイドバーです。 表示したい項目を自由に追加削除してください。
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も書き換えます。
3rd Step : TOP and Post page
でた！
固定ページ用ウィジットが追加できました。 表示したいウィジットを指定して保存。
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’ )); ?>
5th Step: Header-img / Slider
管理画面から画像変更できるようなスライダーをTOPに表示させ 固定ページのヘッダー画像も管理画面から変更したい
”Responsive Slider” http://wordpress.org/extend/plugins/responsive-slider/ 各固定ページのアイキャッチ画像をヘッダーイメージとして表示できるようにする
header.phpのメニューコード下に上記を記述 ・topページにはスライダー表示 ・固定ページにはアイキャッチ画像表示 ・それ以外（新着情報）には指定画像表示
6th Step: Web font
Webフォントでロゴの書体を変える（CSSに追加するだけだから簡単） http://www.google.com/fonts/ タイトルロゴに、Sintonyというフォントを使ってみました。
Useful Plugins
Thank you
サンプルサイト http://mamydesign.net/sample_wbkobe ありがとうございました(*^^*) サンプル子テーマは参加者にのみ配布します。
Recommended
