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

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

Expandmenu Shrunk

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

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

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

301 Moved Permanentlyから、チャイルドテーマを使ったカスタマイズについてのチュートリアルを紹介します。

ゴール

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

必要な知識スキル

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

事前準備

UTF-8BOMなしで、保存が出来るテキストエディタの用意

301 Moved Permanently

Step1

  1. ホルダーの作成
    • twentyeleven-orange という名前のホルダーを作ります。
  1. ホルダーにファイルを追加します
    • 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を少し使うだけで、自分のカラースキーマが管理画面にきちっと登録されたチャイルドテーマの出来上がりです。



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