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

ワードプレスをカスタマイズしよう

Expandmenu Shrunk

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()を使った呼び出し方法についても、調べておくといいでしょう

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

functions.php

この、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を少し使うだけで、自分のカラースキーマが管理画面にきちっと登録されたチャイルドテーマの出来上がりです。



コメントは受け付けていません