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テーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼

15,079 views

Published on

2016年2月21日に開催されたWordBench東京「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 でのセッションスライドです。

Published in: Design

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

  1. 1. WordPressのテーマ制作みんなどうしてる? ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼ 子テーマでWordPressのテーマをつくろう ∼ Mignon Style
  2. 2. Mignon Style Webデザイナー WordPress公式ディレクトリ テーマ「Chocolat」 プラグイン「MS Custom Login」デベロッパー WordPressスターターテーマ「_s」コントリビューター http://mignonstyle.com/ @mignon_style mignonxstyle https://profiles.wordpress.org/mignonstyle Adobe BracketsのWordPress用コードヒントも作ってます!
  3. 3. 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ハングアウト放送中!!
  4. 4. テーマ「 Chocolat 」 https://ja.wordpress.org/themes/chocolat/
  5. 5. プラグイン「 MS Custom Login 」 https://ja.wordpress.org/plugins/ms-custom-login/
  6. 6. _s http://underscores.me/
  7. 7. _s http://underscores.me/
  8. 8. 01 テーマ制作の ワークフロー
  9. 9. WordPressのテーマ どんなワークフローで 作ってますか?
  10. 10. クライアントさんの デザインにあわせて 1からテーマを作ってます
  11. 11. オリジナルのテーマをベースに カスタマイズして作ってます
  12. 12. 公式ディレクトリのテーマを 直接カスタマイズして 作ってます
  13. 13. ええっ!!
  14. 14. 既存のテーマを 直接カスタマイズしたら ダメなんだよ!!
  15. 15. そうだよ 大変なことに なるよ!!
  16. 16. どうしていけないの? どうすればいいの・・・?
  17. 17. そんなときは 子テーマ!!
  18. 18. 02 子テーマの活用
  19. 19. 子テーマとは 既存のテーマの持っている機能やデザインを そのまま受け継いだ新しいテーマの事です
  20. 20. どうして 子テーマがいいの?
  21. 21. 1 親テーマを カスタマイズした場合
  22. 22. 親テーマに行ったカスタマイズは 親テーマを更新すると上書きされます
  23. 23. 2 子テーマを カスタマイズした場合
  24. 24. 子テーマに行ったカスタマイズは 親テーマを更新してもそのまま残ります
  25. 25. 子テーマを使えば カスタマイズが消えないのね!
  26. 26. それにテーマの修正は テーマ作者さんが やってくれるのでラクラク!
  27. 27. 「テーマを 更新」を
  28. 28. ポチッ
  29. 29. 03 WordPress Codex 日本語版 https://wpdocs.osdn.jp/子テーマ 子テーマの作り方
  30. 30. 1 フォルダの作成 子テーマ用のファイルをいれる フォルダ(ディレクトリ)を作成します (親テーマディレクトリ名)-childの ような名前が推奨 一般的には子テーマ名の 小文字の半角英数字 空白は「-」に 置き換えます
  31. 31. 2 style.cssの作成 style.cssの冒頭に テーマの詳細 を記述します /* Theme Name: Twenty Sixteen Child Template: twentysixteen */ Theme Name: 子テーマのテーマ名 Template: 親テーマのディレクトリ名
  32. 32. 3 スタイルシートの読込 親テーマのスタイルシートを読み込みます /* Theme Name: Twenty Sixteen Child Template: twentysixteen */ @import url('../twentysixteen/style.css'); @importで親テーマの スタイルシートを読み込み
  33. 33. この書き方は 今は 非推奨です
  34. 34. 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!
  35. 35. 親テーマのスタイルシートを読み込んだ後 子テーマのスタイルシートを自動的に読み込みます 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
  36. 36. 子テーマのスタイルシートが読み込まれない場合 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' ) ); }
  37. 37. 子テーマのスタイルシートが読み込まれない場合 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を追加
  38. 38. 子テーマがあるときは 親テーマのスタイルシートを 自動的に読み込むテーマも あります 親テーマのスタイルが 反映されてるか まずは確認してみよう
  39. 39. 4 フォルダのアップロード 子テーマ用のフォルダに style.cssとfunctions.phpを入れます
  40. 40. 1 管理画面からアップロードする場合 子テーマのフォルダをZIP形式に圧縮
  41. 41. 管理画面の 外観 > テーマ > 新規追加 「テーマのアップロード」でzipファイルを選択 今すぐインストール 親テーマがインストールされていないときは 自動的にインストールされる
  42. 42. 2 FTPでアップロードする場合 子テーマのフォルダをWordPressをインストールしてる サーバーのwp-content/themesにアップロード wp-content /themes ディレクトリに入れます 親テーマがインストールされていないと子テーマが エラーになるので親テーマを自分でインストール
  43. 43. 5 子テーマを有効化 管理画面の 外観 > テーマ > でテーマを選んで有効化 子テーマが表示された!
  44. 44. 04 子テーマ制作の ポイント
  45. 45. 親テーマを更新したら テーマがぐちゃぐちゃに なっちゃった!!
  46. 46. バックアップは とってないの?
  47. 47. そうだよ バックアップくらい 常識だろ!!
  48. 48. ・・・・・・
  49. 49. 大丈夫!! 公式ディレクトリのテーマは 開発ログがあります
  50. 50. WordPress.orgの テーマディレクトリで テーマを検索
  51. 51. テーマの 詳細ページ を表示
  52. 52. Tracで 参照
  53. 53. 1つ前の バージョンを 選択
  54. 54. Zip Archive を選択
  55. 55. zipファイルを解凍 フォルダ名をテーマのディレクトリ名に書き換えて テーマフォルダへ wp-content /themes ディレクトリに入れます 更新したテーマは削除して 1つ前のバージョンに置き換える
  56. 56. GitHubで管理してる 作者さんも多いので GitHubにデータがないか 調べてみましょう Twenty Sixteenは GitHubからも ダウンロードできます
  57. 57. 更新するときは まずテスト環境で 試してみましょう readme.txtや changelog.txtに 変更した内容を 書いてる作者さんも います
  58. 58. 子テーマだから 安心ってわけでは ないのね
  59. 59. 05 親テーマの選び方
  60. 60. WordPressのテーマ どうやって選んでますか?
  61. 61. 見た目の美しさだけでなく 子テーマに対応しているかも 確認しましょう
  62. 62. functions.php 子テーマで同名の関数を書き換えることができる if ( ! function_exists( 'my_theme_posted_on' ) ) { function my_theme_posted_on () { } } ! function_exists があるかチェック!!
  63. 63. 特定のタイミングで関数を呼び出したり 書き換えたりできる functions.php function my_theme_posted_on () { do_action( 'my_theme_posted_on_pre' ); return apply_filters( 'my_theme_posted_on_result', $result ); } フィルタやフックがあるかチェック!!
  64. 64. 子テーマって なんだか大変そう…
  65. 65. それなら自分が使いやすい テーマを作って 公式ディレクトリに 登録しよう!
  66. 66. もっとくわしく知りたい人はこちらもどうぞ ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマでテーマ作成&カスタマイズ∼ http://www.slideshare.net/mignonstyle/wordpress-childtheme http://www.slideshare.net/mignonstyle/use-wordpressdirectory 更新作業で消耗しない! Web製作者のためのWordPress公式ディレクトリ活用術

×