Twentyeleven チャイルドテーマの作り方

上の写真は、チャイルドテーマホルダにorange.pngを追加しています。

Twentyelevenは、WordPresの付属テーマです
このテーマから、自分流を極めようとする人へ

http://theme.fm/2011/07/how-to-create-a-child-theme-based-on-twenty-eleven-791/(b:title)から、チャイルドテーマを使ったカスタマイズについてのチュートリアルを紹介します。

ゴール

Twentyeleven　の管理画面にあるカラースキーマに自分自身の配色設定を追加したチャイルドテーマの作成です

必要な知識スキル

このページの内容を理解するためには、PHPの関数が理解できる事、HTML CSSの基本的な知識を有する事が必要です。
体験的に学びたい人は、コピーペーストでなにがおきるのかを体験してみてください。

事前準備

UTF-8BOMなしで、保存が出来るテキストエディタの用意
http://ja.forums.wordpress.org/topic/155(b:title)

Step1

ホルダーの作成

- twentyeleven-orange　という名前のホルダーを作ります。

ホルダーにファイルを追加します

- functions.php
- orange.css
- style.css
- 3つの中身を何も書いていないファイルを用意します。

Step2

最も重要なファイルstyle.cssを編集します。

以下のコードを参考に書いてみましょう

上記のコードに、@import　ルールが使用されています。このルールを使っても正常に動作しますが、その後2015年の今は、@import ルールよりも
WordPressの wp_enqueue_style()を使いCSSをlink 要素として読み込む事が推奨されるようになりました。

これは、スタイルシートの読み込み時のパフォーマンスの差がその根拠になっています

どちらを使っても、動作は適切に行われますが、新しいwp_enqueue_style()を使った呼び出し方法についても、調べておくといいでしょう

body {
	background: orange;
}

#access .menu li a {
	color: orange;
}

#access .menu ul.children &gt; li:hover &gt; a,
#access .menu ul.sub-menu &gt; li:hover &gt; a,
#access .menu &gt; ul &gt; li:hover &gt; a,
#access .menu &gt; li:hover &gt; a {
	color: white;
	background: orange;
}

#access .menu ul.children li a,
#access .menu ul.sub-menu li a
{
	background: #333;
	border-bottom: dotted 1px #555;
	color: orange;
}

Step4

PHPの魔法をかけていきます。

functions.php

<?php
add_filter( 'twentyeleven_color_schemes', 'twentyeleven_color_schemes_orange' );
add_action( 'twentyeleven_enqueue_color_scheme', 'twentyeleven_enqueue_color_scheme_orange' );

function twentyeleven_color_schemes_orange( $color_schemes ) {
	$color_schemes['orange']= array(
		'value'=> 'orange',
		'label'=> __( 'Orange', 'twentyeleven' ),
		'thumbnail'=> get_stylesheet_directory_uri() . '/orange.png',
		'default_link_color'=> '#FFA500',
	);
	return $color_schemes;
}

function twentyeleven_enqueue_color_scheme_orange( $color_scheme ) {
	if ( 'orange'== $color_scheme )
		wp_enqueue_style( 'orange', get_stylesheet_directory_uri() . '/orange.css', array(), null );
	}
?>
add_filter( 'twentyeleven_color_schemes', 'twentyeleven_color_schemes_orange' );

この、add_filterという関数を使って、Twentyelevenの管理画面にメニューを追加します。

twentyeleven_color_schemes_orangeという関数は、具体的な管理メニューに追加する内容を決めています。デフォルトのリンク色、スキーマ画像のURL（チャイルドテーマのorange.pngがあれば管理画面に表示されます)

__( ‘Orange’, ‘twentyeleven’ )というのもPHPの関数で、Orangeというラベル表示するものです。

twentyeleven_enqueue_color_scheme_orangeという関数は、orange.cssがテーマヘッダーに組み込まれるようにorange.cssを登録しています

このように、HTMLとCSS、PHPを少し使うだけで、自分のカラースキーマが管理画面にきちっと登録されたチャイルドテーマの出来上がりです。