Download as PDF, PPTX
Uploaded byAkari Doi
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用！子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 で行ったテーマ作成ハンズオンの「子テーマ」の説明です。
More Related Content
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用！子テーマではじめるお手軽テーマ作成法」
- 1.
- 2.
- 3.
- 4.
- 5.
- 6. 公式ディレクトリ掲載テーマ ● テーマレビュアーとテーマレビューチームの厳しいチェック済み ● 作者がアップデートしてくれる（くれないこともある） ●100%GPL CSSも画像も自由に使える・配布もできる ＊ よくわからない「野良テーマ」を使うのはやめましょう ＊ 公式ディレクトリ掲載テーマの素晴らしいところ！
- 7.
- 8.
- 9.
- 10.
- 11.
- 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.
- 20.
- 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.
- 25.