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

of

WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 1 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 2 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 3 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 4 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 5 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 6 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 7 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 8 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 9 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 10 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 11 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 12 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 13 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 14 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 15 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 16 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 17 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 18 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 19 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 20 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 21 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 22 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 23 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 24 WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」 Slide 25
Upcoming SlideShare
WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015
Next
Download to read offline and view in fullscreen.

16 Likes

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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!!
  • dj_kazu

    Jan. 3, 2016
  • etsukomuto5

    Oct. 18, 2015
  • koguma98

    Sep. 9, 2015
  • makotoohmori

    Aug. 17, 2015
  • koolweb37

    Aug. 15, 2015
  • mitsuhiroyamashita90

    Aug. 9, 2015
  • ToshikiSato

    Aug. 7, 2015
  • HarukaHasegawa1

    Aug. 2, 2015
  • HiroshiShiobara

    Jul. 28, 2015
  • YoshinoriKoba

    Jul. 28, 2015
  • kyosukeharaki

    Jul. 27, 2015
  • gissy0721

    Jul. 27, 2015
  • kaitokoga9

    Jul. 27, 2015
  • umaimori

    Jul. 27, 2015
  • ayakasumida

    Jul. 27, 2015
  • taichi1407

    Jul. 27, 2015

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

Views

Total views

14,114

On Slideshare

0

From embeds

0

Number of embeds

9,978

Actions

Downloads

10

Shares

0

Comments

0

Likes

16

×