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.

TwentyTwelveの子テーマつくったらハマった話

14,439 views

Published on

WordBench京都 2013年3月17日

TwentyTwelveの子テーマつくったらハマった話

  1. 1. TwentyTwelveの 子テーマつく ったらハマった話 2013/03/17 WordBench京都 Cherry Pie Web 川井昌彦
  2. 2. 自己紹介●川井昌彦(かわいまさひこ) @sakuragi_kei 東京の制作会社で24年間勤めた後、 京都府舞鶴市に帰郷してフリーランスで活動中  実は、DTPのほうが経験が長い (このスライ ドも InDesign で作っています)  実は、MovableTypeのほうが経験が長い 小桜インコ シロハラインコ 黒い柴犬のパパ ・ ・Cherry Pie Web http://www.cherrypieweb.com 2
  3. 3. このスライドは、 こんな人におススメいわゆる 「Webデザイナー」• HTMLとCSSはだいたいわかる• JavaScriptは、 どっかのブログに書いてあるのを コピペして使うく らい• PHPは、 WordPressで最低限必要なことを、 解説書とかブログとか読んで、 なんとなくわかっ ているような、いないような ・ ・・ 3
  4. 4. まえがき―子テーマとはWordPressの制作 ≒ テーマの作成一からテーマを作るのは大変既存のテーマを持ってきて、 一部を改造して使うのが手っ取り早い         その時によく使われる方法が、子テーマ」 「             ※ テーマのメリ トは、 子 ッ 他でもいろいろ説明されているので ここでは省略              WordBench京都2月の、 瀬戸さんのスライ ドとか見ましょう。              http://www.slideshare.net/aschachamaru/ss-16625153 ←これは、子イヌ 4
  5. 5. かのこ、 じゃあ、 ひらめいたのだ! 最新WordPressについてくる 公式テーマ「TwentyTwelve」の 子テーマ作って カスタマイズしちゃおう !             なんて、軽く考えていたのですが ・ ・・ 5
  6. 6. 甘かった! 6
  7. 7. 子テーマを作るのは、 「良い方法」だけど「簡単な方法」 ではない!  特に、WordPressに付属して るテーマは要注意 く !   (TwentyEleven, TwentyTwelve など)  新しい機能や新しい考え方を盛り込んであるので、     新しい機能をすぐに使える           ↓   新しい考え方を理解しないといけない! 7
  8. 8.   しかも、TwentyTwelveでは、   TwentyEleven までのやり方だとうまく行かないことがある 世の中のブログ記事の多くが、    ”時代遅れ”になっている! 早く、 追いつくのだ! 8
  9. 9. というわけで、今日は、  実際に「TwentyTwelve」の      子テーマを作りながら、  「ハマりやすい」 ところと     その対処法について           お話しします。 9
  10. 10. 本日のメニュー●まずは、 子テーマを作ってみよう!●ie8以下にだけ、 子テーマの style.css が適用されない!●え ? テンプレートにcssの記述がないよ っ ?●font-sizeの「rem」 て何? なんか小数点が凄いよ っ !●タイトルに勝手にサイト名が付いて、 SEO対策のプラグイン入れても変なタイトルになるよ!●親テーマの functions.php のおせっかいな設定が、 子テーマで上書きできないよ ! 10
  11. 11. 子テーマを作ってみよう子テーマを作るには、 ディ トリを作っ レク て、  style.css に2行ほど書くだけ。 超カンタン!/*Theme Name: WB Kyoto 2013_3Template: twentytwelve*/ これは、最低限の記述で、 ホントは、 他にもいろいろ 書かないといけないのだ。 だまされちゃイケナイのだ! 11
  12. 12. 子テーマを適用すると、  親テーマの style.css が適用されなくなる子テーマでは、cssは子テーマの style.css が使用される親テーマを流用して 一部だけ改造したいのだから、       親テーマのcssを適用したい           ↓子テーマの style.css の先頭に、親テーマの style.css を読み込んで、子テーマの style.css で上書きしていく@import url(../twentytwelve/style.css);        (注) この方法は、 TwentyEleven までのやりかた 12
  13. 13. ie8以下だけ、 子テーマの style.css が適用されない!この方法で、 子テーマの style.css で上書きしてみると ・ ・・子テーマの css が 「適用されるところ」「適用されないところ」 と が出て る く ! しかも、    ie8以下 だけ!・・ ・ でも、 これ、ieが悪いんじゃないんです 。     TwentyTwelve のせいなんです ・ ・・ 13
  14. 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
  15. 15.   テンプレートに、cssの記述がない!     TwentyEleven では、header.php で      スタイルシートを読み込んでいたが、     TwentyTwelveでは読み込む記述がない ! どうなってんの? 15
  16. 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. 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. 18. つまり、 子テーマの style.css に親テーマの style.css を             @import で読み込む方法だと ・ ・・1 親テーマの style.css . ネットに書いてある通りじゃ ダメってことなのだ・・・2. 子テーマの style.css こんなの、フツー、 親テーマの ie.css3. わかんないのだ!の順に読み込まれるので、  ie8以下で見たときは、 子テーマの style.css が、      親テーマの ie.css で上書きされてしまう ! 18
  19. 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
  20. 20. (解説)親テーマの下記の記述では、子テーマの style.css が読み込まれてしまうwp_enqueue_style( twentytwelve-style, get_stylesheet_uri());そのため、子テーマで同じハンドルを使っ 再定義する て、wp_enqueue_style( twentytwelve-style, get_template_directory_uri()./style.css, array()); 20
  21. 21. なぜ、 こんなややこしいことをしているのか?1 読込順序 . (依存関係) をコントロールできる2. バージョン指定により、    ブラウザキャッシュの      コン トロールができる うー、めんどくさくて、 眠くなりそうなのだー 21
  22. 22. 読込順序(依存関係) をコントロールできるwp_enqueue_style() は、 記述順に読み込むのではなく、  第3引数に指定されたハン ドルの「次」 に読み込むように指定されるさきほどの場合は、 1. 親テーマの style.css ハン : twentytwelve-style ドル 2. 親テーマの ie.css ハン : twentytwelve-ie ドル 3. 子テーマの style.css ハン : wbkyoto-style ドル 4. 子テーマの ie.css ハン : wbkyoto-ie ドルの順に書き出される 22
  23. 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. 24. テンプレートごと (投稿タイプごととか、カテゴリごとなど) にcssを適用したいとき、たとえば ・ ・・ single-blog.php → blog.css archive-blog.php → blog.css single-news.php → news.css archive-news.php → news.css?phpfunction 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. 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
  26. 26. しかし、親要素を継承するので、だんだんわからなくなる。(例)html { font-size: 14px; }ul li { font-size: 86%; }li はどんどん小さくなる ul liaaa - 12px ul liaaa/li - 10px /ul /li /ul14px × 0.86 × 0.86 = ??? 26
  27. 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. 28. TwentyTwelve - style.csshtml { font-size: 87.5%; } ← ブラウザのデフォルトが16px基準の文字サイズが 14px なので、 各フォ トサイズは下記のようになる ン16px = 1.142857143rem12px = 0.857142857rem11px = 0.785714286rem10px = 0.714285714rem こんなの、 おぼえられないのだー 28
  29. 29. 「こんなの、覚えられないよ 」 ! というあなた!子テーマの style.css の最初にこう書いてしまいましょう。html { font-size: 10px; }これで、基準の文字サイズが 10pxになったので、16px = 1.6rem12px = 1.2rem11px = 1.1rem これなら、10px = 1rem わかりやすいのだー 29
  30. 30. style.css では、 なぜ rem の前に px を重複して指定しているのか.site-header h1 { font-size: 24px; font-size: 1.714285714rem;}というと ・ ・・  ie8以前は   rem に対応していない         のでした ・・・ みんな、さっさと バージョンアップ してほしいのだ! 30
  31. 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. 32. TwentyEleven から、 プラグイン無しの状態でも         タイ トルにサイト名が入るようになっているTwentyEleven は、 テンプレート ファイル header.php に 処理が書いてあったので、 子テーマで変更してやればよかったが、TwentyTwelve では、functions.php に書かれてしまっ ているので、 テンプレート ファイルでは変更できないTwentyTwelve - functions.phpfunction twentytwelve_wp_title( $title, $sep ) { ・・・ (タイトルにサイト名を追加する処理) ・・・}add_filter( wp_title, twentytwelve_wp_title, 10, 2 ); 32
  33. 33. add_filter されている処理は、    remove_filter で削除できるでも ・ ・・  functions.php は、   子テーマ → 親テーマ の順で読み込まれるので、子テーマの functions.php で単にremove_filter( wp_title, twentytwelve_wp_title);と書いても、 そのあとで親テーマで add_filterされてしまう ・ ・・ 33
  34. 34. 親テーマの functions.php の       処理を変更したい !子テーマで親テーマの処理を変更したいときは、 アクションフック after_setup_theme を使う子テーマ - functions.phpfunction wbkyoto_theme_setup () { remove_filter( wp_title, twentytwelve_wp_title);}add_action( after_setup_theme, wbkyoto_theme_setup );TwentyTwelve に限らず、 子テーマで親テーマの functions.php 内の処理を変えたり  キャンセルするときには、 上記の関数の中に追加していけばよい 34
  35. 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
  36. 36.   ご清聴ありがとうございました。 36
  37. 37. 37

×