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

子テーマの作り方
Twenty Fourteen と同じディレクトリに任意の名前で新しくフォルダを作ります。(例:kid) その中に子テーマ用のスタイルシート style.css を作成します。 子テーマに最低限必要なのは、このフォルダ1つとファイル1つだけです。 /wp-content/themes/kid/style.cssstyle.css の書き方のルール
- Theme Name (必須) 子テーマ名
- Theme URI (任意) 子テーマのウェブページ
- Description (任意) テーマの説明。例: わたしの最初の子テーマ。
- Author URI (任意) 作者のウェブページ
- Author (任意) 作者の名前
- Template (必須) 親テーマのディレクトリ名, 大文字小文字を区別します
- Version (任意) 子テーマのバージョン。例: 0.1, 1.0, etc
@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 の右横に子テーマができています。 子テーマを有効化すると適用されます。