子テーマ : WordPress

Pocket

WordPressの子テーマのメモ。

» 子テーマ – WordPress Codex 日本語版

共通して利用する機能を親テーマで定義し子テーマは独自の処理を定義する。

子テーマのファイルの動作

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;
}

» 子テーマ – WordPress Codex 日本語版

子テーマのfunctions.php

style.css と違い、functions.php は同名ファイルでオーバーライドできません。その代わり、親の functions.php に追加して読み込まれます。正確にいうと、親テーマの functions.php の直前に読み込まれます。したがって、もし親テーマの functions.php で favicon_link() という関数があるとき、子テーマのfunctions.php で同名の関数があれば、子テーマの関数が使用されます。

» 子テーマ – WordPress Codex 日本語版

子テーマの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.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 


人気記事 はてなブックマーク

この日記のはてなブックマーク数