狠狠撸

狠狠撸Share a Scribd company logo
WordPressのテーマ制作みんなどうしてる?
ノンプログラマーのためのカンタンWordPressテーマ作成入門
~ 子テーマでWordPressのテーマをつくろう ~
Mignon Style
Mignon Style
Webデザイナー
WordPress公式ディレクトリ テーマ「Chocolat」
プラグイン「MS Custom Login」デベロッパー
WordPressスターターテーマ「_s」コントリビューター
http://mignonstyle.com/
@mignon_style
mignonxstyle
https://pro?les.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(/slideshow/howto-wordpresschildtheme/58593143/&);
@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 ディレクトリに入れます
更新したテーマは削除して
1つ前のバージョンに置き換える
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_?lters( 'my_theme_posted_on_result', $result );
}
フィルタやフックがあるかチェック!!
子テーマって
なんだか大変そう…
それなら自分が使いやすい
テーマを作って
公式ディレクトリに
登録しよう!
もっとくわしく知りたい人はこちらもどうぞ
ノンプログラマーのためのカンタンWordPressテーマ作成入門
~子テーマでテーマ作成&カスタマイズ~
http://www.slideshare.net/mignonstyle/wordpress-childtheme
http://www.slideshare.net/mignonstyle/use-wordpressdirectory
更新作業で消耗しない!
Web製作者のためのWordPress公式ディレクトリ活用術

More Related Content

ノンプログラマーのためのカンタンWordPressテーマ作成入門 ~子テーマで WordPress のテーマをつくろう~