WordPressブログカスタマイズ今日から本気出す

2018年6月23日 第7回 東北ブロガー会 ～PHPファイルチャレンジワークショップ～での発表資料

Transcript

1. WordPressブログカスタマイズ 今日から本気出す 2018.06.23 東北ブロガー会 #7
2. はじめに
3. 本日のスライドは 写真撮影・SNSへのアップOKです！
4. 「#東北ブロガー会」 でシェアしてください！
5. 自己紹介
6. - 尾形 義暁（おがた よしあき） - フリーランス - WordPress / CSS / HTML - Twitter : @yosiakatsuki
7. 群馬を中心に活動する Webエンジニア 　 フリーランス x 会社員
8. 活動
9. - WordBench Gunma（群馬県） - WordPressもくもく勉強会@本庄（埼玉県）
10. ブログ向け無料WordPressテーマ
11. 今日お話すること
12. • カスタマイズは準備が大事 • HTML・CSS・PHP基礎 • WordPressテーマの構造 • テーマのカスタマイズは子テーマを使う • カスタマイズができるようになるには？
13. カスタマイズできると こんなことができる！
14. カスタマイズできるとこんなことができる！ • 自分だけのブログデザイン • 全ページにイベント告知差し込み • 広告を自由な位置に調整できる • Page Speed Insights対策できる …などなど
15. WordPressテーマ カスタマイズの流れ
16. カスタマイズの流れ • カスタマイズしたいファイルを見つける • 追加したい内容をHTML・PHPで追記 • 装飾をCSSファイルに追記 • サーバーへアップロード
17. カスタマイズの流れ やることは実は単純
18. カスタマイズの流れ でも 本気になったら
19. カスタマイズの流れ • ガツガツカスタマイズできる環境の準備 • カスタマイズしたいファイルを見つける • 追加したい内容をHTML・PHPで追記 • 装飾をCSSファイルに追記 • サーバーへアップロード
20. 「環境」？
21. 管理画面から カスタマイズできるでしょ？
22. 管理画面からのカスタマイズは オススメできない！
23. オススメできない理由 • 編集ミスでサイト真っ白 \ｵﾜﾀ/ • 途中放置できない • PC上にWordPressが動く環境を用意するのが簡 単になった（ローカル環境）
24. 編集ミスでサイト真っ白 WordPress 4.9でミスを防ぐ機能が追加 → それでも壊れることはある（やる気になれば壊せる）
25. 途中放置できない • 中途半端でもそのままにしておく → サイトの表示も中途半端な状態に… • 「中途半端になるから元に戻そう…」 → またカスタマイズやり直し…？
26. ローカル環境の準備が簡単になった • 以前より練習環境の準備が簡単に • サイトが止まってあたふたするより 「ちょっとの手間」で準備をしっかり！
27. ローカル環境の準備が簡単になった 「失敗し放題」環境があなたのすぐそばに！
28. WordPressテーマ カスタマイズ準備・便利ツール
29. ローカル環境
30. ローカル環境 • PC上で動くWordPress • 「ローカル環境」「開発環境」とか呼ばれる
31. ローカル環境 サーバー上のWordPressとは別世界 → いくら失敗しても本番サイトが止まらない！
32. ローカル環境 • 「Local by flywheel」が簡単操作で 環境作れて便利！（複数サイトもOK！）
33. エディター
34. エディター • コードの補完機能とか追加できて便利 • Visual Studio Codeあたりが軽くてオススメ
35. Chromeデベロッパーツール
36. Chromeデベロッパーツール • ブラウザ上でCSSを試しに変えられる • 試す→コピペ！でカスタマイズが捗る
37. FTPソフト
38. FTPソフト • サーバー上のテーマをダウンロード/アップロード • 「FileZilla」などいろいろ
39. 子テーマ
40. 本気でカスタマイズするなら 子テーマを使おう
41. 子テーマ？ • 親テーマのレイアウトを引き継ぐ 親テーマ 子テーマ
42. 子テーマのカスタマイズ • カスタマイズしたい部分のファイルだけを編集 → カスタマイズした場所がわかりやすい！ single.php 親テーマ 子テーマ ... single.php
43. 子テーマを使う理由 • テーマの更新はテーマ一式まとめて更新 → カスタマイズ内容が吹き飛ぶ 親テーマ 更新前 更新後 single.php single.php’
44. 子テーマを使う理由 • 子テーマ内のファイルは更新の影響を受けない 子テーマ 更新前 更新後 single.php single.php
45. WordPressテーマ カスタマイズの手順
46. カスタマイズ手順 1. 事前準備・環境構築 2. カスタマイズ実施 3. サーバーアップロード
47. 1. 事前準備 • 開発環境整備 • エディター準備 • FTPソフトの準備 • 本番サイトのコピー
48. 開発環境準備 • ローカル環境作成 参考 : https://yosiakatsuki.net/blog/wp-local-by-flywheel/
49. エディター準備 • 「[エディタ名] WordPress」で調べると設定方法と か見つかる
50. FTPソフトの準備 • ソフトのインストール • サーバーへ接続できることの確認
51. 本番サイトのコピー • 「All in One WP Migration」が便利 • 無料版は容量に制限あり
52. 本番サイトのコピー • 容量オーバーの場合画像を除外 →画像はFTPで別途ダウンロードする
53. 2. カスタマイズ実施
54. 3. サーバーアップロード
55. 開発環境が出来た ↓ ひたすらカスタマイズ
56. 失敗を繰り返して 徐々にカスタマイズが上手になる
57. いくらでも失敗できる環境で たくさん失敗を繰り返そう！
58. ローカル環境は もう簡単に作れるようになった！
59. 準備のお話おわり
60. ここからは より技術的なお話
61. デザインカスタマイズのお話
62. ページに表示されている部分
63. HTML・CSS
64. HTML・CSS 文書構造 装飾
65. HTML・CSS 骨組み 壁紙 イメージ
66. HTML基礎
67. HTML基礎 • 「HTMLタグ」を使って書く • 開始タグ「<タグ>」、終了タグ「</タグ>」 <div> 文章などをくくる </div>
68. HTML基礎 • 開始タグ〜終了タグではないものもある <img src=”画像URL” />
69. HTML基礎 • HTMLタグにはそれぞれ意味がある <img src=”画像” /> <p>段落</p> <a href=””>リンク</a> <h1>見出し</h1> <blockquote>引用</blockquote>
70. HTML基礎 • 特別な意味を持たないタグもある <div> ~~ </div> <span> ~~ </span>
71. HTML基礎 • できるだけ意味のあるタグを使う • 装飾はCSSで <h2> 見出し </h2> <p> 段落 </p>
72. 「意味のあるタグ」 って…わからないよ〜
73. ですよね… 難しいです。ここらへん
74. HTML基礎 • 考えすぎてカスタマイズが止まるくらいなら divとspanを使いましょう！ <div> ~~ </div> <span> ~~ </span>
75. 「意味」を考えることは忘れずに
76. CSS基礎
77. CSS基礎 • 「どこに」「何を」「どれくらい」装飾するか指定する p { font-size: 16px; }
78. CSS基礎 p { font-size: 16px; } どこに(セレクタ) なにを(プロパティ) どれくらい(値)
79. HTMLとCSSを組み合わせる
80. HTMLとCSSを組み合わせる • HTMLをCSSで装飾する方法 ◦ HTMLタグに装飾 ◦ id指定で装飾 ◦ class指定で装飾
81. HTMLとCSSを組み合わせる • HTMLをCSSで装飾する方法 ◦ HTMLタグに装飾 ◦ id指定で装飾 ◦ class指定で装飾
82. 「id」と「class」
83. 「id」と「class」 • HTMLタグに「id」や「class」で名前をつけたり分類 分けすることができる <div id=”site-footer”> …... </div> <div class=”footer-sns”> …... </div>
84. 「id」と「class」 • 「id」で該当のHTMLタグに名前をつける • ページ内で同じidが複数登場するのはNG <div id=”[id名その1]”>...</div> <div id=”[id名その2]”>...</div>
85. <div id=”[id名その1]”>...</div> <div id=”[id名その2]”>...</div> 「id」と「class」 • 1つのHTMLには1つのidしか指定できない
86. 「id」と「class」 • 「class」で該当のHTMLタグを分類分け • classはページ内で何度登場してもOK <div class=”[class-1]”>...</div> <div class=”[class-1]”>...</div>
87. 「id」と「class」 • 1つのHTMLに複数のclassが指定できる • スペース区切りでclassを複数指定する <div class=”class-1 class-2 class-3”>...</div>
88. HTMLとCSSを組み合わせる • HTMLをCSSで装飾する方法 ◦ HTMLタグに装飾 ◦ id指定で装飾 ◦ class指定で装飾
89. HTMLタグに装飾
90. HTMLをCSSで装飾する方法 : HTMLタグに装飾 • ページ内に登場する該当タグ全部に影響 • 特定の場所のスタイル指定には向かない p { font-size: 16px; }
91. id指定で装飾
92. HTMLをCSSで装飾する方法 : id指定で装飾 • HTMLの「id」属性と対応付ける • セレクタは「#[id名]」と書く #site-footer { color: #fff; } <div id=”site-footer”> …... </div>
93. HTMLをCSSで装飾する方法 : id指定で装飾 • idはページ内で1つしか書けないルール • class指定のほうがオススメ #site-footer { color: #fff; } <div id=”site-footer”> …... </div>
94. class指定で装飾
95. HTMLをCSSで装飾する方法 : class指定で装飾 • HTMLの「class」属性と対応付ける • セレクタは「.[class名]」と書く .footer-sns { color: #ddd; } <div class=”footer-sns”> …... </div>
96. HTMLをCSSで装飾する方法 : class指定で装飾 • HTMLとCSSの紐づけは classを使うことが多い .footer-sns { color: #ddd; } <div class=”footer-sns”> …... </div>
97. HTML・CSSカスタマイズ手順
98. HTML・CSSカスタマイズ手順 1. 追加したい内容をHTMLで追記 2. HTMLにclassをつける 3. CSSで該当のclassを装飾する
99. HTML・CSSカスタマイズ手順 例 イベント告知を表示してみる
100. 1. 追加したい内容をHTMLで追記 • まずはHTMLで表示したい内容を書く <div> <a href="url">6/23（土）仙台で〜〜くれよな！</a> </div>
101. 1. 追加したい内容をHTMLで追記
102. 2. HTMLにclassをつける • HTMLにclassをつける <div class=”event-link”> <a href="url">6/23（土）仙台で〜〜くれよな！</a> </div>
103. .event-link { margin: 2em 0; padding: 2em; border: 2px solid #ddd; border-radius: 4px; font-weight: bold; text-align: center; } 3. CSSで該当のclassを装飾する • CSSで装飾する
104. 3. CSSで該当のclassを装飾する
105. 3. CSSで該当のclassを装飾する Chromeのデベロッパーツールを使って 確認しながらやると便利！！
106. 全部のHTMLに classが付けられるわけではない
107. 全部のHTMLにclassが付けられるわけではない • class「event-link」の中のaタグを 装飾したい <div class=”event-link”> <a href="url">文章</a> </div>
108. 全部のHTMLにclassが付けられるわけではない • 入れ子で指定もできる • 上の例は「event-link」の中の「a」 .event-link a { color : red; } <div class=”event-link”> </div> <a> 　 ここを装飾 </a>
109. もっと詳しくは 専門の書籍かGoogle先生に聞いてみる
110. PHPカスタマイズ
111. WordPressテーマはPHPで作られている WordPressは「PHP」というプログラムを使って作られ ている テーマの中身もほぼPHP
112. WordPressテーマはPHPで作られている PHPファイル内にHTMLとPHPのコードが 混ざって書かれている
113. PHP
114. 「プログラムを覚える」 と聞くと難しい？
115. 「PHPという競技のルールを覚える」 ではどうでしょう？
116. PHP基礎 「<?php」〜「?>」の間にPHPのコードを書く <?php ~~ ?>
117. PHP基礎 <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header>
118. PHP基礎 命令の最後は「;」(セミコロン) <?php $keisan = 1 + 1; ?> 「;」付け忘れで エラーになることがよくある
119. PHP基礎 「/*」から「*/」の間はコメント PHPの命令として扱われない <?php /* ここで計算する */ $keisan = 1 + 1; ?>
120. PHP基礎 「//」を書くと、「//」から行の終わりまで コメントになる <?php // ここから1行のおわりまでコメントになる $keisan = 1 + 1; ?>
121. PHP基礎 カスタマイズした内容の説明をメモしておくと 未来の自分が喜ぶ <?php // 未来の自分へのメッセージ $keisan = 1 + 1; ?>
122. WordPressテーマの話
123. テーマってどこにあるの？
124. wp-content themes twentyseventeen WordPressのインストールフォルダ wp-admin wp-config.php …
125. テーマはパーツをつなぎ合わせて 作られている
126. テーマはパーツをつなぎ合わせて作られている • ヘッダー • フッター • サイドバー • 固定ページ • 投稿ページ • …
127. テーマはパーツをつなぎ合わせて作られている • ヘッダー • フッター • サイドバー • 固定ページ • 投稿ページ • … : header.php : footer.php : sidebar.php : page.php : single.php
128. 「テンプレート」 と言われている
129. テンプレートには役割がある
130. テンプレートには役割がある • ヘッダー • フッター • サイドバー • … : header.php : footer.php : sidebar.php
131. テンプレートには役割がある • 固定ページ • 投稿ページ • アーカイブ • 検索一覧 • 404ページ • … : page.php : single.php : archive.php : search.php : 404.php …
132. カスタマイズしたいページの 役割を担うテンプレートを編集する
133. テンプレートには役割がある 投稿記事下に特集リンクを足したい ↓ single.phpを編集
134. テンプレートには優先順位がある
135. テンプレートには優先順位がある https://wpdocs.osdn.jp/テンプレート階層
136. テンプレートには優先順位がある 例：カテゴリー一覧ページ category.php ↓ archive.php ↓ index.php
137. 最初は どのテンプレートが使われてるか さっぱりわかんない
138. テーマカスタマイズの強い味方 「Show Current Template」プラグイン
139. テーマカスタマイズの強い味方 読み込まれているテンプレートを表示
140. テンプレートの呼び出し方
141. テンプレートの呼び出し方 header.php footer.php sidebar.php
142. テンプレートの呼び出し方 header.php footer.php single.php sidebar.php get_header() get_sidebar() get_footer() ※single.phpから呼び出す
143. 独自のテンプレートを作る
144. 独自のテンプレートを作る single.phpなど基本テンプレート以外に 独自のテンプレートを作りたい sns-button.php
145. 独自のテンプレートを作る 1. テーマ内にPHPファイルを作る 2. 必要な場所から呼び出す sns-button.php my-theme
146. 独自のテンプレートを作る 必要な場所から呼び出す get_template_part()
147. 独自のテンプレートを作る • 括弧の中に読み込むPHPファイルの名前を書く ◦ フォルダで整理されていたら「フォルダ名/ファイル名」で書く • 「.php」は削除する get_template_part()
148. 独自のテンプレートを作る get_template_part( ‘sns-button’ ) sns-button.php my-theme
149. 独自のテンプレートを作る get_template_part( ‘template-parts/sns-button’ ) sns-button.php my-theme template-parts
150. パーツごとにテンプレートを分けると 後々の変更が楽になる！
151. 「functions.php」は？
152. functions.phpは 表示には直接関係しないことが多い
153. テーマ内で使う 「関数」を書くファイル
154. 「関数」 処理をひとまとめにしたもの
155. functions.php <?php function my_function( $foo ) { return $foo; } // 「?>」がないけどそういうものです
156. functions.php 「functions.phpにコードをコピペ」は ほとんど場合 functions.php の末尾にコピペ
157. functions.php 「functions.phpのどの位置に…」 という指定はほぼ無い
158. functions.php = 関数のまとまり 　 それ以外 = ページの表示
159. WordPressテーマカスタマイズで よく見る関数
160. テーマカスタマイズでよく見る関数 • the_title() ◦ 投稿タイトルを出力 • the_content() ◦ 投稿本文を出力
161. テーマカスタマイズでよく見る関数 • the_post_thumbnail() ◦ アイキャッチを出力 • the_permalink() ◦ 投稿URLを出力
162. テーマカスタマイズでよく見る関数 • get_template_directory_uri() ◦ テーマフォルダまでのURLを取得 ◦ CSSの追加読み込みなどでよく使う
163. 他にもたくさん https://wpdocs.osdn.jp/
164. テーマカスタマイズは 子テーマを使おう！
165. 子テーマの作り方
166. 子テーマが配布されていれば 一番ラク
167. wp-content themes twentyseventeen twentyseventeen-child 親テーマ 子テーマ
168. twentyseventeen-child functions.php style.css 最低でもこの 2ファイルが必要
169. style.css /* Theme Name: Twenty Seventeen Child Template: twentyseventeen */ Theme Name: [子テーマの名前] Template: [親テーマのフォルダ名]
171. なん………だと…
172. functions.php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
173. でました！
174. 子テーマカスタマイズ
175. themes twentyseventeen twentyseventeen-child single.php single.php 同じファイルを 子テーマにコピー
176. themes twentyseventeen twentyseventeen-child content.php content.php フォルダ階層を 合わせる template-parts template-parts
177. themes twentyseventeen twentyseventeen-child sns.php sns.php 独自テンプレートは 子テーマだけでOK
178. いったいどうやったら カスタマイズできるようになるのか？
179. たくさん練習したら できるようになる
180. 「いや…そう言いましても…」
181. 「目的」をもつ
182. 「目的」をもつ • 広告を自由な位置に調整してガッツリ儲ける！ • 他人と一緒のデザインなんて絶対に嫌だ！
183. 目的に対する意識が強いほどいい
184. 意識が高まったら
185. まずは「転び方」から覚える
186. スキーや柔道は 転び方や受け身から学びますよね
187. ブログカスタマイズも 失敗から学ぶことが多い
188. でも… 動いてるサイトで転ぶと
189. ブログが止まる
190. だから「ローカル環境」が大事
191. いくら壊しても大丈夫なら いくらでも失敗できる
192. 失敗 ↓ なんでや！？ ↓ ここがいけなかったのか！ ↓ 出来たー！！
193. これの繰り返し
194. 近道は無い
195. ただ、便利なサービスはある！
196. 便利なサービス プログラム学習サイトを使うのもアリ
197. ひたすらググるのもいいでしょう ※ちなみに僕はひたすらググり倒しました
198. まずは コードのコピペ + 調整 が難なくできるまで慣れる
199. 慣れてきたら 次はCodexを読めるようにがんばる
200. わからない言葉は調べる 「配列」ってなんぞ？
201. サンプルコードが分かれば 「脱コピペ」でカスタマイズできる
202. カスタマイズ上達への道 • やりたいことを達成するまでめげない！ • たくさん書いてたくさん失敗する！ • わからないことがあれば調べる！ • 調べてもわからなければ誰かに聞いてみる！ • 勉強会・もくもく会とかあれば参加してみる！
203. カスタマイズでブログ運営が より豊かになりますように
204. ありがとうございました！