WordPress 子テーマにおける『style.css』の記述方法

Author: ウェブさえ |
2014年7月19日
カテゴリー WordPress
本ページに記載の商品・サービスはプロモーションを含みます。
B!

WordPress 子テーマにおけるstyle.cssの記述法

ググればすぐに出てくるんだけど、頻繁に使うので自分用としてコピペ可メモ。

ウェブさえプロフィール画像

著者情報:この記事を書いた人

ウェブさえ x facebook 株式会社ウェブさえ 著者のプロフィール

web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。

軽く『子テーマとは?』

WordPressの子テーマは、テーマのアップデートによる影響を受けずに、サイトのデザインや機能を自分好みにカスタマイズしていける方法です。

時が経っても全然アップデートされないテーマを使っている場合は、子テーマによるメリットはあまりありませんが、積極的に新機能を追加しバージョンアップされているテーマを使うときは、子テーマを用意した方が安全かつ便利です。

では、記述方法

子テーマは少なくともstyle.cssがあれば成り立ちます。これが、その基本的な記述ルール。

/*
Theme Name: kid ←子テーマの名前(必須)
Theme URI:  https://websae.net ←テーマのサイト(任意)
Description: websaeの子テーマ ←テーマの説明(任意)
Author: websae ←テーマ制作者の名前(任意)
Author URI: http: //websae.net/info/ ←テーマ制作者のサイトorページ(任意)
Template: Oya ←親テーマのディレクトリ名(必須)大文字小文字を区別するので注意!
Version: 1.2.3 ←バージョンを表す数字(任意) 
*/

最小限の書き方

任意を記述せずに、これだけでも動きます。上書きしたいCSSファイルを指定し、その下からスタイルを書いていきます。

/*
Theme Name: kid
Template: Oya
*/

@import url('../Oya/style.css'); /*上書きしたいCSSの場所*/

/*ここから上書きしたいスタイルを記述*/

body {
	font-size: 999px;
}

以上!

子テーマを利用すれば、積み重ねたカスタマイズをアップデートの度に白紙に戻される悲劇を防げます。より詳しくは、公式ページを見るといいかも!

読み終わったらシェア!

B!

ウェブさえの無料サービス

どちらでもお好きな方を。もちろん両方でも。

ダウンロード
Top
ウェブさえ
@websae2012
ウェブさえマガジン
>詳しくはこちら