ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜

29,241 views

Published on

2015年10月31日に開催されたWordCamp Tokyo 2015でのセッションスライドです。

Published in: Design
0 Comments
57 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
29,241
On SlideShare
0
From Embeds
0
Number of Embeds
15,563
Actions
Shares
0
Downloads
47
Comments
0
Likes
57
Embeds 0
No embeds

No notes for slide

ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜

  1. 1. ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼ 子テーマでテーマ作成&カスタマイズ ∼
  2. 2. たとえばこんなこと ありませんか・・・?
  3. 3. テーマを1から作るの 難しい!!
  4. 4. テーマを更新したら カスタマイズしたところが 消えちゃった!!
  5. 5. とにかくサクっと テーマを作りたい!! 予算も工数も抑えたい!!
  6. 6. そんなとき どうすればいいの・・・?
  7. 7. そんなときは 子テーマ!!
  8. 8. WordPressが 大好きです! Webデザイナー WordPressテーマ・プラグイン デベロッパー WordPress公式ディレクトリ テーマ「 Chocolat 」 プラグイン「 MS Custom Login 」作者 WordPressスターターテーマ「 _s 」コントリビューター http://mignonstyle.com/ mignon_style mignonxstyle Mignon Style
  9. 9. Adobe Brackets の WordPress用 コードヒントも 作ってます!
  10. 10. 子テーマとは 01
  11. 11. とさか くちばし はね しっぽ しっぽ とさか くちばし はね 既存のテーマの持っている機能やデザインを そのまま受け継いだ新しいテーマの事です 既存のテーマ 新しいテーマ 子テーマとは
  12. 12. WordPressでは既存のテーマを「親テーマ」 親テーマを受け継いだテーマを「子テーマ」と 言います とさか くちばし はね しっぽ しっぽ とさか くちばし はね 既存のテーマ 新しいテーマ 親テーマ 子テーマ
  13. 13. とさか くちばし はね しっぽ しっぽ とさか くちばし はね 既存のテーマ 新しいテーマ 親テーマを 継承 親テーマ 子テーマ WordPressでは既存のテーマを「親テーマ」 親テーマを受け継いだテーマを「子テーマ」と 言います このしくみを 「継承」と 言います
  14. 14. どうして 子テーマがいいの?
  15. 15. 親テーマを カスタマイズした場合 1
  16. 16. 親テーマを カスタマイズ 更新通知 親テーマ 親テーマ アップデートした 親テーマ テーマを 更新 カスタマイズした 親テーマ テーマ作者が 親テーマを アップデート 親テーマを 上書き 親テーマに行ったカスタマイズは 親テーマを更新すると上書きされます
  17. 17. 親テーマを カスタマイズ 更新通知 親テーマ 親テーマ アップデートした 親テーマ テーマを 更新 カスタマイズした 親テーマ テーマ作者が 親テーマを アップデート 親テーマを 上書き 親テーマに行ったカスタマイズは 親テーマを更新すると上書きされます
  18. 18. 親テーマを カスタマイズ 更新通知 親テーマ 親テーマ アップデートした 親テーマ テーマを 更新 カスタマイズした 親テーマ テーマ作者が 親テーマを アップデート 親テーマを 上書き 親テーマに行ったカスタマイズは 親テーマを更新すると上書きされます
  19. 19. 親テーマを カスタマイズ 更新通知 親テーマ 親テーマ アップデートした 親テーマ テーマを 更新 カスタマイズした 親テーマ テーマ作者が 親テーマを アップデート 親テーマを 上書き 親テーマに行ったカスタマイズは 親テーマを更新すると上書きされます
  20. 20. 子テーマを カスタマイズした場合 2
  21. 21. 親テーマを 継承 親テーマを 継承 親テーマを 継承 親テーマを カスタマイズ 更新通知 親テーマ アップデートした 親テーマ テーマを 更新 カスタマイズした 親テーマ テーマ作者が 親テーマを アップデート 親テーマを 上書き 親テーマ 親テーマ 親テーマは そのまま 子テーマ 子テーマを カスタマイズ カスタマイズした 子テーマ 子テーマは そのまま カスタマイズした 子テーマ 子テーマに行ったカスタマイズは 親テーマを更新してもそのまま残ります
  22. 22. 親テーマを 継承 親テーマを 継承 親テーマを 継承 親テーマを カスタマイズ 更新通知 親テーマ アップデートした 親テーマ テーマを 更新 カスタマイズした 親テーマ テーマ作者が 親テーマを アップデート 親テーマを 上書き 親テーマ 親テーマ 親テーマは そのまま 子テーマ 子テーマを カスタマイズ カスタマイズした 子テーマ 子テーマは そのまま カスタマイズした 子テーマ 子テーマに行ったカスタマイズは 親テーマを更新してもそのまま残ります
  23. 23. 親テーマを 継承 親テーマを 継承 親テーマを 継承 親テーマを カスタマイズ 更新通知 親テーマ アップデートした 親テーマ テーマを 更新 カスタマイズした 親テーマ テーマ作者が 親テーマを アップデート 親テーマを 上書き 親テーマ 親テーマ 親テーマは そのまま 子テーマ 子テーマを カスタマイズ カスタマイズした 子テーマ 子テーマは そのまま カスタマイズした 子テーマ 子テーマに行ったカスタマイズは 親テーマを更新してもそのまま残ります
  24. 24. 親テーマを 継承 親テーマを 継承 親テーマを 継承 親テーマを カスタマイズ 更新通知 親テーマ アップデートした 親テーマ テーマを 更新 カスタマイズした 親テーマ テーマ作者が 親テーマを アップデート 親テーマを 上書き 親テーマ 親テーマ 親テーマは そのまま 子テーマ 子テーマを カスタマイズ カスタマイズした 子テーマ 子テーマは そのまま カスタマイズした 子テーマ 子テーマに行ったカスタマイズは 親テーマを更新してもそのまま残ります
  25. 25. 子テーマに行ったカスタマイズは 親テーマを更新してもそのまま残ります 親テーマを 継承 親テーマを 継承 親テーマを 継承 親テーマを カスタマイズ 更新通知 親テーマ アップデートした 親テーマ テーマを 更新 カスタマイズした 親テーマ テーマ作者が 親テーマを アップデート 親テーマを 上書き 親テーマ 親テーマ 親テーマは そのまま 子テーマ 子テーマを カスタマイズ カスタマイズした 子テーマ 子テーマは そのまま カスタマイズした 子テーマ
  26. 26. 1から 作らなくて いいのね! 既存のテーマを利用するので カスタマイズしたいところだけ作れば大丈夫!
  27. 27. まずは親となる テーマを決めよう!!
  28. 28. 親テーマの選び方 02
  29. 29. WordPressのテーマ どうやって選んでますか?
  30. 30. テーマがたくさんあって どれがいいかわからない! オススメを教えて!!
  31. 31. テーマには それぞれ特徴があるよ! どんなサイトにしたいか 考えてみよう!!
  32. 32. Webショップコーポレートブログ サイトの種類は?
  33. 33. 3カラム2カラム1カラム レイアウトは?
  34. 34. サイドバーの位置は? ウィジェットの数は? サイトに必要な機能やオプションが あるか調べておこう
  35. 35. 日本語に対応している? 文字のサイズは? 英語だとちょうどいい文字サイズでも 日本語だと少し小さくて読みづらいかも
  36. 36. Webサイトの構成や 用途をきちんと決めて カスタマイズが少なくて済む テーマを選ぼう!!
  37. 37. 子テーマの作り方 03
  38. 38. 子テーマの作り方 03 の前に
  39. 39. テーマを作成するときに 必要なもの
  40. 40. オススメ! WordPressのテーマで使うCSSやPHPファイルは 文字コードを UTF-8形式(BOMなし) で保存します 無料のテキストエディタ Adobe Brackets Windows・Mac TeraPad サクラエディタ Windows mi CotEditor Mac テキストエディタ1
  41. 41. Windowsのメモ帳は 「UTF-8( BOMあり)」でしか 保存できないので 使用しちゃダメ!! ダメ!! ゼッタイ!!
  42. 42. HTML・CSSの知識2 わからない人は HTML・CSSをまず勉強しよう! オススメ! 学習 サイトや ブログも たくさん あるよ
  43. 43. テーマ名3 同じ名前のテーマがないか調べよう テーマ名で 検索 既存のテーマと 同じ名前だと 更新通知が 来てしまいます
  44. 44. うっかり更新すると 上書きされます!! アップデートした テーマ テーマを 更新 カスタマイズした テーマ テーマを 上書き
  45. 45. MyTheme テーマディレクトリ my-theme 既存のテーマ MyTheme テーマディレクトリ my-theme-child 自分のテーマ テーマの更新は「 ディレクトリ名 」と「 テーマ名 」が 既存のテーマと一致しているかをチェックしてるので どちらかを違う名前にすればOK 既存のテーマ名を使用したいときは
  46. 46. 野良テーマにも 独自に更新通知の機能を 設定してるテーマが あるので気をつけよう!
  47. 47. 子テーマの作り方 03 WordPress Codex 日本語版 https://wpdocs.osdn.jp/子テーマ
  48. 48. 空白は「-」に 置き換えます フォルダの作成1 (親テーマディレクトリ名)-childの ような名前が推奨 一般的には子テーマ名の 小文字の半角英数字 フォルダ twentyfifteen-child 子テーマ用のファイルをいれる フォルダ(ディレクトリ)を作成します
  49. 49. style.cssの作成2 style.cssの冒頭に テーマの詳細 を記述します style.css /* Theme Name: Twenty Fifteen Child Template: twentyfifteen */ Theme Name: 子テーマのテーマ名 Template: 親テーマのディレクトリ名
  50. 50. style.css /* Theme Name: Twenty Fifteen Child Template: twentyfifteen */ @import url( '../twentyfifteen/style.css' ); 親テーマのスタイルシートを読み込みます スタイルシートの読込3 @import で親テーマの スタイルシートを読み込み
  51. 51. style.css /* Theme Name: Twenty Fifteen Child Template: twentyfifteen */ @import url( '../twentyfifteen/style.css' ); 親テーマのスタイルシートを読み込みます スタイルシートの読込3 @import で親テーマの スタイルシートを読み込み この書き方は 今は 非推奨です
  52. 52. 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' ); } functions.phpに親テーマの スタイルシートを読み込むコードを記述 スタイルシートの読込3 コピペでOK! 今は コレ!!
  53. 53. functions.php functios.phpの始めに 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
  54. 54. 子テーマのスタイルシートが読み込まれない場合 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' ) ); }
  55. 55. 子テーマのスタイルシートが読み込まれない場合 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を 追加
  56. 56. 子テーマがあるときは 親テーマのスタイルシートを 自動的に読み込むテーマも あります 親テーマのスタイルが 反映されてるか まずは確認してみよう
  57. 57. functions.php 関 数 スタイル シート style.css フォルダ my-theme フォルダのアップロード4 子テーマ用のフォルダに style.cssとfunctions.phpを入れます
  58. 58. 管理画面からアップロードする場合1 フォルダ my-theme my-theme.zip Z I P 子テーマのフォルダをZIP 形式に圧縮
  59. 59. 管理画面の 外観 > テーマ > 新規追加 「 テーマのアップロード 」で zipファイルを選択 今すぐ インストール zip ファイルを 選択 親テーマがインストールされていないときは 自動的にインストールされる
  60. 60. FTPでアップロードする場合2 子テーマのフォルダをWordPressをインストールしてる サーバーのwp-content/themesにアップロード wp-content /themes ディレクトリに 入れますフォルダ my-theme wp-contentディレクトリ wp-contentディレクトリ 親テーマがインストールされていないと子テーマが エラーになるので親テーマを自分でインストール
  61. 61. 子テーマを有効化5 管理画面の 外観 > テーマ > でテーマを選んで有効化 子テーマが 表示された!
  62. 62. 子テーマの カスタマイズ 04
  63. 63. 難易度 ★ ☆ ☆ ☆ ☆ リンクの色や 背景の色を 変えたい! CSSのカスタマイズ 1
  64. 64. Chromeのデベロッパーツールや FirefoxのFirebugを使って 変更を確認しながら スタイルをカスタマイズします CSSのカスタマイズ1
  65. 65. 表示 ↓ 開発/管理 ↓ デベロッパー ツール デベロッパーツールが表示された Chrome(デベロッパーツール)
  66. 66. Firefoxのアドオン 「Firebug」をインストール Firebugの アイコンを クリックして 編集画面を 表示 Firefox(Firebug)
  67. 67. この アイコンを クリック 「ページ内の調べたい要素をクリックしてください」 Firebugの使い方
  68. 68. ① 変更したい 箇所を選んで ② スタイルの 表示画面で 内容を確認
  69. 69. ③ 変更したい スタイルを 記述 ④ 変更が リアルタイムで 反映されるので 表示を確認
  70. 70. style.css /* Theme Name: Twenty Fifteen Child Template: twentyfifteen */ .entry-title a { color: #ab0d0d; } コピペで OK! 変更内容を子テーマのstyle.cssに記述します
  71. 71. style.cssに 記述したスタイルが 設定されている できた!
  72. 72. 難易度 ★ ★ ★ ☆ ☆ 投稿日を 削除したい! テンプレートファイルの カスタマイズ 1 2
  73. 73. テンプレートファイルから 投稿日の記述を探して コードを削除します テンプレートファイルの カスタマイズ 1 2
  74. 74. Twenty Fifteen の 投稿日を削除する場合 ① Firebugで 編集したい箇所の class名を確認 <span class="posted-on">
  75. 75. ② 親テーマ内を class名で ファイル検索 twentyfifteen/inc/template-tags.php ③ 編集したい箇所の ファイルを調べる
  76. 76. twentyfifteen/inc/template-tags.php ④ 該当する関数を 子テーマの functions.phpに コピペ function(){}で 囲まれている ところを関数と いいます コピペ functions.php 関 数 子テーマ
  77. 77. 子テーマのfunctions.php ⑤ 投稿日の表示の 記述の部分を コメントアウト /* ∼ */ で囲みます コメント アウトして 表示に 問題ないか 確認します
  78. 78. 投稿日が 消えた!
  79. 79. 子テーマのfunctions.php 問題なければ コメントアウト したところを 削除 できた! 削 除
  80. 80. 難易度 ★ ★ ★ ★ ★ 投稿日の 表示位置を 変更したい! テンプレートファイルの カスタマイズ 2 3
  81. 81. テンプレートファイルの カスタマイズ 2 3 テンプレートファイルに 投稿日の記述を 追加します
  82. 82. タイトルの下に投稿日を追加する場合 ① Firebugで 編集したい箇所の class名を確認 <h2 class="entry-title">
  83. 83. ② 親テーマ内を class名で ファイル検索 content.php content-link.php content-page.php content-search.php image.php 検索でファイルが たくさん出て来たけど どれを使えばいいか わからない
  84. 84. プラグイン「show current Template」 ページに使われてるテンプレートファイルを 調べます プラグインを インストール ↓ 有効化
  85. 85. トップページの場合 index.php 投稿ページの場合 single.php使用している テンプレート ファイル名が 表示される
  86. 86. twentyfifteen/index.php get_template_part()で 指定したテンプレート ファイルを読み込む ここでは content.phpを 読み込んでます content.php content get_post_format()で 投稿フォーマットを 調べてます
  87. 87. 親テーマのテンプレートファイル(content.php)を 子テーマのフォルダにコピー コピー content.php content 子テーマ content.php content 親テーマ
  88. 88. 子テーマのcontent.php タイトルの下に 投稿日を表示する テンプレートタグ を追加 WordPressの テンプレートタグ を使って 表示します
  89. 89. CSSで レイアウトを 調整 できた!
  90. 90. よく使うテンプレートタグ WordPress Codex 日本語版 https://wpdocs.osdn.jp/テンプレートタグ サイトのタイトルを表示 <?php bloginfo( 'name' ); ?> サイトのキャッチフレーズを表示 <?php bloginfo( 'description' ); ?> 投稿のタイトルを表示 <?php the_title(); ?> 投稿日を表示 <?php echo get_the_date(); ?> 投稿のカテゴリーを表示 <?php the_category(); ?> 投稿のタグを表示 <?php the_tags(); ?> 投稿のパーマリンクを出力 <?php the_permalink(); ?> サイトのURLを出力 <?php echo home_url(); ?> 投稿の内容を表示 <?php the_content(); ?> 投稿の抜粋を表示 <?php the_excerpt(); ?> 投稿のアイキャッチを表示 <?php the_post_thumbnail(); ?> テーマディレクトリのURLを出力 <?php echo get_template_directory_uri(); ?>
  91. 91. 親と子のファイルが読み込まれる順番 ブラウザで表示 functions.php 関 数 front-page.php front-page index.php index single.php single スタイル シート style.css 子テーマ親テーマ page.php page functions.php 関 数 index.php index single.php single スタイル シート style.css 親テーマ親テーマ子テーマ 子テーマ
  92. 92. 親と子のファイルが読み込まれる順番 ブラウザで表示 functions.php 関 数 front-page.php front-page index.php index single.php single スタイル シート style.css 子テーマ親テーマ page.php page functions.php 関 数 index.php index single.php single スタイル シート style.css 親テーマ親テーマ子テーマ 子テーマ 子テーマに親テーマと同名の テンプレートファイルがあれば 子テーマを優先して読み込む 親テーマを読み込み ↓ 子テーマを読み込み 子テーマを読み込み ↓ 親テーマを読み込み 親テーマにない テンプレート ファイルも 追加できる
  93. 93. 親と子のファイルが読み込まれる順番 ブラウザで表示 functions.php 関 数 front-page.php front-page index.php index single.php single スタイル シート style.css 子テーマ親テーマ page.php page functions.php 関 数 index.php index single.php single スタイル シート style.css 親テーマ親テーマ子テーマ 子テーマ 子テーマに親テーマと同名の テンプレートファイルがあれば 子テーマを優先して読み込む 親テーマを読み込み ↓ 子テーマを読み込み 子テーマを読み込み ↓ 親テーマを読み込み 親テーマにない テンプレート ファイルも 追加できる 子テーマで 読み込まれた テンプレートファイルは 親テーマでは 読み込まれません
  94. 94. テーマを構成するテンプレートファイル WordPress Codex 日本語版 https://wpdocs.osdn.jp/テーマの作成 style.css index.php single.php page.php header.php footer.php sidebar.php comments.php screenshot.png functions.php スタイルシート メインのテンプレート 投稿ページのテンプレート 固定ページのテンプレート ヘッダーのテンプレート( get_header()で読み込み ) フッターのテンプレート( get_footer()で読み込み ) サイドバーのテンプレート( get_sidebar()で読み込み ) コメント欄のテンプレート( comment_form()で読み込み ) テーマのスクリーンショット( 1200px × 900px以内 ) 関数( PHPの命令文 )用のファイル 必須 必須
  95. 95. 読み込まれるテンプレートファイルの順番 WordPress Codex 日本語版 https://wpdocs.osdn.jp/テンプレート階層 ページの種類 404ページ 検索結果ページ カテゴリーアーカイブ タグアーカイブ 作成者アーカイブ 日付アーカイブ 投稿ページ 固定ページ フロントページ category- $slug.php tag-$slug.php author- $nicename.php index.php category.php tag.php author.php date.php single-post.php page-$id.php front-page.php category-$id.php tag-$id.php author-$id.php page-$slug.php 404.php search.php archive.php single.php page.php home.php 優先順位高 い 低 い
  96. 96. CSSのカスタマイズからはじめて 慣れてきたらテンプレートの カスタマイズをやってみよう!
  97. 97. 公式ディレクトリに 子テーマを登録 番外編
  98. 98. せっかく作ったテーマ 管理画面から選べたら かっこいいですよね・・・?
  99. 99. WordPress 公式ディレクトリに 登録しちゃおう! 子テーマでも登録できます!
  100. 100. 1200px × 900px 以内 テーマを有効化したときのキャプチャ screenshot.pngを追加1 1200px 900px screenshot.png
  101. 101. readme.txtにライセンスを記述 (100%GPL または GPL互換ライセンス) readme.txtの作成2 readme.txt readme
  102. 102. style.css style.cssの記述を追加4 /* Theme Name: Twenty Fifteen Child Template: twentyfifteen Theme URI: テーマのサイトURI Author: テーマの作者名 Author URI: テーマ作者のサイトURI Description: テーマの説明 Version: テーマのバージョン License: ライセンス License URI: ライセンスのURI Tags: テーマのタグ */ 追加
  103. 103. フォルダ 子テーマ style.css スタイル シート 関数 functions.php readme readme.txt 1200px 900px screenshot.png これだけで OK! カスタマイズしたテンプレートなどが あるときは全部入れます
  104. 104. Theme-Checkプラグインで問題がないか確認 テーマの ガイドラインに 適合しているか チェック
  105. 105. zipファイルにして テーマの登録のページからアップロード  テーマのアップロード https://wordpress.org/themes/upload/ 形式:zipファイル ファイルサイズ:7Mまで
  106. 106. テーマレビュアーがテーマをチェックして 修正箇所がある場合はフィードバックがかえってくるので 修正してテーマの登録のページからアップロード 修正のたびに style.cssの バージョン番号を あげます Feedback テーマレビュアー
  107. 107. OKなら公式ディレクトリに登録される 公式ディレクトリに登録される テーマレビュアー L I V E 登 録
  108. 108. まとめ
  109. 109. 親テーマを決める1 子テーマのフォルダ style.css functions.phpを作成 2 スタイルをカスタマイズ3 テンプレートファイルを カスタマイズ 4 子テーマの手順
  110. 110. 思ったよりカンタン! まずはやってみよう わからないことは 本やブログで調べたり フォーラムで質問しよう
  111. 111. ご清聴 ありがとうございました Mignon Style @mignon_style mignonxstyle

×