WordCamp Tokyo 2017 登壇資料 https://2017.tokyo.wordcamp.org/

1. WordPressをこれから始める⼈人の
ためのテーマ講座
ver.1.0.0
{ Event: “WordCamp Tokyo 2017” };

2. ⾃自⼰己紹介
2
⾼高⾒見見 和也（Takami Kazuya）
h(ps://twi(er.com/miiitaka
h(ps://www.facebook.com/miiitaka
{ Company: “株式会社アラタナ” },
{ Role: “Front-‐‑‒End Developer 兼 ⼈人事” }
h(ps://github.com/miiitaka

3. WordPressへの貢献
3

4. 質問
4
Q. テーマ作成はむずかしいですか？

5. 回答
5
A. テーマ作成はむずかしくないです。

6. やった！作るぞ！
6
じゃあさっそく作りますね！

7. 落ち着きましょう
7
あわてないで。まずは構造を教えます。

8. WordPressの基本階層は以下のとおりです。⼤大きく3つのフォルダがあります。
テーマ⽤用のフォルダを作りましょう。
8
/wp-‐‑‒admin/
管理理画⾯面で使⽤用するファイルあれこれがあります。触らない。
/wp-‐‑‒content/
このフォルダの中で作業しましょう。
/wp-‐‑‒includes/
WordPress全体で使⽤用するJavaScriptやスタイルシート、コアファイルがあり
ます。これも触らない。
/
ルート直下は、ログイン関連やRSS関連、コメント、トラックバック、メール送受信⽤用
のファイルなどなど

9. wp-content フォルダのさらに中のお話。
WordPressの基本構造を理理解（ wp-‐‑‒content フォルダ ）
9
/wp-‐‑‒content/
/language/
⾔言語パック
/plugin/
インストールしたプラグインが保存されている場所
/themes/
各種テーマのテンプレートが保存されている場所
/upgrade/
バージョンアップ時に使⽤用。
/upload/
管理理画⾯面からアップロードしたメディアファイルが保存されている場所。
年年→⽉月でいい感じに保存されています。

10. wp-content フォルダのさらに中のお話。
WordPressの基本構造を理理解（ wp-‐‑‒content フォルダ ）
10
/wp-‐‑‒content/
/language/
⾔言語パック
/plugin/
インストールしたプラグインが保存されている場所
/themes/
各種テーマのテンプレートが保存されている場所
/upgrade/
バージョンアップ時に使⽤用。
/upload/
管理理画⾯面からアップロードしたメディアファイルが保存されている場所。
年年→⽉月でいい感じに保存されています。
このフォルダの中に
⾃自分⽤用のフォルダを
新規作成しましょう。

11. 質問
11
Q. 構造とか複雑じゃないんですか？

12. 回答
12
A. 構造はいたってシンプルです。

13. 必要なファイルは最低2つ。index.php と style.css 。
テーマに必要なファイル
13
/wp-‐‑‒content/
/language/
⾔言語パック
/plugin/
インストールしたプラグインが保存されている場所
/themes/sample-‐‑‒theme/
各種テーマのテンプレートが保存されている場所
/upgrade/
バージョンアップ時に使⽤用。
/upload/
管理理画⾯面からアップロードしたメディアファイルが保存されている場所。
年年→⽉月でいい感じに保存されています。
⾃自分⽤用のテーマフォ
ルダにファイルを
作成しましょう。

14. それぞれの役割
14
index.php
・全てのテンプレートの⽣生みの親
・何も書いていなくても存在する必要があります
style.css
・テーマのメインスタイルシート
・テーマの情報を記述します

15. Twenty Seventeen の例例
15
style.css にテーマ名や
バージョン情報などを
記載すると表⽰示される

16. さっそく作るぞ！
16
じゃあもうテーマ作成できますよね！

17. だから落落ち着いてください
17
あわてないで。最低って⾔言ったでしょ。

18. WordPress（CMS）のうま味を活かしましょう
18
ヘッダー
コンテンツ
フッター
サイドバー
コンテンツ
よくある画⾯面
レイアウト

19. 共通部分はパーツ化
19
ヘッダー
コンテンツ
フッター
サイドバー
コンテンツ
ページの共通
部分は分離離

20. テーマの基本構成（パーツテンプレートを理理解する）
20
パーツ パーツテンプレート パーツを呼び出す⽅方法
ヘッダー header.php <?php get_̲header(); ?>
フッター footer.php <?php get_̲footer(); ?>
サイドバー
sidebar.php
sidebar-‐‑‒content.php
<?php get_̲sidebar(); ?>
<?php get_̲sidebar( ʻ‘contentʼ’ ); ?>
コメント comments.php <?php comments_̲template(); ?>
検索索フォーム searchform.php <?php get_̲search_̲form(); ?>
※カスタム
main.php
main-‐‑‒sub.php
<?php get_̲template_̲part( ʻ‘mainʼ’ ); ?>
<?php get_̲template_̲part( ʻ‘mainʼ’, ʼ’subʼ’ ); ?>
※ カスタムパーツテンプレートは、main-‐‑‒sub.phpがなかったら、main.phpを読む優先順
位付けができるのが特徴

21. 対応するパーツテンプレート
21
ヘッダー header.php
コンテンツ
フッター footer.php
サイドバー
sidebar.php
コンテンツ
パーツテンプ
レートとして作
成

22. テンプレートでパーツテンプレートを読み込む
22
<?php get_̲header(); ?>
コンテンツ
<?php get_̲footer(); ?>
<?php
get_̲sidebar();
?>
コンテンツ
テンプレート
でパーツを取
得します
index.php

23. 今度度こそ作るぞ！
23
じゃあさっそくコーディングしますね！

24. あわてちゃダメです
24
ホームページしか作らない気なの？

25. テーマの基本構成（テンプレートを理理解する）
25
該当ページ 優先度度
HOMEページ
index.php
home.php
⽉月別ページ 2ページ⽬目
以降降が true
paged.php
archive.php
date.php
カテゴリーページ category.php category-‐‑‒id.php category-‐‑‒slug.php
タグページ tag.php tag-‐‑‒id.php tag-‐‑‒slug.php
タクソノミーペー
ジ
taxonomy.php taxonomy-‐‑‒tax.php
taxonomy-‐‑‒tax-‐‑‒
term.php
投稿タイプページ
archive-‐‑‒
posttype.php
ユーザーページ author.php author-‐‑‒id.php
author-‐‑‒
nicename.php
メディアページ
singular.ph
p
single.php
attachment.php MIME_̲type.php
記事ページ
single-‐‑‒
posttype.php
固定ページ page.php page-‐‑‒id.php page-‐‑‒slug.php custom.php
検索索結果ページ search.php
404ページ 404.php
低 ⾼高

26. テーマの基本構成（テンプレートを理理解する）
26
該当ページ 優先度度
HOMEページ
index.php
home.php
⽉月別ページ 2ページ⽬目
以降降が true
paged.php
archive.php
date.php
カテゴリーページ category.php category-‐‑‒id.php category-‐‑‒slug.php
タグページ tag.php tag-‐‑‒id.php tag-‐‑‒slug.php
タクソノミーペー
ジ
taxonomy.php taxonomy-‐‑‒tax.php
taxonomy-‐‑‒tax-‐‑‒
term.php
投稿タイプページ
archive-‐‑‒
posttype.php
ユーザーページ author.php author-‐‑‒id.php
author-‐‑‒
nicename.php
メディアページ
singular.ph
p
single.php
attachment.php MIME_̲type.php
記事ページ
single-‐‑‒
posttype.php
固定ページ page.php page-‐‑‒id.php page-‐‑‒slug.php custom.php
検索索結果ページ search.php
404ページ 404.php
低 ⾼高
通常はこの辺りを
作りますね。

27. 例例えばホームページ
27
header.php
home.php に記述
footer.php
sidebar.php
home.php に記述

28. 例例えば投稿ページ
28
header.php
single.php に記述
footer.php
sidebar.php

29. 例例えば404ページ
29
header.php
404.php に記述
footer.php

30. ここまで理理解できれば
30
header.php
404.php に記述
footer.php
各ページごとに
共通パーツを読
み込みましょう。

31. 質問
31
Q. どこから作り始めたらいいですか？

32. 回答（※好みの問題ですが……）
32
A. 共通テンプレートから作りましょう。

33. やるぞ！
33
では header.php から作りますね！

34. header.php
34
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-‐‑‒8">
<meta name="viewport" content="width=device-‐‑‒width, initial-‐‑‒scale=1">
<meta name="theme-‐‑‒color" content="#444444">
<title>てらこや.work | WordPressのテーマやプラグイン開発・JavaScriptなどのナレッジブログ</title>
<link rel='next' href='https://www.terakoya.work/page/2/' />
<link rel="canonical" href="https://www.terakoya.work/" />
<meta property="og:title" content="てらこや.work" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.terakoya.work/" />
<meta property="og:image" content="https://www.terakoya.work/wp-‐‑‒content/uploads/2017/01/logo.png" />
<meta property="og:site_̲name" content="てらこや.work" />
<meta property="og:description" content="WordPressのテーマやプラグイン開発・JavaScriptなどのナレッジブログ" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@miiitaka" />
<meta name="twitter:creator" content="@miiitaka" />
<meta name="twitter:domain" content="twitter.com/miiitaka" />
<meta name="twitter:title" content="てらこや.work" />
<meta name="twitter:description" content="WordPressのテーマやプラグイン開発・JavaScriptなどのナレッジブログ" />
<meta name="twitter:image" content="https://www.terakoya.work/wp-‐‑‒content/uploads/2017/01/logo.png" />
<link rel="alternate" type="application/rss+xml" title="てらこや.work &raquo; フィード" href="https://www.terakoya.work/feed/" />
<link rel="alternate" type="application/rss+xml" title="てらこや.work &raquo; コメントフィード" href="https://www.terakoya.work/
comments/feed/" />
<link rel='stylesheet' id='dashicons-‐‑‒css' href='https://www.terakoya.work/wp-‐‑‒includes/css/dashicons.min.css?ver=4.8.1' type='text/css'
media='all' />
<link rel='stylesheet' id='admin-‐‑‒bar-‐‑‒css' href='https://www.terakoya.work/wp-‐‑‒includes/css/admin-‐‑‒bar.min.css?ver=4.8.1' type='text/css'
media='all' />
<link rel='stylesheet' id='crayon-‐‑‒css' href='https://www.terakoya.work/wp-‐‑‒content/plugins/crayon-‐‑‒syntax-‐‑‒highlighter/css/min/
crayon.min.css?ver=_̲2.7.2_̲beta' type='text/css' media='all' />
<link rel='stylesheet' id='crayon…………………………………………………

35. 何をやっているんだい？
35

36. head 要素の例例
36
ヘッダー（ head 要素 ）に記述する主な内容
・⾔言語指定
・⽂文字コード指定
・title 要素
・viewport設定
・テーマカラー
・ナビゲーション系（ rel=“next” / rel=“prev” ）
・正規化（ rel=“canonical” ）
・RSSフィード指定
・Open Graph Protocol
・スタイルシート
・JavaScript（ jQuery など ）
・構造化マークアップ
・計測⽤用タグ（ Google Analytics など ）
・ファビコン

37. テーマ依存は避ける
37
ヘッダー（ head 要素 ）に記述する主な内容
・⾔言語指定
・⽂文字コード指定
・title 要素
・viewport設定
・テーマカラー
・ナビゲーション系（ rel=“next” / rel=“prev” ）
・正規化（ rel=“canonical” ）
・RSSフィード指定
・Open Graph Protocol
・スタイルシート
・JavaScript（ jQuery など ）
・構造化マークアップ
・計測⽤用タグ（ Google Analytics など ）
・ファビコン
テンプレートは
構造だけを意識識

38. 標準機能もしっかりしている
38
WordPressの標準機能でできることは任せる
・⾔言語指定
・⽂文字コード指定
・title 要素
・viewport設定
・テーマカラー
・ナビゲーション系（ rel=“next” / rel=“prev” ）
・正規化（ rel=“canonical” ）
・RSSフィード指定
・Open Graph Protocol
・スタイルシート
・JavaScript（ jQuery など ）
・構造化マークアップ
・計測⽤用タグ（ Google Analytics など ）
・ファビコン
外観→カスタマイズのサイ
ト基本情報で設定できます。

39. プラグインの活⽤用
39
プラグインでできることは任せる
・⾔言語指定
・⽂文字コード指定
・title 要素
・viewport設定
・テーマカラー
・ナビゲーション系（ rel=“next” / rel=“prev” ）※標準機能よりカスタマイズ性が⾼高い
・正規化（ rel=“canonical” ）※標準機能よりカスタマイズ性が⾼高い
・RSSフィード指定
・Open Graph Protocol
・スタイルシート
・JavaScript（ jQuery など ）
・構造化マークアップ
・計測⽤用タグ（ Google Analytics など ）
・ファビコン
Yoast SEO や
All in One SEOなど
どうでしょう？

40. プラグインの活⽤用
40
プラグインでできることは任せる
・⾔言語指定
・⽂文字コード指定
・title 要素
・viewport設定
・テーマカラー
・ナビゲーション系（ rel=“next” / rel=“prev” ）
・正規化（ rel=“canonical” ）
・RSSフィード指定
・Open Graph Protocol
・スタイルシート
・JavaScript（ jQuery など ）
・構造化マークアップ
・計測⽤用タグ（ Google Analytics など ）
・ファビコン
Markup (JSON-‐‑‒LD) structured
in schema.org どうでしょう？

41. テーマ関数を使⽤用する
41
テーマ関数ファイル functions.php に記述
・⾔言語指定
・⽂文字コード指定
・title 要素
・viewport設定
・テーマカラー
・ナビゲーション系（ rel=“next” / rel=“prev” ）
・正規化（ rel=“canonical” ）
・RSSフィード指定
・Open Graph Protocol
・スタイルシート
・JavaScript（ jQuery など ）
・構造化マークアップ
・計測⽤用タグ（ Google Analytics など ）
・ファビコン
テーマディレクトリ
に作りましょう。

42. header.php の例例
42
シンプルに記述するとこうなる
<!DOCTYPE html>
<html <?php language_̲attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-‐‑‒width, initial-‐‑‒scale=1">
<meta name="theme-‐‑‒color" content="#444444">
<?php wp_̲head(); ?>
</head>
<body <?php body_̲class(); ?>>
テンプレートは
シンプルに。

43. header.php の例例
43
wp_̲head() フックポイントを忘れずに
<!DOCTYPE html>
<html <?php language_̲attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-‐‑‒width, initial-‐‑‒scale=1">
<meta name="theme-‐‑‒color" content="#444444">
<?php wp_̲head(); ?>
</head>
<body <?php body_̲class(); ?>>
フックポイントを
必ず書きましょう

44. footer.php の例例
44
wp_̲footer() フックポイントを忘れずに
<?php wp_̲footer(); ?>
</body>
</html>
フックポイントを
必ず書きましょう

45. 質問
45
Q. フックポイントってなんですか？

46. 回答
46
A. 処理理を呼び出す場所だと思ってください。

47. 回答
47
フックポイントが存在しないと
それを利利⽤用したプラグインなどが
動作しません。

48. やるぞぉぉぉぉ！
48
わかりました！コーディングやります！

49. ⼈人の話は最後まで聞きましょう
49
テーマ関数ファイルの話が残っています。

50. テーマ関数ファイル（ functions.php ）を使⽤用する
50
テーマで使⽤用する機能や処理理を記述します。
・title 要素の使⽤用サポート
・フィードリンクの使⽤用サポート
・投稿フォーマット機能の追加
・投稿サムネイル機能の追加
・カスタム背景機能の追加
・カスタムヘッダー機能の追加
・カスタムロゴ機能の追加
・ウィジェットの編集ショートカット機能の追加（ver.4.5.0 から）
・スターター⽤用コンテンツ機能の追加（ver4.7.0 から）
・ウィジェットの使⽤用登録
・メニューの使⽤用登録
・使⽤用するスタイルシートの登録
・使⽤用するJavaScriptの登録
・独⾃自の処理理などをつらつらと追記……などなど。

51. やるぞぉぉぉぉぉぉぉぉぉ！
51
わかりました！もう⼤大丈夫です！

52. がんばりましょう
52
いいでしょう。

53. まとめ
53
まとめ

54. まとめ
54
・WordPressのテーマの構成を理理解した上で制作する。
・各ページの共通部分はテンプレート化してCMSのうま味を活かす。
・テーマ依存の機能はなるべく避ける。
・テーマとプラグインの住み分けが⼤大事。
・必要最低限の機能はきちんと実装する。（フックポイントなど）
・テーマ関数ファイルで実装できるものはそちらにまとめる。
・テンプレートはシンプルに構造だけを意識識する。
あとはチャレンジしてみることが⼤大事。

55. ご清聴ありがとうございました。
55
ありがとうございました。

56. テーマの作成（WordPress Codex ⽇日本語版）
https://wpdocs.osdn.jp/テーマの作成
WordPressサイトデザインリファレンス（WordPress Codex ⽇日本語版）
https://wpdocs.osdn.jp/WordPress_̲サイトデザイン_̲リファレンス
いらすとや
http://www.irasutoya.com/search/label/棒⼈人間
参考URL
56