WordCamp Kansai 2015 で行ったテーマ作成ハンズオンの「子テーマ」の説明です。

1. WordPressはじめの一歩 テーマ作成ハンズオン
今あるテーマを有効活用！
子テーマではじめるお手軽テーマ作成法
2015.7.25
WordCamp Kansai 2015
Speaker 土居安佳里

2. 公式ディレクトリ掲載テーマ
子テーマとは？
子テーマにする理由
作りはじめる前に
子テーマの作り方 子テーマのカスタマイズ
作ってみよう
本日のお話

3. 本日のお話
公式ディレクトリ掲載テーマ
子テーマとは？
子テーマにする理由
作りはじめる前に
子テーマの作り方 子テーマのカスタマイズ
作ってみよう

4. 公式ディレクトリ掲載テーマ
WordPress公式サイトに「テーマ」というメニューがあります。
メニューをクリックするとたくさんのテーマが出てきます。
世界中のテーマ作者さんによって作成されたテーマです。

5. 公式ディレクトリ掲載テーマ
管理画面の「外観＞テーマ＞新規追加」で公式ディレクトリのテーマは追加できます。
テーマの名前を入力して検索してください。

6. 公式ディレクトリ掲載テーマ
● テーマレビュアーとテーマレビューチームの厳しいチェック済み
● 作者がアップデートしてくれる（くれないこともある）
● 100%GPL CSSも画像も自由に使える・配布もできる
＊ よくわからない「野良テーマ」を使うのはやめましょう ＊
公式ディレクトリ掲載テーマの素晴らしいところ！

7. 本日のお話
公式ディレクトリ掲載テーマ
子テーマとは？
子テーマにする理由
作りはじめる前に
子テーマの作り方 子テーマのカスタマイズ
作ってみよう

8. 子テーマとは？子テーマにする理由
では公式ディレクトリのテーマからテーマを選んでカスタマイズ…
テーマを直接カスタマイズすると
アップデート時に消えてしまう！！
CSS
PHP
変更
カスタマイズ終了ー
あっアップデートきてる
消失
カスタマイズしたところが
消えてる…
アップデート

9. 子テーマとは？子テーマにする理由
そこで子テーマ！
http://wpdocs.osdn.jp/子テーマ
子テーマは、親テーマと呼ばれる
別のテーマの機能とスタイルを継承したテーマです。
既存のテーマを変更する方法として、
子テーマが推奨されています。
−WordPress Codex日本語版 子テーマ

10. 子テーマとは？子テーマにする理由
子テーマで行ったカスタマイズは
親テーマのアップデートに
影響しない！
子テーマを使用すればテーマの変更は確実に保持されます。
−WordPress Codex日本語版 子テーマ

11. 子テーマとは？子テーマにする理由
子テーマの他のメリット
WordPressテーマ作成
初心者に最適！
● 開発時間の短縮
● テーマの開発を良い形で学べる

12. 本日のお話
公式ディレクトリ掲載テーマ
子テーマとは？
子テーマにする理由
作りはじめる前に
子テーマの作り方 子テーマのカスタマイズ
作ってみよう

13. 子テーマの作り方
必要なもの
● 子テーマディレクトリ
● style.css
● functions.php

14. 子テーマの作り方 − 子テーマディレクトリ
● wp-content/themes ディレクトリ下に設置（親テーマと同じ階層）
一般的にはテーマ名と同じ名前を付けます
（半角英数字にする、空白は-に置き換える）
既存の公式ディレクトリテーマと同じ名前にならないようにしましょう！
（そのテーマにアップデートがあると、通知が来てしまう）
twentyfifteen-child

15. 子テーマの作り方 − style.css
● 先ほど用意した子テーマディレクトリ下に設置
テーマ名・親テーマのディレクトリ名だけが必須事項
その他は任意で書けばOK（Codexに記載例があります）
style.css
/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
*/
右記コード記入

16. 子テーマの作り方 − functions.php
● 先ほど用意した子テーマディレクトリ下に設置
親テーマのスタイルシートを読み込む
難しいのでCodexよりコピー！
functions.
php
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
下記コード記入
← 開始タグは自分で記入！

17. 子テーマの作り方 − 管理画面から有効化
● 管理画面＞外観＞テーマ 子テーマを有効化
これで親テーマそのまま継承されたテーマができた！

18. 本日のお話
公式ディレクトリ掲載テーマ
子テーマとは？
子テーマにする理由
作りはじめる前に
子テーマの作り方 子テーマのカスタマイズ
作ってみよう

19. 子テーマのカスタマイズ − テーマカスタマイザー
WordPress3.4からテーマカスタマイザーがデフォルトで追加され、
ほぼ全てのWordPressテーマで利用可能です。
管理画面からヘッダー画像を変えたり、背景の色を変えたりできます。
外観＞カスタマイズ
ここで変更した内容も親テーマのアップデートには影響しない！

20. 子テーマのカスタマイズ − テーマオプション
ここで変更した内容も親テーマのアップデートには影響しない！
「テーマオプション」が設定されたテーマもあります。
テーマオプションはそのテーマ独自のオプションを保存するために
設定されたものです。
外観＞Theme Options

21. 子テーマのカスタマイズ − CSSでカスタマイズ
● 先ほど作ったstyle.cssにCSSを追記してカスタマイズ
Chromeのデベロッパーツールなどを使って
変更したい箇所のclassやidを調べて
自分好みにカスタマイズ！
style.css

22. 子テーマのカスタマイズ − テンプレートでカスタマイズ
● CSSやテーマカスタマイザーだけでカスタマイズできないところもでてくる
例えばヘッダーにある何かを消したいなど
出力されるHTMLを変更したいときです
header.
php
コピー
親テーマのファイルをコピーして変更
子テーマディレクトリに設置
親テーマのファイルを上書きして表示！
header.php footer.php index.php ・・・
header.php index.php ・・・
親
子
優先 優先
※緑がアクティブ状態

23. 子テーマのカスタマイズ − テンプレートでカスタマイズ
● 親テーマに存在しないファイルでも、子テーマに含められる
例えば特定のページ用のテンプレートや
カテゴリーアーカイブ用のテンプレートなど
WordPressがページを表示するとき
どのテンプレートファイルが使われるかは
テンプレート階層をチェック！
page-○○.
php
category-○○.
php
−WordPress Codex日本語版 テンプレート階層
http://wpdocs.osdn.jp/テンプレート階層

24. 子テーマのカスタマイズ − テンプレートでカスタマイズ
functions.phpのみ親テーマを上書きしない！
親テーマのfunctions.phpも読み込まれる
（親テーマのファイルの直前に子テーマのファイルが読み込まれる）
難しいのでまずはCSSとテンプレートでカスタマイズしよう！
functions.
php
注意

25. あとは手を動かすだけ！
Let s Try!!