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

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

2. たとえばこんなことありませんか・・・？

3. テーマを１から作るの難しい！！

4. テーマを更新したらカスタマイズしたところが消えちゃった！！

5. とにかくサクっとテーマを作りたい！！予算も工数も抑えたい！！

6. そんなときどうすればいいの・・・？

7. そんなときは子テーマ！！

8. WordPressが大好きです！ Webデザイナー WordPressテーマ・プラグインデベロッパー WordPress公式ディレクトリテーマ「 Chocolat 」プラグイン「 MS Custom Login 」作者 WordPressスターターテーマ「 _s 」コントリビューター http://mignonstyle.com/ mignon_style mignonxstyle Mignon Style

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

10. 子テーマとは 01

11. とさかくちばしはねしっぽしっぽとさかくちばしはね既存のテーマの持っている機能やデザインをそのまま受け継いだ新しいテーマの事です既存のテーマ新しいテーマ子テーマとは

12. WordPressでは既存のテーマを「親テーマ」親テーマを受け継いだテーマを「子テーマ」と言いますとさかくちばしはねしっぽしっぽとさかくちばしはね既存のテーマ新しいテーマ親テーマ子テーマ

13. とさかくちばしはねしっぽしっぽとさかくちばしはね既存のテーマ新しいテーマ親テーマを継承親テーマ子テーマ WordPressでは既存のテーマを「親テーマ」親テーマを受け継いだテーマを「子テーマ」と言いますこのしくみを「継承」と言います

14. どうして子テーマがいいの？

15. 親テーマをカスタマイズした場合 1

16. 親テーマをカスタマイズ更新通知親テーマ親テーマアップデートした親テーマテーマを更新カスタマイズした親テーマテーマ作者が親テーマをアップデート親テーマを上書き親テーマに行ったカスタマイズは親テーマを更新すると上書きされます

20. 子テーマをカスタマイズした場合 2

21. 親テーマを継承親テーマを継承親テーマを継承親テーマをカスタマイズ更新通知親テーマアップデートした親テーマテーマを更新カスタマイズした親テーマテーマ作者が親テーマをアップデート親テーマを上書き親テーマ親テーマ親テーマはそのまま子テーマ子テーマをカスタマイズカスタマイズした子テーマ子テーマはそのままカスタマイズした子テーマ子テーマに行ったカスタマイズは親テーマを更新してもそのまま残ります

25. 子テーマに行ったカスタマイズは親テーマを更新してもそのまま残ります親テーマを継承親テーマを継承親テーマを継承親テーマをカスタマイズ更新通知親テーマアップデートした親テーマテーマを更新カスタマイズした親テーマテーマ作者が親テーマをアップデート親テーマを上書き親テーマ親テーマ親テーマはそのまま子テーマ子テーマをカスタマイズカスタマイズした子テーマ子テーマはそのままカスタマイズした子テーマ

26. １から作らなくていいのね！既存のテーマを利用するのでカスタマイズしたいところだけ作れば大丈夫！

27. まずは親となるテーマを決めよう！！

28. 親テーマの選び方 02

29. WordPressのテーマどうやって選んでますか？

30. テーマがたくさんあってどれがいいかわからない！オススメを教えて！！

31. テーマにはそれぞれ特徴があるよ！どんなサイトにしたいか考えてみよう！！

32. Webショップコーポレートブログサイトの種類は？

33. 3カラム2カラム1カラムレイアウトは？

34. サイドバーの位置は？ウィジェットの数は？サイトに必要な機能やオプションがあるか調べておこう

35. 日本語に対応している？文字のサイズは？英語だとちょうどいい文字サイズでも日本語だと少し小さくて読みづらいかも

36. Webサイトの構成や用途をきちんと決めてカスタマイズが少なくて済むテーマを選ぼう！！

37. 子テーマの作り方 03

38. 子テーマの作り方 03 の前に

39. テーマを作成するときに必要なもの

40. オススメ！ WordPressのテーマで使うCSSやPHPファイルは文字コードを UTF-8形式（BOMなし）で保存します無料のテキストエディタ Adobe Brackets Windows・Mac TeraPad サクラエディタ Windows mi CotEditor Mac テキストエディタ1

41. Windowsのメモ帳は「UTF-8（ BOMあり）」でしか保存できないので使用しちゃダメ！！ダメ!! ゼッタイ!!

42. HTML・CSSの知識2 わからない人は HTML・CSSをまず勉強しよう！オススメ！学習サイトやブログもたくさんあるよ

43. テーマ名3 同じ名前のテーマがないか調べようテーマ名で検索既存のテーマと同じ名前だと更新通知が来てしまいます

44. うっかり更新すると上書きされます！！アップデートしたテーマテーマを更新カスタマイズしたテーマテーマを上書き

45. MyTheme テーマディレクトリ my-theme 既存のテーマ MyTheme テーマディレクトリ my-theme-child 自分のテーマテーマの更新は「ディレクトリ名」と「テーマ名」が既存のテーマと一致しているかをチェックしてるのでどちらかを違う名前にすればOK 既存のテーマ名を使用したいときは

46. 野良テーマにも独自に更新通知の機能を設定してるテーマがあるので気をつけよう！

47. 子テーマの作り方 03 WordPress Codex 日本語版 https://wpdocs.osdn.jp/子テーマ

48. 空白は「-」に置き換えますフォルダの作成1 （親テーマディレクトリ名）-childのような名前が推奨一般的には子テーマ名の小文字の半角英数字フォルダ twentyﬁfteen-child 子テーマ用のファイルをいれるフォルダ（ディレクトリ）を作成します

49. style.cssの作成2 style.cssの冒頭にテーマの詳細を記述します style.css /* Theme Name: Twenty Fifteen Child Template: twentyﬁfteen */ Theme Name: 子テーマのテーマ名 Template: 親テーマのディレクトリ名

50. style.css /* Theme Name: Twenty Fifteen Child Template: twentyﬁfteen */ @import url( '../twentyﬁfteen/style.css' ); 親テーマのスタイルシートを読み込みますスタイルシートの読込3 @import で親テーマのスタイルシートを読み込み

51. style.css /* Theme Name: Twenty Fifteen Child Template: twentyﬁfteen */ @import url( '../twentyﬁfteen/style.css' ); 親テーマのスタイルシートを読み込みますスタイルシートの読込3 @import で親テーマのスタイルシートを読み込みこの書き方は今は非推奨です

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. 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. 子テーマのスタイルシートが読み込まれない場合 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. 子テーマのスタイルシートが読み込まれない場合 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. 子テーマがあるときは親テーマのスタイルシートを自動的に読み込むテーマもあります親テーマのスタイルが反映されてるかまずは確認してみよう

57. functions.php 関数スタイルシート style.css フォルダ my-theme フォルダのアップロード4 子テーマ用のフォルダに style.cssとfunctions.phpを入れます

58. 管理画面からアップロードする場合1 フォルダ my-theme my-theme.zip Z I P 子テーマのフォルダをZIP 形式に圧縮

59. 管理画面の外観 > テーマ > 新規追加「テーマのアップロード」で zipファイルを選択今すぐインストール zip ファイルを選択親テーマがインストールされていないときは自動的にインストールされる

60. FTPでアップロードする場合2 子テーマのフォルダをWordPressをインストールしてるサーバーのwp-content/themesにアップロード wp-content /themes ディレクトリに入れますフォルダ my-theme wp-contentディレクトリ wp-contentディレクトリ親テーマがインストールされていないと子テーマがエラーになるので親テーマを自分でインストール

61. 子テーマを有効化5 管理画面の外観 > テーマ > でテーマを選んで有効化子テーマが表示された！

62. 子テーマのカスタマイズ 04

63. 難易度 ★ ☆ ☆ ☆ ☆ リンクの色や背景の色を変えたい! CSSのカスタマイズ 1

64. Chromeのデベロッパーツールや FirefoxのFirebugを使って変更を確認しながらスタイルをカスタマイズします CSSのカスタマイズ1

65. 表示 ↓ 開発/管理 ↓ デベロッパーツールデベロッパーツールが表示された Chrome（デベロッパーツール）

66. Firefoxのアドオン「Firebug」をインストール Firebugのアイコンをクリックして編集画面を表示 Firefox（Firebug）

67. このアイコンをクリック「ページ内の調べたい要素をクリックしてください」 Firebugの使い方

68. ① 変更したい箇所を選んで ② スタイルの表示画面で内容を確認

69. ③ 変更したいスタイルを記述 ④ 変更がリアルタイムで反映されるので表示を確認

70. style.css /* Theme Name: Twenty Fifteen Child Template: twentyﬁfteen */ .entry-title a { color: #ab0d0d; } コピペで OK！変更内容を子テーマのstyle.cssに記述します

71. style.cssに記述したスタイルが設定されているできた！

72. 難易度 ★ ★ ★ ☆ ☆ 投稿日を削除したい！テンプレートファイルのカスタマイズ 1 2

73. テンプレートファイルから投稿日の記述を探してコードを削除しますテンプレートファイルのカスタマイズ 1 2

74. Twenty Fifteen の投稿日を削除する場合 ① Firebugで編集したい箇所の class名を確認 <span class="posted-on">

75. ② 親テーマ内を class名でファイル検索 twentyﬁfteen/inc/template-tags.php ③ 編集したい箇所のファイルを調べる

76. twentyﬁfteen/inc/template-tags.php ④ 該当する関数を子テーマの functions.phpにコピペ function(){}で囲まれているところを関数といいますコピペ functions.php 関数子テーマ

77. 子テーマのfunctions.php ⑤ 投稿日の表示の記述の部分をコメントアウト /* ∼ */ で囲みますコメントアウトして表示に問題ないか確認します

78. 投稿日が消えた！

79. 子テーマのfunctions.php 問題なければコメントアウトしたところを削除できた！削除

80. 難易度 ★ ★ ★ ★ ★ 投稿日の表示位置を変更したい！テンプレートファイルのカスタマイズ 2 3

81. テンプレートファイルのカスタマイズ 2 3 テンプレートファイルに投稿日の記述を追加します

82. タイトルの下に投稿日を追加する場合 ① Firebugで編集したい箇所の class名を確認 <h2 class="entry-title">

83. ② 親テーマ内を class名でファイル検索 content.php content-link.php content-page.php content-search.php image.php 検索でファイルがたくさん出て来たけどどれを使えばいいかわからない

84. プラグイン「show current Template」ページに使われてるテンプレートファイルを調べますプラグインをインストール ↓ 有効化

85. トップページの場合 index.php 投稿ページの場合 single.php使用しているテンプレートファイル名が表示される

86. twentyﬁfteen/index.php get_template_part()で指定したテンプレートファイルを読み込むここでは content.phpを読み込んでます content.php content get_post_format()で投稿フォーマットを調べてます

87. 親テーマのテンプレートファイル（content.php）を子テーマのフォルダにコピーコピー content.php content 子テーマ content.php content 親テーマ

88. 子テーマのcontent.php タイトルの下に投稿日を表示するテンプレートタグを追加 WordPressのテンプレートタグを使って表示します

89. CSSでレイアウトを調整できた！

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. 親と子のファイルが読み込まれる順番ブラウザで表示 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. 親と子のファイルが読み込まれる順番ブラウザで表示 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. 親と子のファイルが読み込まれる順番ブラウザで表示 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. テーマを構成するテンプレートファイル 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. 読み込まれるテンプレートファイルの順番 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. CSSのカスタマイズからはじめて慣れてきたらテンプレートのカスタマイズをやってみよう！

97. 公式ディレクトリに子テーマを登録番外編

98. せっかく作ったテーマ管理画面から選べたらかっこいいですよね・・・？

99. WordPress 公式ディレクトリに登録しちゃおう！子テーマでも登録できます！

100. 1200px × 900px 以内テーマを有効化したときのキャプチャ screenshot.pngを追加1 1200px 900px screenshot.png

101. readme.txtにライセンスを記述（100％GPL または GPL互換ライセンス） readme.txtの作成2 readme.txt readme

102. style.css style.cssの記述を追加4 /* Theme Name: Twenty Fifteen Child Template: twentyﬁfteen Theme URI: テーマのサイトURI Author: テーマの作者名 Author URI: テーマ作者のサイトURI Description: テーマの説明 Version: テーマのバージョン License: ライセンス License URI: ライセンスのURI Tags: テーマのタグ */ 追加

103. フォルダ子テーマ style.css スタイルシート関数 functions.php readme readme.txt 1200px 900px screenshot.png これだけで OK！カスタマイズしたテンプレートなどがあるときは全部入れます

104. Theme-Checkプラグインで問題がないか確認テーマのガイドラインに適合しているかチェック

105. zipファイルにしてテーマの登録のページからアップロードテーマのアップロード https://wordpress.org/themes/upload/ 形式：zipファイルファイルサイズ：7Mまで

106. テーマレビュアーがテーマをチェックして修正箇所がある場合はフィードバックがかえってくるので修正してテーマの登録のページからアップロード修正のたびに style.cssのバージョン番号をあげます Feedback テーマレビュアー

107. OKなら公式ディレクトリに登録される公式ディレクトリに登録されるテーマレビュアー L I V E 登録

108. まとめ

109. 親テーマを決める1 子テーマのフォルダ style.css functions.phpを作成 2 スタイルをカスタマイズ3 テンプレートファイルをカスタマイズ 4 子テーマの手順

110. 思ったよりカンタン！まずはやってみようわからないことは本やブログで調べたりフォーラムで質問しよう

111. ご清聴ありがとうございました Mignon Style @mignon_style mignonxstyle

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

You are reading a preview.

Check these out next

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

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Similar to ノンプログラマーのためのカンタンWordPressテーマ作成入門　〜子テーマでテーマ作成＆カスタマイズ〜 (20)

Recently uploaded (20)