1. 文系女子デザイナーのための
twentytwelveカスタマイズ
初 中級 基本的なコーポレイトサイト作成編
Mami Kuroki @mamy315
ラクして得するかもしれない

2. Who am I ?
Mami Kuroki @mamy315
Webディレクター/デザイナー
WordBench 神戸メンバー
WordCamp Kobe2013 実行委員＋副委員長的進行
WordCamp Kobe2011 実行委員＋スピーカー
もともとは紙デザイナー。WordPress歴は3-4年ほどです。
やらざるを得ない環境で仕方なく独学で覚えました。
すきなもの♡ごはん、外国、旅、猫、レトロかわいいもの。
きらいなもの▼システム、サーバー、バグ、チューニング、デスマ、年度末。
（ 耳にしただけでエアハゲます(^O^)/ ）
つまんないことしか
つぶやかないので
非公式アカウントです
探さないでください。
世をしのぶ仮の姿

3. Why twentytwelve I recommend?
色んなテーマを試用してみたけど・・
高機能なものはカスタマイズしにくく、仕様やCSSを解読するだけで
時間がかかる。。。
結論
自分でテーマを作っちゃう！ もしくは、
twentytwelveの子テーマが一番使いやすいっっ！
Twentytwelveは出来る子！なにが？どこが？
・カスタマイズしやすいシンプルテーマ
・デフォルトテーマだからとりあえず安全
・レスポンシブにも対応してる
・機能を最大限活用すれば出来ることはたくさん！

4. What should you do?
これをするだけでデザインかわるよ！の4項目
1. Web Fontを使ってロゴの雰囲気を変える
2. グローバルメニューのクラスを使ってメニューデザインを変える
3. 固定ページのヘッダー画像をアイキャッチ画像で設定する
4. スライダープラグインで画像スライドショーいれてみる
ほんのちょっとfunctions.phpとテンプレートにコード追加で
自由度の高いカスタマイズが可能
上記は全て、
私がコーポレートサイトを
構築する際、
よくとりいれてます。

5. Twentytwelve
本体
http://twentytwelvedemo.wordpress.com/
今回説明するサンプルサイト（カスタマイズは極力最小にとどめてます）
http://mamydesign.net/sample_wbkobe/

6. 1st Step : twentytwelve
おかーさん（本体）ファイルはこんなに一杯！

7. 2nd Step : child theme of twentytwelve
カスタマイズしたいファイルだけコピペして子テーマに
front-page.phpはおかーさんフォルダの[page-template]の中にあるのでそのままコ
ピペしてきましょう。home.phpはindex.phpをコピペしてください。
←これは追加で作成しましたが、
sidebar.phpをコピって作ります。

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. 2nd Step : child theme‘s CSS
有効化

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. Twentytwelve’s CSS
TwentytwelveはCSS3のMedia queries
を使って表示サイズごとに切り替えてい
ます。
カスタマイズしたあとは、下記のtesterか
ら確認すると便利です。
Simple
Media
Queries
Tester

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. 3rd Step : TOP and Post page
♡ここがtwentytwelveのすごいとこ。
フロントページウィジットエ
リアに「最近の投稿」一覧を
追加できます。
こちらはブログ（新着情報）
に適用されるサイドバーです。
表示したい項目を自由に追加
削除してください。

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. 3rd Step : TOP and Post page
でた！
固定ページ用ウィジッ
トが追加できました。
表示したいウィジット
を指定して保存。

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. 5th Step: Header-img / Slider
管理画面から画像変更でき
るようなスライダーをTOP
に表示させ
固定ページのヘッダー画像
も管理画面から変更したい
Responsive Slider
http://wordpress.org/
extend/plugins/
responsive-slider/
各固定ページのアイキャッ
チ画像をヘッダーイメージ
として表示できるようにす
る
header.phpのメニューコード下に上記を記述
・topページにはスライダー表示
・固定ページにはアイキャッチ画像表示
・それ以外（新着情報）には指定画像表示

18. 6th Step: Web font
Webフォントでロゴの書体を変える（CSSに追加するだけだから簡単）
http://www.google.com/fonts/
タイトルロゴに、Sintonyというフォントを使ってみました。

19. Useful Plugins

20. Thank you
サンプルサイト
http://mamydesign.net/sample_wbkobe
ありがとうございました(*^^*)
サンプル子テーマは参加者にのみ配布します。