Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」

11,641 views

Published on

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

Published in: Design

WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」

  1. 1. WordPressはじめの一歩 テーマ作成ハンズオン 今あるテーマを有効活用! 子テーマではじめるお手軽テーマ作成法 2015.7.25 WordCamp Kansai 2015 Speaker 土居安佳里
  2. 2. 公式ディレクトリ掲載テーマ 子テーマとは? 子テーマにする理由 作りはじめる前に 子テーマの作り方 子テーマのカスタマイズ 作ってみよう 本日のお話
  3. 3. 本日のお話 公式ディレクトリ掲載テーマ 子テーマとは? 子テーマにする理由 作りはじめる前に 子テーマの作り方 子テーマのカスタマイズ 作ってみよう
  4. 4. 公式ディレクトリ掲載テーマ WordPress公式サイトに「テーマ」というメニューがあります。 メニューをクリックするとたくさんのテーマが出てきます。 世界中のテーマ作者さんによって作成されたテーマです。
  5. 5. 公式ディレクトリ掲載テーマ 管理画面の「外観>テーマ>新規追加」で公式ディレクトリのテーマは追加できます。 テーマの名前を入力して検索してください。
  6. 6. 公式ディレクトリ掲載テーマ ● テーマレビュアーとテーマレビューチームの厳しいチェック済み ● 作者がアップデートしてくれる(くれないこともある) ● 100%GPL CSSも画像も自由に使える・配布もできる * よくわからない「野良テーマ」を使うのはやめましょう * 公式ディレクトリ掲載テーマの素晴らしいところ!
  7. 7. 本日のお話 公式ディレクトリ掲載テーマ 子テーマとは? 子テーマにする理由 作りはじめる前に 子テーマの作り方 子テーマのカスタマイズ 作ってみよう
  8. 8. 子テーマとは?子テーマにする理由 では公式ディレクトリのテーマからテーマを選んでカスタマイズ… テーマを直接カスタマイズすると アップデート時に消えてしまう!! CSS PHP 変更 カスタマイズ終了ー あっアップデートきてる 消失 カスタマイズしたところが 消えてる… アップデート
  9. 9. 子テーマとは?子テーマにする理由 そこで子テーマ! http://wpdocs.osdn.jp/子テーマ 子テーマは、親テーマと呼ばれる 別のテーマの機能とスタイルを継承したテーマです。 既存のテーマを変更する方法として、 子テーマが推奨されています。 −WordPress Codex日本語版 子テーマ
  10. 10. 子テーマとは?子テーマにする理由 子テーマで行ったカスタマイズは 親テーマのアップデートに 影響しない! 子テーマを使用すればテーマの変更は確実に保持されます。 −WordPress Codex日本語版 子テーマ
  11. 11. 子テーマとは?子テーマにする理由 子テーマの他のメリット WordPressテーマ作成 初心者に最適! ● 開発時間の短縮 ● テーマの開発を良い形で学べる
  12. 12. 本日のお話 公式ディレクトリ掲載テーマ 子テーマとは? 子テーマにする理由 作りはじめる前に 子テーマの作り方 子テーマのカスタマイズ 作ってみよう
  13. 13. 子テーマの作り方 必要なもの ● 子テーマディレクトリ ● style.css ● functions.php
  14. 14. 子テーマの作り方 − 子テーマディレクトリ ● wp-content/themes ディレクトリ下に設置(親テーマと同じ階層) 一般的にはテーマ名と同じ名前を付けます (半角英数字にする、空白は-に置き換える) 既存の公式ディレクトリテーマと同じ名前にならないようにしましょう! (そのテーマにアップデートがあると、通知が来てしまう) twentyfifteen-child
  15. 15. 子テーマの作り方 − style.css ● 先ほど用意した子テーマディレクトリ下に設置 テーマ名・親テーマのディレクトリ名だけが必須事項 その他は任意で書けばOK(Codexに記載例があります) style.css /* Theme Name: Twenty Fifteen Child Template: twentyfifteen */ 右記コード記入
  16. 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. 17. 子テーマの作り方 − 管理画面から有効化 ● 管理画面>外観>テーマ 子テーマを有効化 これで親テーマそのまま継承されたテーマができた!
  18. 18. 本日のお話 公式ディレクトリ掲載テーマ 子テーマとは? 子テーマにする理由 作りはじめる前に 子テーマの作り方 子テーマのカスタマイズ 作ってみよう
  19. 19. 子テーマのカスタマイズ − テーマカスタマイザー WordPress3.4からテーマカスタマイザーがデフォルトで追加され、 ほぼ全てのWordPressテーマで利用可能です。 管理画面からヘッダー画像を変えたり、背景の色を変えたりできます。 外観>カスタマイズ ここで変更した内容も親テーマのアップデートには影響しない!
  20. 20. 子テーマのカスタマイズ − テーマオプション ここで変更した内容も親テーマのアップデートには影響しない! 「テーマオプション」が設定されたテーマもあります。 テーマオプションはそのテーマ独自のオプションを保存するために 設定されたものです。 外観>Theme Options
  21. 21. 子テーマのカスタマイズ − CSSでカスタマイズ ● 先ほど作ったstyle.cssにCSSを追記してカスタマイズ Chromeのデベロッパーツールなどを使って 変更したい箇所のclassやidを調べて 自分好みにカスタマイズ! style.css
  22. 22. 子テーマのカスタマイズ − テンプレートでカスタマイズ ● CSSやテーマカスタマイザーだけでカスタマイズできないところもでてくる 例えばヘッダーにある何かを消したいなど 出力されるHTMLを変更したいときです header. php コピー 親テーマのファイルをコピーして変更 子テーマディレクトリに設置 親テーマのファイルを上書きして表示! header.php footer.php index.php ・・・ header.php index.php ・・・ 親 子 優先 優先 ※緑がアクティブ状態
  23. 23. 子テーマのカスタマイズ − テンプレートでカスタマイズ ● 親テーマに存在しないファイルでも、子テーマに含められる 例えば特定のページ用のテンプレートや カテゴリーアーカイブ用のテンプレートなど WordPressがページを表示するとき どのテンプレートファイルが使われるかは テンプレート階層をチェック! page-○○. php category-○○. php −WordPress Codex日本語版 テンプレート階層 http://wpdocs.osdn.jp/テンプレート階層
  24. 24. 子テーマのカスタマイズ − テンプレートでカスタマイズ functions.phpのみ親テーマを上書きしない! 親テーマのfunctions.phpも読み込まれる (親テーマのファイルの直前に子テーマのファイルが読み込まれる) 難しいのでまずはCSSとテンプレートでカスタマイズしよう! functions. php 注意
  25. 25. あとは手を動かすだけ! Let s Try!!

×