テーマ改造メモ(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を読みに行く。