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

「HTMLは書けるけどWordPressテーマは作ったことがない」という方、「サイト・ブログのカスタマイズをしたいけど、何から始めたらいいかよくわからない」方向けのWordPressテーマ作成の為にこんなことから調べてみてはいかがでしょう…という発表

Transcript

1. 意のままに（わがままに） 僕がテーマを作る為に 覚えたこと WordPressと仲良くなろう会 #1 2018.2.17 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. ページごとにゴリッとコーディングしたいときは 7. 開発環境のおはなし 8. 開発に便利なプラグイン
26. 1. WordPressテーマ作りに必要なスキル 2. そもそもテーマってどう作る？ 3. テンプレートのお話 4. 「ループ」というものがある 5. テーマ作りでよく見る関数 6. ページごとにゴリッとコーディングしたいときは 7. 開発環境のおはなし 8. 開発に便利なプラグイン
27. WordPressテーマを作るために プログラミングの知識は必要？
28. 個人的には 「ちょっとかじってればOK」
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. 「プログラミング」で頭を悩ませるのはココ • 「土日で作る」系の本 • プログラミング学習サイトの無料でできる範囲 などで基礎を習得！
39. 1. WordPressテーマ作りに必要なスキル 2. そもそもテーマってどう作る？ 3. テンプレートのお話 4. 「ループ」というものがある 5. テーマ作りでよく見る関数 6. ページごとにゴリッとコーディングしたいときは 7. 開発環境のおはなし 8. 開発に便利なプラグイン
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. ページごとにゴリッとコーディングしたいときは 7. 開発環境のおはなし 8. 開発に便利なプラグイン
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. ページごとにゴリッとコーディングしたいときは 7. 開発環境のおはなし 8. 開発に便利なプラグイン
76. 覚えておきたい「ループ」の話
77. タイトルなどを出力する関数は 「ループ」の中で使う
78. 「ループ」って？
79. while ( have_posts() ) : the_post(); 〜 endwhile;
80. リファレンスでも度々登場する
81. while ( have_posts() ) : the_post(); 　 // ループの中 　 endwhile; 　 // ループの外
82. ループの外だと 思った結果が返って来ないことも… ヘッダーとかフッターとか…
83. _S などををベースにする場合 ループは書いてあるので 自分で書くことは稀
84. スターターテーマを使うと 楽
85. 1. WordPressテーマ作りに必要なスキル 2. そもそもテーマってどう作る？ 3. テンプレートのお話 4. 「ループ」というものがある 5. テーマ作りでよく見る関数 6. ページごとにゴリッとコーディングしたいときは 7. 開発環境のおはなし 8. 開発に便利なプラグイン
86. テーマを作る時によく見る関数
87. get_template_directory_uri
88. get_template_directory_uri • テーマのルートフォルダへのURLを取得 • テーマ内に配置したCSS・JS・画像の読み込みで よく使う 例： 　<link rel=”stylesheet” href=”<?php echo get_template_directory_uri() . ‘/css/main.css’; ?>” />
89. home_url
90. home_url • TOPページのURLを取得 例： 　<a href=”<?php echo home_url( ‘/’ ); ?>”>TOPページへ</a>
91. get_bloginfo
92. get_bloginfo • サイトの様々な情報を取得 ◦ get_bloginfo( ‘name’ );　：　サイト名 ◦ get_bloginfo( ‘description’ );　：　サイトのキャッチフレーズ
93. wp_head,wp_footer
94. wp_head,wp_footer • 絶対に入れておくべき関数 ◦ プラグインで使うcss,JavaScriptなどを出力する為にも使わ れる • wp_head ◦ headタグ内に各種タグを出力するなど… • wp_footer ◦ </body>直前に各種タグを出力するなど…
95. wp_head,wp_footer 「なにこれ、よくわかんないから消しちゃお」 追加したプラグインがうまく動かないなど、ハマる原 因になる
96. the_title
97. the_title • 投稿タイトルを出力
98. the_content
99. the_content • 投稿本文を出力
100. the_excerpt
101. the_excerpt • 投稿抜粋を出力 • 仕様では55単語を出力となっているが、日本語環 境だと単語の判断ができない • 「WP Multibyte Patch」を有効化することによって 本文の110文字までを出力
102. the_date,the_time
103. the_date,the_time • 日時を出力 • アーカイブページでthe_dateを使うときは注意が 必要 ◦ 同じ日付の投稿が複数ある場合、最初の投稿にだけ日付 が出力される • 全記事日付を出したい場合は the_time( ‘Y.m.d’ )のようにしたほうがいい
104. the_permalink
105. the_permalink • 投稿URLを出力
106. the_category,the_tags
107. the_category,the_tags • 投稿カテゴリー一覧、投稿タグ一覧出力 • 投稿に設定されているカテゴリー・タグを出力する
108. ほかにもたくさん https://wpdocs.osdn.jp/
109. 1. WordPressテーマ作りに必要なスキル 2. そもそもテーマってどう作る？ 3. テンプレートのお話 4. 「ループ」というものがある 5. テーマ作りでよく見る関数 6. ページごとにゴリッとコーディングしたいときは 7. 開発環境のおはなし 8. 開発に便利なプラグイン
110. デザインが決まっていて ゴリッとコーディングする場合
111. 管理画面からなんか書いてられない
112. 特定の固定ページにだけ適用する テンプレート
113. 特定の固定ページだけのレイアウト • 「page-[slug].php」というファイルを作る • カスタムページテンプレートを作る
114. page-[slug].php
115. page-[slug].php • 固定ページの「スラッグ」をファイ ル名に加える方法 • スラッグが「about」の場合、 「page-about.php」というファイル を作る
116. カスタムページテンプレート
117. カスタムページテンプレート • テンプレートファイルの先頭に 「Template Name: [テンプレート名]」をPHPコメントで書く • 管理画面からテンプレートを選択出来る
118. 1. WordPressテーマ作りに必要なスキル 2. そもそもテーマってどう作る？ 3. テンプレートのお話 4. 「ループ」というものがある 5. テーマ作りでよく見る関数 6. ページごとにゴリッとコーディングしたいときは 7. 開発環境のおはなし 8. 開発に便利なプラグイン
119. 開発環境の話
120. PC上に WordPressが動く環境を用意する
121. • MAMP • XAMPP • Local by Flywheel • VCCW • Wocker 　　　　　…などなど
122. 個人的には 「Local by Flywheel」がおすすめ
123. Local by Flywheel • 簡単な入力とボタン操作だけでOK • 複数サイトも作れる https://local.getflywheel.com/
124. 1. WordPressテーマ作りに必要なスキル 2. そもそもテーマってどう作る？ 3. テンプレートのお話 4. 「ループ」というものがある 5. テーマ作りでよく見る関数 6. ページごとにゴリッとコーディングしたいときは 7. 開発環境のおはなし 8. 開発に便利なプラグイン
125. 便利なプラグイン
126. Show Current Template
127. Show Current Template • 見ているページで使われているテンプレートを表 示してくれる
128. 本日のまとめ
129. • プログラムはちょっとできれば大丈夫！怖くない ◦ WordPressの関数を知ってればなんとかなる！ 　 • テーマを構成するテンプレートには役割がある！ ◦ 適したファイルを編集する！（最初は迷うけど） 　 • ページごとのテンプレートでガッツリコーディング ◦ ファイルに直接コーディングする方法もあります！
130. 「なんとなく自分にもできそうかも」
131. ありがとうございました！