[WordPress]TwentyTwelveの子テーマを作ってハマった話

1月に続いて、またまた「WordBench京都」にてお話をさせていただきました。

Webデザイナー向けのテーマ作成関連のセッション2つ

今月はテーマ作成に関わるセッションで、1つ目は秋山さんの「CSSフレームワークを使った簡単レスポンシブサイトの作成」、
2つ目は私の「TwentyTwelveの子テーマを作ってハマった話」です。

秋山さんのセッションは、なんだか使いづらいと思っていた「CSSフレームワーク」について、いくつかの有名なフレームワークを比較していて下さっていて、自分に合ったフレームワークを選ぶことができれば、ほんの数時間でサイトが何となく出来上がってしまうということが良くわかりました。
時間の関係でWordPressへ実際に実装するところまでの話が無かったのが残念です。
「そこが知りたかったのに」という人も何人かおられたようです。

子テーマって簡単じゃないんだよ

さて、私のセッションですが、先月のWordBench京都の瀬戸さんのセッション「テーマ作成のアプローチ」で、子テーマによる開発を説明しておられたので、それに関連した話という捉え方で聴いていただければと思ってお話をさせていただきました。

子テーマを作るんなら「デフォルトで付属している公式テーマを使うのが王道」と思われるでしょうが、WordPressに付属しているテーマって言うのは新機能のショーケース的要素が強くて、いわゆる「Webデザイナー」には結構敷居が高いのです。
特に、WordPress3.4 に付属していた「TwentyEleven」は凝りすぎていて、子テーマでのカスタマイズの際は、まず親テーマの設定をクリアしないと・・・なんて本末転倒な感じになっていました。

そういった意見が多かったのか、WordPress3.5 に付属する「TwentyTwelve」は、「TwentyEleven」よりもかなりシンプルな作りになっています。
とはいえ、いろいろ新しい考え方が盛り込まれていて「なんだこれ?」と思うことが多いんです。

というわけで、私のセッションでは、その中でも下記の点を取り上げました。

  • ie8以下にだけ、 子テーマの style.css が適用されない!
  • え ? テンプレートにcssの記述がない?
  • font-sizeの「rem」 て何? なんか小数点が凄いよ!
  • タイトルに勝手にサイト名が付いて、SEO対策のプラグイン入れても変なタイトルになるよ!
  • 親テーマの functions.php のおせっかいな設定が、子テーマで上書きできないよ !

 

モバイルファーストなんて言う超重要なポイントもあったんですが、それを取り上げると何時間もかかりそうだったので、あえて割愛しました。

詳しくはスライドを見ていただければと思います。

実際に作ったサイトのご紹介

実際に「TwentyTwelve」の子テーマで作成したサイトは下記になります。

七宝かさね「舞鶴巧芸」
http://sippoukasane.jp/

クライアントさんがまだサイト運用に慣れておられないので、こちらからもサポートしつつ、徐々に作り上げていこうと思っています。

[WordPress]TwentyTwelveの子テーマを作ってハマった話” に対して 3 件のコメントがあります

  1. yuhico25 より:

    質問がありまして投稿をさせて頂きました。
    早速スライドを見てfunctions.phpに19ページの内容を明記したのですが、上手く反映がされない状態です。
    具体的にはテーマ編集画面・サイト画面の上部に、functions.phpに追記した文章がそのまま表示されてしまう状態です。
    ワードプレスや言語などの知識が無い初心者でして、非常に基本的な質問かもしれませんが、宜しければ下記内容につきましてご回答を頂けませんでしょうか。
    1. 19ページのコードに仕様者側で追記をしなければならない箇所はありますでしょうか。(ファイルの在処など)
    2. 子テーマ設定後に細かな箇所(ヘッダー部分のサイズ変更など)を行う場合は、style.cssに追記する形で宜しいのでしょうか。
    大変お手数では御座いますが、ご回答を頂けますととても嬉しいです。
    お手数では御座いますが、何卒宜しくお願いを致します。

  2. さくらぎけい より:

    元からあった functions.php に追記されたのでしょうか?
    もし、新規に作られたのであれば、functions.php の先頭に
    <?php
    はありますか?
    「文字がそのまま表示される」ということは、PHPとして認識されていないのではないかと思います。

  3. さくらぎけい より:

    子テーマが認識されていれば、細かい調整は、子テーマの style.css で、親テーマのCSSを上書きするように記述していくことになりますね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です