WordPressを子テーマでカスタマイズする方法。

2014年5月8日 htmt41 sub WordPressを子テーマでカスタマイズする方法。 はコメントを受け付けていません

WordPress デフォルトテーマ Twenty Fourteen の子テーマを作る。 WordPress のテーマに変更を加えようと思った時どうしてます？ 直接テーマを触ってしまいます？ テーマがアップデートされた時にまた同じ修正を加えなければならなくて困ったことはありませんか？ どこをどう修正したか覚えてなくて困ったことはありませんか？ テーマを直接修正するのではなく、子テーマを作ってそちらを修正したり追記することで、アップデートしても再修正しなくて済みます。 今回は、WordPressのデフォルト公式テーマ「Twenty Fourteen」のcssを子テーマで変える方法で解説していきます。 もちろん、他のテーマを使ってる人も同じようにすれば、子テーマを作ることができます。

Home画面。

Twenty Fourteen HOME画面 何か気付きませんか？ 英文字が何カ所か大文字になってるんです。 これはデフォルトのテーマ Twenty Fourteen の CSS でそうなってるからなんです。 これを解除するためにはテーマファイルのスタイルシートを少し修正することになります。 但し、Twenty Fourteen を直接修正してしまうと Twenty Fourteen がアップグレードしたときに、また同じ修正をしなければならなくなります。 それは面倒であるし、ミスも起こりやすい。 ということで、WordPress は子テーマでのカスタマイズを推奨しているようです。 子テーマの作り方は、WordPress Codex 日本語版（子テーマ）にも書かれていますし、難しいことはありません。

子テーマの作り方

Twenty Fourteen と同じディレクトリに任意の名前で新しくフォルダを作ります。（例：kid） その中に子テーマ用のスタイルシート style.css を作成します。 子テーマに最低限必要なのは、このフォルダ１つとファイル１つだけです。 /wp-content/themes/kid/style.css

style.css の書き方のルール

  1. Theme Name (必須) 子テーマ名
  2. Theme URI (任意) 子テーマのウェブページ
  3. Description (任意) テーマの説明。例: わたしの最初の子テーマ。
  4. Author URI (任意) 作者のウェブページ
  5. Author (任意) 作者の名前
  6. Template (必須) 親テーマのディレクトリ名, 大文字小文字を区別します
  7. Version (任意) 子テーマのバージョン。例: 0.1, 1.0, etc
これだけの要素が必要になります。 参考までに style.css の書き出しを載せておきますので参考にしてください。 
@charset "UTF-8";
/*
Theme Name:     tf-photo
Theme URI:      http: //hatamoto.biz/photo/
Description:    写真を編むのための Twenty Fourteen 子テーマ
Author:         hatamoto
Author URI:     http: //hatamoto.biz
Template:       twentyfourteen
Version:        1.0
*/
@import url("../twentyfourteen/style.css");
この後にスタイルを追加修正していきます。

英文字の大文字を解除するスタイル

Twenty Fourteen の style.css を検索してみると text-transform: uppercase; がたくさん見つかります。 それを text-transform:none; にしたものを子テーマの style.css に追加します。 Twenty Fourteen の style.css を修正するのではなく、 子テーマの style.css に追加します。 管理画面＞外観＞テーマ を開くと Twenty Fourteen の右横に子テーマができています。 子テーマを有効化すると適用されます。 英文字の大文字が解除されました 英文字の大文字が解除されました。 [amazonjs asin=”4839945683″ locale=”JP” title=”ビジネスサイト制作で学ぶ WordPress「テーマカスタマイズ」徹底攻略”] 今日も元気に楽しく♪]]>