Mais conteúdo relacionado Semelhante a TwentyTwelveの子テーマつくったらハマった話 (20) 3. このスライドは、
こんな人におススメ
いわゆる
「Webデザイナー」
• HTMLとCSSはだいたいわかる
• JavaScriptは、
どっかのブログに書いてあるのを
コピペして使うく らい
• PHPは、
WordPressで最低限必要なことを、
解説書とかブログとか読んで、
なんとなくわかっ ているような、いないような ・
・・
3
5. かのこ、 じゃあ、
ひらめいたのだ！
最新WordPressについてくる
公式テーマ「TwentyTwelve」の
子テーマ作って
カスタマイズしちゃおう ！
なんて、軽く考えていたのですが ・
・・
5
7. 子テーマを作るのは、
「良い方法」だけど「簡単な方法」
ではない！
特に、WordPressに付属して るテーマは要注意
く ！
（TwentyEleven, TwentyTwelve など）
新しい機能や新しい考え方を盛り込んであるので、
新しい機能をすぐに使える
↓
新しい考え方を理解しないといけない！
7
10. 本日のメニュー
●まずは、
子テーマを作ってみよう！
●ie8以下にだけ、
子テーマの style.css が適用されない！
●え ？ テンプレートにcssの記述がないよ
っ ？
●font-sizeの「rem」 て何？ なんか小数点が凄いよ
っ ！
●タイトルに勝手にサイト名が付いて、
SEO対策のプラグイン入れても変なタイトルになるよ！
●親テーマの functions.php のおせっかいな設定が、
子テーマで上書きできないよ ！
10
11. 子テーマを作ってみよう
子テーマを作るには、
ディ トリを作っ
レク て、
style.css に2行ほど書くだけ。 超カンタン!
/*
Theme Name: WB Kyoto 2013_3
Template: twentytwelve
*/
これは、最低限の記述で、
ホントは、
他にもいろいろ
書かないといけないのだ。
だまされちゃイケナイのだ！
11
14. 書き出された HTML を見てみると、
子テーマの style.css の後に、
親テーマの ie.css というのが読み込まれている
link rel='stylesheet' id='twentytwelve-style-css'
href='http://.../wp-content/themes/twentytwelve/style.css?ver=3.5.1'
type='text/css' media='all' /
!--[if lt IE 9]
link rel='stylesheet' id='twentytwelve-ie-css'
href='http://.../wp-content/themes/twentytwelve/css/ie.css?ver=20121010'
type='text/css' media='all' /
![endif]--
で、
ここを直そうと思ってテンプレートを見てみると ・
・・
14
16. テンプレートにcssの記述がない
どうなってんの ？
実は、
TwentyTwelve の functions.php で記述されている
function twentytwelve_scripts_styles() {
global $wp_styles;
（中略 webfontの読込）
/*
* Loads our main stylesheet.
*/
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );
16
17. /*
* Loads the Internet Explorer specific stylesheet.
*/
wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() .
'/css/ie.css', array( 'twentytwelve-style' ), '20121010' );
$wp_styles-add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );
これで、header.php の wp_head() のところにcssが挿入される
メインのcssは、 get_stylesheet_uri() で子テーマの style.css が
適用されるが、 ieは、コンディショナルコメン トが生きて、
ie.css が後から適用される。
ie.css は、get_template_directory_uri() が指定されているので、
親テーマの ie.css が適用されてしまう ！
17
18. つまり、
子テーマの style.css に親テーマの style.css を
@import で読み込む方法だと ・ ・・
１ 親テーマの style.css
．
ネットに書いてある通りじゃ
ダメってことなのだ・・・
２．
子テーマの style.css
こんなの、フツー、
親テーマの ie.css
３． わかんないのだ！
の順に読み込まれるので、
ie8以下で見たときは、
子テーマの style.css が、
親テーマの ie.css で上書きされてしまう ！
18
19. 対策：
子テーマに functions.php をつくって、
スタイルシートの読み込みを再定義する
function wbkyoto_scripts_styles() {
global $wp_styles;
wp_enqueue_style( 'twentytwelve-style',
get_template_directory_uri().'/style.css', array() );
wp_enqueue_style( 'twentytwelve-ie',
get_template_directory_uri() . '/css/ie.css',
array( 'twentytwelve-style' ), '20121010' );
$wp_styles-add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' );
wp_enqueue_style( 'wbkyoto-style',
get_stylesheet_uri(), array('twentytwelve-ie') );
wp_enqueue_style( 'wbkyoto-ie',
get_stylesheet_directory_uri().'/css/wbkyoto-ie.css',
array( 'wbkyoto-style' ) );
$wp_styles-add_data( 'wbkyoto-ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'wbkyoto_scripts_styles' );
19
22. 読込順序（依存関係）
をコントロールできる
wp_enqueue_style() は、
記述順に読み込むのではなく、
第3引数に指定されたハン ドルの「次」
に読み込むように指定される
さきほどの場合は、
１． 親テーマの style.css ハン ： twentytwelve-style
ドル
2． 親テーマの ie.css ハン ： twentytwelve-ie
ドル
3． 子テーマの style.css ハン ： wbkyoto-style
ドル
4． 子テーマの ie.css ハン ： wbkyoto-ie
ドル
の順に書き出される
22
23. ブラウザキャッシュのコントロールができる
第4引数にバージョ ンを指定すると、
ブラウザキャッシュのコントロールができる
（バージョンがGETパラメーターに指定される）
chromeのように、 キャッシュが効きすぎてスタイルシートを修正してもなかなか表示に反映され
ない場合、 GETパラメータを変えてやることで反映されるようになる
いちいちバージョ ンを指定するのも面倒なので、こんな感じで書いておくと、
cssファイルの修正日時を、バージョ して出力して
ンと くれるので、オススメ！
wp_enqueue_style(
'twentytwelve-style',
get_template_directory_uri() . '/style.css',
array(),
date('YmdHis',
filemtime(get_template_directory_uri() . '/style.css'))
);
23
24. テンプレートごと （投稿タイプごととか、カテゴリごとなど）
に
cssを適用したいとき、
たとえば ・
・・ single-blog.php → blog.css
archive-blog.php → blog.css
single-news.php → news.css
archive-news.php → news.css
?php
function news_scripts_styles() {
wp_enqueue_style( 'news-style', get_stylesheet_directory_uri().'/
css/news.css', 'wbkyoto-style' );
wp_enqueue_style( 'news-style-ie', get_stylesheet_directory_uri().'/
css/news-ie.css', 'news-style' );
}
add_action( 'wp_enqueue_scripts', 'news_scripts_styles' );
get_header(); ?
24
25. font-sizeの「rem」って何？
なんか、 小数点が凄いよ！
TwentyTwelve の style.css には、見慣れない単位がある
.site-header h1 {
font-size: 24px;
font-size: 1.714285714rem;
}
font-size の値は、アクセシビリティに配慮し、
文字サイズを変えられるようにするため、
親要素からの相対サイズで指定するのが一般的
（例） html が 14px なら、 は、 （12px）
p 86% とか
25
27. rem （root em）
ルート要素 （htmlタグ）
を基準とした相対サイズ
（例）
html { font-size: 14px; }
ul li { font-size: 0.857142857rem; }
li は 12px で変わらない。
ul
liaaa - 12px
ul
liaaa/li - 12px
/ul
/li
/ul
27
28. TwentyTwelve - style.css
html { font-size: 87.5%; } ← ブラウザのデフォルトが16px
基準の文字サイズが 14px なので、
各フォ トサイズは下記のようになる
ン
16px = 1.142857143rem
12px = 0.857142857rem
11px = 0.785714286rem
10px = 0.714285714rem
こんなの、
おぼえられないのだー
28
29. 「こんなの、覚えられないよ 」
！ というあなた！
子テーマの style.css の最初にこう書いてしまいましょう。
html { font-size: 10px; }
これで、基準の文字サイズが 10pxになったので、
16px = 1.6rem
12px = 1.2rem
11px = 1.1rem これなら、
10px = 1rem わかりやすいのだー
29
30. style.css では、
なぜ rem の前に px を重複して指定しているのか
.site-header h1 {
font-size: 24px;
font-size: 1.714285714rem;
}
というと ・
・・
ie8以前は
rem に対応していない
のでした ・・・
みんな、さっさと
バージョンアップ
してほしいのだ！
30
31. タイトルに勝手にサイト名が付いて、
SEO対策のプラグインを入れると
変なタイ トルになってしまう！
All in One SEO Pack、Headspace2 などのSEO対策用プラグイン
で、 トルに自動でキーワードやサイ
タイ ト名を挿入する対策を行うとき
TwentyTwelve で、
これらのプラグインを推奨設定にすると、
投稿のタイ トルにサイ ト名がダブってしまう
・ in One SEOの設定
All
%post_title% | %blog_title%
・出力されたTitleタグ
title投稿Cherry Pie Wordpress | Cherry Pie Wordpress/title
↑ 投稿名になぜかサイト名が付いてしまう
31
32. TwentyEleven から、
プラグイン無しの状態でも
タイ トルにサイト名が入るようになっている
TwentyEleven は、
テンプレート ファイル header.php に
処理が書いてあったので、 子テーマで変更してやればよかったが、
TwentyTwelve では、functions.php に書かれてしまっ ているので、
テンプレート ファイルでは変更できない
TwentyTwelve - functions.php
function twentytwelve_wp_title( $title, $sep ) {
・・・
（タイトルにサイト名を追加する処理）
・・・
}
add_filter( 'wp_title', 'twentytwelve_wp_title', 10, 2 );
32
34. 親テーマの functions.php の
処理を変更したい ！
子テーマで親テーマの処理を変更したいときは、
アクションフック after_setup_theme を使う
子テーマ - functions.php
function wbkyoto_theme_setup () {
remove_filter( 'wp_title', 'twentytwelve_wp_title');
}
add_action( 'after_setup_theme', 'wbkyoto_theme_setup' );
TwentyTwelve に限らず、
子テーマで親テーマの functions.php 内の処理を変えたり
キャンセルするときには、 上記の関数の中に追加していけばよい
34
35. 親テーマやプラグインの functions.php の中で、
after_setup_theme でフックされている処理は
どうするか ？
add_action() は、第3引数が小さいほうが先に実行される
TwentyTwelve の functions.php にも
after_setup_theme でフックされている関数があるが、
第3引数が設定されていない （デフォル ト値＝10）
ので、
第3引数に10より大きな数値をつければ、 上書きできる
function child_theme_setup () {
（親テーマの処理を上書きする処理）
}
add_action( 'after_setup_theme', 'child_theme_setup', 20 );
35
