WordCamp Kansai 2015...

WordPressはじめの一歩テーマ作成ハンズオン

今あるテーマを有効活用！子テーマではじめるお手軽テーマ作成法

2015.7.25

WordCamp Kansai 2015

Speaker 土居安佳里

公式ディレクトリ掲載テーマ子テーマとは？

子テーマにする理由

作りはじめる前に

子テーマの作り方子テーマのカスタマイズ

作ってみよう

本日のお話

本日のお話





作ってみよう

公式ディレクトリ掲載テーマ

WordPress公式サイトに「テーマ」というメニューがあります。メニューをクリックするとたくさんのテーマが出てきます。世界中のテーマ作者さんによって作成されたテーマです。


管理画面の「外観＞テーマ＞新規追加」で公式ディレクトリのテーマは追加できます。テーマの名前を入力して検索してください。


● テーマレビュアーとテーマレビューチームの厳しいチェック済み

● 作者がアップデートしてくれる（くれないこともある）

● 100%GPL　CSSも画像も自由に使える・配布もできる

＊よくわからない「野良テーマ」を使うのはやめましょう＊

公式ディレクトリ掲載テーマの素晴らしいところ！

本日のお話





作ってみよう

子テーマとは？子テーマにする理由

では公式ディレクトリのテーマからテーマを選んでカスタマイズ…

テーマを直接カスタマイズするとアップデート時に消えてしまう！！

CSSPHP 変更

カスタマイズ終了ーあっアップデートきてる

消失

カスタマイズしたところが消えてる…

アップデート


そこで子テーマ！

http://wpdocs.osdn.jp/子テーマ

子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。既存のテーマを変更する方法として、子テーマが推奨されています。

－WordPress Codex日本語版子テーマ


子テーマで行ったカスタマイズは親テーマのアップデートに

影響しない！

子テーマを使用すればテーマの変更は確実に保持されます。

－WordPress Codex日本語版子テーマ


子テーマの他のメリット

WordPressテーマ作成初心者に最適！

● 開発時間の短縮

● テーマの開発を良い形で学べる

本日のお話





作ってみよう

子テーマの作り方

必要なもの

● 子テーマディレクトリ

● style.css

● functions.php

子テーマの作り方－子テーマディレクトリ

● 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

注意

あとは手を動かすだけ！

Let’s Try!!

WordCamp Kansai 2015...

Design

Transcript of WordCamp Kansai 2015...