意のままに（わがままに）僕がテーマを作る為に覚えたこと2

WordBench群馬 #2で話した「これからWordPressのテーマを作ったり、カスタマイズしたいけど、どう手をつけていったらいいかわからない」方向けのスライドです

Transcript

1. 意のままに（わがままに） 僕がテーマを作る為に 覚えたこと WordBench群馬 #2 2018.4.21 sat @yosiakatsuki
2. 今日お話すること
3. WordPressテーマを作るために 覚えたこと
4. これからテーマを作る時の 情報収集の手がかり
5. WordPressテーマ作りはコワイ？
6. HTMLコーディングはできる！ WordPressテーマ作りはコワイ？ 画像：いらすとや　http://www.irasutoya.com/
7. HTMLコーディングはできる！ え？WordPressテーマ…？ ｺﾜｲ… ﾜｶﾗﾅｲ… WordPressテーマ作りはコワイ？ 画像：いらすとや　http://www.irasutoya.com/
8. 自分のブログ、やりたいことがたくさん！ WordPressテーマ作りはコワイ？ 画像：いらすとや　http://www.irasutoya.com/
9. 自分のブログ、やりたいことがたくさん！ カスタマイズ… プログラムわからないし… WordPressテーマ作りはコワイ？ 画像：いらすとや　http://www.irasutoya.com/
10. でも… やりたい気持ちはある！ WordPressテーマ作りはコワイ？ 画像：いらすとや　http://www.irasutoya.com/
11. 気持ちはあるけど… なにから手をつけたらいいかわからない！ WordPressテーマ作りはコワイ？ 画像：いらすとや　http://www.irasutoya.com/
12. これからテーマを作る時の 情報収集の手がかり
13. なんとなく自分にもできそうかも！！ テーマ作りが少し身近に感じられたら幸いです 画像：いらすとや　http://www.irasutoya.com/
14. 自己紹介
15. 尾形 義暁 ニックネーム：よっしー @yosiakatsuki
16. 群馬を中心に活動する Webエンジニア 　 フリーランス x 会社員 画像：ぱくたそ　https://www.pakutaso.com/
17. WordBench Gunma モデレーターの1人 「湯もみわぷー」
18. ブログ
19. https://tarahako.com/ • 人生初WordPressサイト • 夏フェス初心者向けブログ
20. https://yosiakatsuki.net/blog • WordPress初心者向け 技術ブログ
21. ブログ向け無料WordPressテーマ 作ってます
22. 現在α版検証中
23. それでは本題に…
24. WordPressテーマを作るために 覚えたこと
25. 1. WordPressテーマ作りに必要なスキル 2. そもそもテーマってどう作る？ 3. テンプレートのお話 4. ページごとにゴリッとコーディングしたいときは 5. 開発環境のおはなし 6. 開発に便利なプラグイン
26. 1. WordPressテーマ作りに必要なスキル 2. そもそもテーマってどう作る？ 3. テンプレートのお話 4. ページごとにゴリッとコーディングしたいときは 5. 開発環境のおはなし 6. 開発に便利なプラグイン
27. 「WordPressテーマをカスタマイズ したいので、PHPを覚えます！」
28. そ、そうなんだけど…
29. それよりも 「WordPressのお作法」 をたくさん覚えることになる
30. WordPressテーマを作るために 身につけたいスキル
31. • HTML,CSS → 必須・重要 • JavaScript → サイトによりけり • PHP → かじった程度でも…
32. HTML・CSS
33. HTML・CSS • id,classの対応がわかるように • PC上のHTMLファイルをブラウザで表示できるの で、簡単に練習を始められる
34. JavaScript
35. JavaScript • 必要に応じて… • 巷で公開されている便利なプラグインを利用する ことが多いかも • （コピペ+αで凌げることもあるので後回しでも…）
36. PHP
37. PHP • かじった程度でもなんとかなる • <?php ?>、変数、関数、引数、echo、if、for • 「WordPressの関数」を駆使してテーマを作る為、 「関数」「引数」は掴んでおきたい • WordPressのお作法（関数）をたくさん覚えていくことになる
38. 「プログラミング」で頭を悩ませるのはPHP • 「土日で作る」系の本 • プログラミング学習サイトの無料でできる範囲 などで基礎を習得！
39. 1. WordPressテーマ作りに必要なスキル 2. そもそもテーマってどう作る？ 3. テンプレートのお話 4. ページごとにゴリッとコーディングしたいときは 5. 開発環境のおはなし 6. 開発に便利なプラグイン
40. そもそもテーマってどう作るの？
41. .../ wp-content / themes フォルダに入れる
42. フォルダだけでは テーマとして認識されない
43. どんなファイルを用意すればいいの？
44. 最低限必要なファイル • style.css • index.php
45. style.cssにはテーマの情報をコメントで記載 「Theme Name:」を コメントで記入
46. この2つだけでテーマができてるの？
47. 実際にはもっと多くのファイルで作られている 役割ごととにファイルを分割 • ヘッダー • フッター • 一覧ページ • 投稿詳細 • 固定ページ　　　　　　　…など
48. どんなファイルがあるか • header.php • footer.php • sidebar.php …など • index.php • archive.php • search.php • page.php • single.php • 404.php
49. 「テンプレート」と呼ばれている
50. 1. WordPressテーマ作りに必要なスキル 2. そもそもテーマってどう作る？ 3. テンプレートのお話 4. ページごとにゴリッとコーディングしたいときは 5. 開発環境のおはなし 6. 開発に便利なプラグイン
51. テンプレートには優先順位がある
52. テンプレート階層 https://wpdocs.osdn.jp/テンプレート階層
53. テンプレート階層 例：カテゴリー一覧ページ category.phpがあればそれを使う、 無ければarchive.phpを使う、 archive.phpも無ければindex.phpを使う…
54. 毎回自分でテンプレート作るの？
56. （めんどくさい）
57. 世の中には便利な「スターターテーマ」 が存在している
58. 真っ白な状態から作るなら 「_S」を使うといい
59. _S (underscores) https://underscores.me/
60. _S (underscores) • テーマ名を入力してテーマの土台を作成できる
61. _S (underscores) • ほぼ真っ白なテンプレートがあっという間に完成
62. _S (underscores) • 必要そうなファイルはほぼ全部揃ってる！
63. テンプレートは どうやってつなぎ合わせる？
64. ヘッダー フッター コンテンツ サイドバー
65. header.php footer.php sidebar.php
66. WordPressの関数で パーツを読み込み
67. header.php footer.php single.php sidebar.php get_header() get_sidebar() get_footer() ※single.phpから 　各パーツを呼び出す
68. • get_header() → header.php • get_sidebar() → sidebar.php • get_footer() → footer.php …それぞれ対応している
69. 自分でパーツを作りたいときは？ CTA、SNSシェア、お知らせ的なやつ…などなど
70. get_template_part()を使う
71. get_template_part() • 引数に読み込むPHPファイルのパスを渡す • パスはテーマのルートフォルダからの相対パスを 指定する • 「.php」は削除する
72. 例 get_template_part( ‘template-parts/sns’ );
73. header.php footer.php sns.php sidebar.php get_header() get_sidebar() get_footer() get_template_part( ‘template-parts/sns’ );
74. パーツごとにファイルを分けると 後々のメンテも楽
75. 1. WordPressテーマ作りに必要なスキル 2. そもそもテーマってどう作る？ 3. テンプレートのお話 4. ページごとにゴリッとコーディングしたいときは 5. 開発環境のおはなし 6. 開発に便利なプラグイン
76. デザインが決まっていて ゴリッとコーディングする場合
77. 管理画面からなんか書いてられない
78. 特定の固定ページにだけ適用する テンプレート
79. 特定の固定ページだけのレイアウト • 「page-[slug].php」というファイルを作る • カスタムページテンプレートを作る
80. page-[slug].php
81. page-[slug].php • 固定ページの「スラッグ」をファイ ル名に加える方法 • スラッグが「about」の場合、 「page-about.php」というファイル を作る
82. カスタムページテンプレート
83. カスタムページテンプレート • テンプレートファイルの先頭に 「Template Name: [テンプレート名]」をPHPコメントで書く • 管理画面からテンプレートを選択出来る
84. 1. WordPressテーマ作りに必要なスキル 2. そもそもテーマってどう作る？ 3. テンプレートのお話 4. ページごとにゴリッとコーディングしたいときは 5. 開発環境のおはなし 6. 開発に便利なプラグイン
85. 開発環境の話
86. PC上に WordPressが動く環境を用意する
87. • MAMP • XAMPP • Local by Flywheel • VCCW • Wocker 　　　　　…などなど
88. 個人的には 「Local by Flywheel」がおすすめ
89. Local by Flywheel • 簡単な入力とボタン操作だけでOK • 複数サイトも作れる https://local.getflywheel.com/
90. 1. WordPressテーマ作りに必要なスキル 2. そもそもテーマってどう作る？ 3. テンプレートのお話 4. ページごとにゴリッとコーディングしたいときは 5. 開発環境のおはなし 6. 開発に便利なプラグイン
91. 便利なプラグイン
92. Show Current Template
93. Show Current Template • 見ているページで使われているテンプレートを表 示してくれる
94. 本日のまとめ
95. • PHPはちょっとできれば大丈夫！怖くない ◦ WordPressの関数を知ってればなんとかなる！ 　 • テーマを構成するテンプレートには役割がある！ ◦ 適したファイルを編集する！（最初は迷うけど） 　 • ページごとのテンプレートでガッツリコーディング ◦ ファイルに直接コーディングする方法もあります！
96. 「なんとなく自分にもできそうかも」
97. ありがとうございました！