WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用！子テーマではじめるお手軽テーマ作成法」
•
16 likes•14,878 views
WordCamp Kansai 2015 で行ったテーマ作成ハンズオンの「子テーマ」の説明です。
Convert to study guideBETA
Transform any presentation into a summarized study guide, highlighting the most important points and key insights.
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用！子テーマではじめるお手軽テーマ作成法」
- 1. WordPressはじめの一歩 テーマ作成ハンズオン 今あるテーマを有効活用！ 子テーマではじめるお手軽テーマ作成法 2015.7.25 WordCamp Kansai 2015 Speaker 土居安佳里
- 6. 公式ディレクトリ掲載テーマ ● テーマレビュアーとテーマレビューチームの厳しいチェック済み ● 作者がアップデートしてくれる（くれないこともある） ● 100%GPL CSSも画像も自由に使える・配布もできる ＊ よくわからない「野良テーマ」を使うのはやめましょう ＊ 公式ディレクトリ掲載テーマの素晴らしいところ！
- 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. 子テーマの作り方 − 管理画面から有効化 ● 管理画面＞外観＞テーマ 子テーマを有効化 これで親テーマそのまま継承されたテーマができた！
- 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/テンプレート階層