子テーマ : WordPress
WordPressの子テーマのメモ。
共通して利用する機能を親テーマで定義し子テーマは独自の処理を定義する。
子テーマのファイルの動作
- style.css
- 親テーマを上書きする。親テーマのスタイルを適用したいときは@importでインポートする。
- functions.php
- 親テーマのfunctions.phpに追加して読み込まれる。親テーマのfunctions.phpの直前に読み込まれる。親と子に同名の関数があれば子テーマの関数が使用される[1]。
- テンプレートファイル
- 親テーマを上書きする。
子テーマのstyle.css
/*
Theme Name: Kid
Theme URI: http: //example.com/
Description: Child theme for the Twenty Ten theme for WordPress
Author: Demetris
Author URI: http: //example.com/about/
Template: twentyten
Version: 0.1.0
*/
@import url('../twentyten/style.css');
#site-title a {
color: #009900;
}
子テーマのfunctions.php
style.css と違い、functions.php は同名ファイルでオーバーライドできません。その代わり、親の functions.php に追加して読み込まれます。正確にいうと、親テーマの functions.php の直前に読み込まれます。したがって、もし親テーマの functions.php で favicon_link() という関数があるとき、子テーマのfunctions.php で同名の関数があれば、子テーマの関数が使用されます。
子テーマのfunctions.phpで注意する点が下記の記事で紹介されている。
» WordPress, 子テーマのための親テーマ作成の心構え – functions.php | beginsprite log
template_direcotryとstylesheet_directory
bloginfo(‘template_direcotry’)は親テーマのテーマディレクトリを返す。bloginfo(’stylesheet_directory’)は子テーマのテーマディレクトリを返す。
» wordpress3.0の子テーマを使ったbloginfo(’template_url’)でのパス| 虹色舎のホームページ更新・運用管理ブログ
子テーマ作成の指針
いま試行錯誤しながら子テーマを作成している。その中で自分なりの子テーマ作成の指針を書く。
<p>WordPressで子テーマを作成している。親テーマのjQueryを拡張して子テーマで使う方法。</p>
<!--more-->
[text]
wp-content
|
|-- themes
|-- parent
| |-- style.css
| |-- index.php
| |-- base.js // ユーティリティなどを定義して子テーマを含め全体で利用
| |-- .....
| |-- css
| | |-- yui
| | | |-- fonts.css
| | | |-- reset.css
| |-- js
| | |-- jquery.js
|
|-- child
|-- style.css
|-- index.php
|-- base.js
- 親テーマは現在のテーマとして利用しない。親テーマは全てのテーマで利用する最低限のスタイルだけを定義する。
- CSSのライブラリ(例ではyui)は親テーマ・子テーマで共通して利用する
- JavaScriptライブラリ(例ではjQuery)は親テーマ・子テーマで共通して利用する。
- 親テーマのbase.jsにはユーティリティを定義して親テーマ・子テーマ共通で利用する。
子テーマのhead要素のスタイルシートとJavaScriptの記載。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exsample Child Theme</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/yui/reset.css" type="text/css" media="all" /><!-- 親テーマのCSSライブラリ -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/yui/fonts.css" type="text/css" media="all" /><!-- 親テーマのCSSライブラリ -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" /><!-- 子テーマのstyle.css -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery"></script><!-- 親テーマのJavaScriptライブラリ -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/base.js"></script><!-- 親テーマのJavaScript -->
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/base.js"</script><!-- 子テーマのJavaScript -->
<script type="text/javascript">
jQuery(function ($) {
// ページのJavaScript
});
</script>
</head>
[1] padding, margin, borderは設定しない。backgroundは設定可能。子テーマで独自の指定を必ず行う。
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。