テーマ改造メモ(1)子テーマ準備


■親テーマと同じ階層に、任意の名前のフォルダを作成。

 ※berlinの子テーマなのでberlin-kidとした(childだと長い)。

■子テーマフォルダ内のstyle.cssを編集

子テーマフォルダにはstyle.cssが必須。その中に親テーマの場所を記述する。

@charset "utf-8";
/*
Theme Name:     berlin-kid
Theme URI:      
Description:    berlin を親テーマとする子テーマ /*説明。テーマ選択画面に表示される
Author:         cyberLab
Author URI:     http://alphasis.info/
Template:       berlin /*親テーマのディレクトリ(必須)
Version:        0.1.0
*/

■親から子にheader.phpをコピー

header.phpで参照するcss指定をしており、ここを変更しないと親のstyle.cssを読みに行ってしまう…はず。

<?php bloginfo('name'); ?>
	</title> 
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
	<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/screen.css" type="text/css" media="screen, projection" />
	<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/print.css" type="text/css" media="print" />
	<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" media="screen, projection" />
<!--[if IE]><link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/lib/ie.css" type="text/css" media="screen, projection" /><![endif]--> 

ここのtemplate_directoryをstylesheet_directoryに変更すると、子テーマのstyle.cssを読みに行くようになる。
今回はstyle.cssの分だけ書き換えた。

■子テーマフォルダ内に追加用スタイルシート(tsuika.css)を新規作成

子のstyle.cssからインポートするようにした。
※わざわざファイルを作らずに、子のstyle.cssの下に記述しても良いのでしょうけれど、何となく。
style.cssに以下の内容を追記

@import url('../berlin/style.css');
@import url('./tsuika.css');

上段で親のstyle.cssを読みに行き、下段で子のtsuika.cssを読みに行く。

Comments are closed.