WordPressのテーマ制作みんなどうしてる？

ノンプログラマーのためのカンタンWordPressテーマ作成入門

～ 子テーマでWordPressのテーマをつくろう ～

Mignon Style

Mignon Style

Webデザイナー

WordPress公式ディレクトリ テーマ「Chocolat」

プラグイン「MS Custom Login」デベロッパー

WordPressスターターテーマ「_s」コントリビューター

http://mignonstyle.com/

@mignon_style

mignonxstyle

https://profiles.wordpress.org/mignonstyle

Adobe BracketsのWordPress用コードヒントも作ってます！

2013年7月 WordPressの勉強をはじめる

2014年5月 WordPress公式ディレクトリにテーマ「Chocolat」を登録

2014年6月 WordCamp Kansai 2014に遊びに行く

2014年8月 WordFes Nagoya 2014 登壇/実行委員

2014年10月 WordCamp Tokyo 2014 登壇

2014年10月 WordPress公式ディレクトリにプラグイン「MS Custom Login」を登録

2015年4月 BracketsにWordPress用コードヒントのアドオンを登録

2015年7月 WordCamp Kansai 2015 実行委員

2015年8月 WordFes Nagoya 2015 実行委員

2015年9月 _s のコントリビューターになる

2015年10月 WordCamp Tokyo 2015 登壇

2016年1月 WordBash Kyoto 登壇/運営

WordBashハングアウト放送中！！

テーマ「 Chocolat 」 https://ja.wordpress.org/themes/chocolat/

プラグイン「 MS Custom Login 」 https://ja.wordpress.org/plugins/ms-custom-login/

_s http://underscores.me/

_s http://underscores.me/

01

テーマ制作の

ワークフロー

WordPressのテーマ

どんなワークフローで

作ってますか？

クライアントさんの

デザインにあわせて

1からテーマを作ってます

オリジナルのテーマをベースに

カスタマイズして作ってます

公式ディレクトリのテーマを

直接カスタマイズして

作ってます

ええっ!!

既存のテーマを

直接カスタマイズしたら

ダメなんだよ！！

そうだよ

大変なことに

なるよ！！

どうしていけないの？

どうすればいいの・・・？

そんなときは

子テーマ！！

02

子テーマの活用

子テーマとは

既存のテーマの持っている機能やデザインを

そのまま受け継いだ新しいテーマの事です

どうして

子テーマがいいの？

1

親テーマを

カスタマイズした場合

親テーマに行ったカスタマイズは

親テーマを更新すると上書きされます

2

子テーマを

カスタマイズした場合

子テーマに行ったカスタマイズは

親テーマを更新してもそのまま残ります

子テーマを使えば

カスタマイズが消えないのね！

それにテーマの修正は

テーマ作者さんが

やってくれるのでラクラク！

「テーマを

更新」を

ポチッ

03

WordPress Codex 日本語版 https://wpdocs.osdn.jp/子テーマ

子テーマの作り方

1 フォルダの作成

子テーマ用のファイルをいれる

フォルダ（ディレクトリ）を作成します

（親テーマディレクトリ名）-childの

ような名前が推奨

一般的には子テーマ名の

小文字の半角英数字

空白は「-」に

置き換えます

2 style.cssの作成

style.cssの冒頭に テーマの詳細 を記述します

/*

Theme Name: Twenty Sixteen Child

Template: twentysixteen

*/

Theme Name: 子テーマのテーマ名

Template: 親テーマのディレクトリ名

3 スタイルシートの読込

親テーマのスタイルシートを読み込みます

/*

Theme Name: Twenty Sixteen Child

Template: twentysixteen

*/

@import url('../twentysixteen/style.css');

@importで親テーマの

スタイルシートを読み込み

この書き方は

今は

非推奨です

3 スタイルシートの読込

今はコレ！！

functions.phpに親テーマの

スタイルシートを読み込むコードを記述

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' );

}

コピペでOK！

親テーマのスタイルシートを読み込んだ後

子テーマのスタイルシートを自動的に読み込みます

functios.phpの始めに

PHPの「開始タグ」を記述

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' );

}

親テーマのstyle.cssを追加

PHPの「終了タグ」は書かなくてもOK

子テーマのスタイルシートが読み込まれない場合

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' );

wp_enqueue_style( 'child-style',

get_stylesheet_directory_uri() . '/style.css',

array( 'parent-style' ) );

}

子テーマのスタイルシートが読み込まれない場合

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' );

wp_enqueue_style( 'child-style',

get_stylesheet_directory_uri() . '/style.css',

array( 'parent-style' ) );

}

親テーマのstyle.cssを追加

子テーマのstyle.cssを追加

子テーマがあるときは

親テーマのスタイルシートを

自動的に読み込むテーマも

あります

親テーマのスタイルが

反映されてるか

まずは確認してみよう

4 フォルダのアップロード

子テーマ用のフォルダに

style.cssとfunctions.phpを入れます

1 管理画面からアップロードする場合

子テーマのフォルダをZIP形式に圧縮

管理画面の 外観 > テーマ > 新規追加

「テーマのアップロード」でzipファイルを選択

今すぐインストール

親テーマがインストールされていないときは

自動的にインストールされる

2 FTPでアップロードする場合

子テーマのフォルダをWordPressをインストールしてる

サーバーのwp-content/themesにアップロード

wp-content /themes ディレクトリに入れます

親テーマがインストールされていないと子テーマが

エラーになるので親テーマを自分でインストール

5 子テーマを有効化

管理画面の 外観 > テーマ > でテーマを選んで有効化

子テーマが表示された！

04

子テーマ制作の

ポイント

親テーマを更新したら

テーマがぐちゃぐちゃに

なっちゃった！！

バックアップは

とってないの？

そうだよ

バックアップくらい

常識だろ！！

・・・・・・

大丈夫！！

公式ディレクトリのテーマは

開発ログがあります

WordPress.orgの

テーマディレクトリで

テーマを検索

テーマの

詳細ページ

を表示

Tracで

参照

1つ前の

バージョンを

選択

Zip Archive

を選択

zipファイルを解凍

フォルダ名をテーマのディレクトリ名に書き換えて

テーマフォルダへ

wp-content /themes ディレクトリに入れます

更新したテーマは削除して

１つ前のバージョンに置き換える

GitHubで管理してる

作者さんも多いので

GitHubにデータがないか

調べてみましょう

Twenty Sixteenは

GitHubからも

ダウンロードできます

更新するときは

まずテスト環境で

試してみましょう

readme.txtや

changelog.txtに

変更した内容を

書いてる作者さんも

います

子テーマだから

安心ってわけでは

ないのね

05

親テーマの選び方

WordPressのテーマ

どうやって選んでますか？

見た目の美しさだけでなく

子テーマに対応しているかも

確認しましょう

functions.php

子テーマで同名の関数を書き換えることができる

if ( ! function_exists( 'my_theme_posted_on' ) ) {

function my_theme_posted_on () {

}

}

! function_exists があるかチェック!!

特定のタイミングで関数を呼び出したり

書き換えたりできる

functions.php

function my_theme_posted_on () {

do_action( 'my_theme_posted_on_pre' );

return apply_filters( 'my_theme_posted_on_result', $result );

}

フィルタやフックがあるかチェック!!

子テーマって

なんだか大変そう…

それなら自分が使いやすい

テーマを作って

公式ディレクトリに

登録しよう！

もっとくわしく知りたい人はこちらもどうぞ

ノンプログラマーのためのカンタンWordPressテーマ作成入門

～子テーマでテーマ作成＆カスタマイズ～

http://www.slideshare.net/mignonstyle/wordpress-childtheme

http://www.slideshare.net/mignonstyle/use-wordpressdirectory

更新作業で消耗しない！

Web製作者のためのWordPress公式ディレクトリ活用術