View
1.544
Download
3
Category
Preview:
Citation preview
WordPressはじめの一歩 テーマ作成ハンズオン
今あるテーマを有効活用！子テーマではじめるお手軽テーマ作成法
2015.7.25
WordCamp Kansai 2015
Speaker 土居安佳里
公式ディレクトリ掲載テーマ
WordPress公式サイトに「テーマ」というメニューがあります。メニューをクリックするとたくさんのテーマが出てきます。世界中のテーマ作者さんによって作成されたテーマです。
公式ディレクトリ掲載テーマ
● テーマレビュアーとテーマレビューチームの厳しいチェック済み
● 作者がアップデートしてくれる（くれないこともある）
● 100%GPL CSSも画像も自由に使える・配布もできる
＊ よくわからない「野良テーマ」を使うのはやめましょう ＊
公式ディレクトリ掲載テーマの素晴らしいところ！
子テーマとは？子テーマにする理由
では公式ディレクトリのテーマからテーマを選んでカスタマイズ…
テーマを直接カスタマイズするとアップデート時に消えてしまう！！
CSSPHP 変更
カスタマイズ終了ーあっ アップデートきてる
消失
カスタマイズしたところが消えてる…
アップデート
子テーマとは？子テーマにする理由
そこで子テーマ！
http://wpdocs.osdn.jp/子テーマ
子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。既存のテーマを変更する方法として、子テーマが推奨されています。
－WordPress Codex日本語版 子テーマ
子テーマとは？子テーマにする理由
子テーマで行ったカスタマイズは親テーマのアップデートに
影響しない！
子テーマを使用すればテーマの変更は確実に保持されます。
－WordPress Codex日本語版 子テーマ
子テーマの作り方 － 子テーマディレクトリ
● wp-content/themes ディレクトリ下に設置（親テーマと同じ階層）
一般的にはテーマ名と同じ名前を付けます（半角英数字にする、空白は-に置き換える）
既存の公式ディレクトリテーマと同じ名前にならないようにしましょう！（そのテーマにアップデートがあると、通知が来てしまう）
twentyfifteen-child
子テーマの作り方 － style.css
● 先ほど用意した子テーマディレクトリ下に設置
テーマ名・親テーマのディレクトリ名だけが必須事項その他は任意で書けばOK（Codexに記載例があります）
style.css
/* Theme Name: Twenty Fifteen Child Template: twentyfifteen*/
右記コード記入
子テーマの作り方 － functions.php
● 先ほど用意した子テーマディレクトリ下に設置
親テーマのスタイルシートを読み込む難しいのでCodexよりコピー！
functions.php
<?phpadd_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
下記コード記入← 開始タグは自分で記入！
子テーマのカスタマイズ － テーマカスタマイザー
WordPress3.4からテーマカスタマイザーがデフォルトで追加され、ほぼ全てのWordPressテーマで利用可能です。管理画面からヘッダー画像を変えたり、背景の色を変えたりできます。外観＞カスタマイズ
ここで変更した内容も親テーマのアップデートには影響しない！
子テーマのカスタマイズ － テーマオプション
ここで変更した内容も親テーマのアップデートには影響しない！
「テーマオプション」が設定されたテーマもあります。テーマオプションはそのテーマ独自のオプションを保存するために設定されたものです。外観＞Theme Options
子テーマのカスタマイズ － CSSでカスタマイズ
● 先ほど作ったstyle.cssにCSSを追記してカスタマイズ
Chromeのデベロッパーツールなどを使って変更したい箇所のclassやidを調べて自分好みにカスタマイズ！
style.css
子テーマのカスタマイズ － テンプレートでカスタマイズ
● CSSやテーマカスタマイザーだけでカスタマイズできないところもでてくる
例えばヘッダーにある何かを消したいなど出力されるHTMLを変更したいときです
header.php
コピー 親テーマのファイルをコピーして変更
子テーマディレクトリに設置
親テーマのファイルを上書きして表示！
header.php footer.php index.php ・・・
header.php index.php ・・・
親
子優先 優先
※緑がアクティブ状態
子テーマのカスタマイズ － テンプレートでカスタマイズ
● 親テーマに存在しないファイルでも、子テーマに含められる
例えば特定のページ用のテンプレートやカテゴリーアーカイブ用のテンプレートなど
WordPressがページを表示するときどのテンプレートファイルが使われるかはテンプレート階層をチェック！
page-○○.php
category-○○.php
－WordPress Codex日本語版 テンプレート階層
http://wpdocs.osdn.jp/テンプレート階層
子テーマのカスタマイズ － テンプレートでカスタマイズ
functions.phpのみ親テーマを上書きしない！
親テーマのfunctions.phpも読み込まれる（親テーマのファイルの直前に子テーマのファイルが読み込まれる）
難しいのでまずはCSSとテンプレートでカスタマイズしよう！
functions.php
注意
Recommended