WordCamp Kansai 2015 テーマ作成ハンズオン再演。 _sに絞ってWordBench京都向けにリメイクしています。

1. WordPressはじめの一歩
テーマ作成ハンズオン
2015/08/02
WordBench京都

2. はじめに

3. 今日体験してほしいこと
• PHPの知識無しでもテーマは作れる
• テーマは全部自作しなくてもいい
• テーマ制作は思っているよりは簡単

4. 名前：岡本秀高
仕事：PHPエンジニア
地域：京都∼滋賀
その他：WordBench京都モデレーター
興味：WP-API, React.js, Polymer,JSON-LD

5. 一応公式テーマ作者です
https://profiles.wordpress.org/hideokamoto

6. アジェンダ
• テーマ作成３つの方法
• PHP知識なしでもテーマを作る方法
• _sを使った作成の流れ
• トラブルシューティング
• より踏み込んだカスタマイズへ
全体的に増量してます！

7. アジェンダ
• テーマ作成３つの方法
• PHP知識なしでもテーマを作る方法
• _sを使った作成の流れ
• トラブルシューティング
• より踏み込んだカスタマイズへ

8. テーマの作り方は
１つじゃない

9. テーマ作成３つの方法
• フルスクラッチ
• 子テーマ
• スターターテーマ

10. テーマ作成３つの方法
• フルスクラッチ
• 子テーマ
• スターターテーマ

11. フルスクラッチで作る
一からデザインを作成し、
作成したHTMLにWordPressを実装させる作り方
• メリット：自由度MAX
• デメリット：PHP知識必要

12. テーマ作成３つの方法
• フルスクラッチ
• 子テーマ
• スターターテーマ

13. 子テーマとして作る
既にあるテーマを活用し、
「子テーマ」として機能を上書きする作り方
• メリット：編集範囲が少なく済む
• デメリット：親テーマに仕様が依存しやすい

14. テーマ作成３つの方法
• フルスクラッチ
• 子テーマ
• スターターテーマ

15. スターターテーマで作る
最低限のPHPが実装されたテーマに
CSSでデザインを追加する作り方
• メリット：PHP知識が無くても作れる
• デメリット：スターターテーマの仕様に依存、
英語

16. 高野さんによるまとめ
作成方法 長所 短所
スクラッチ開発 コントロールできる 制作に時間が掛かる
子テーマ
素早く機能を
取り入れられる
親テーマへの依存が
大きい
スターターテーマ 学習しやすい
元テーマの更新を
継承しない
http://ja.naoko.cc/2012/12/02/wordpress-theme-development-approach/

17. アジェンダ
• テーマ作成３つの方法
• PHP知識なしでもテーマを作る方法
• _sを使った作成の流れ
• トラブルシューティング
• より踏み込んだカスタマイズへ

18. PHPが書けなくても
テーマは作れる

19. スターターテーマでテーマを作る
スターターテーマを使えば、
必要なPHPが った状態でテーマ制作が可能
• _s：http://underscores.me/
• bones：http://themble.com/bones/
など

20. What about _s？

21. _s(underscores)
Automatticが作ったスターターテーマ
テーマに必要なPHPファイルが一式 っている
CSSが書ければオリジナルテーマが作れる

22. https://wordpress.org/themes/hew/

23. https://wordpress.org/themes/cinnamon/

24. https://wordpress.org/themes/business-leader/

25. アジェンダ
• テーマ作成３つの方法
• PHP知識なしでもテーマを作る方法
• _sを使った作成の流れ
• トラブルシューティング
• より踏み込んだカスタマイズへ

26. _sの中身と使い方を
簡単にご紹介

27. 1_sのセットアップ

28. _sのセットアップ
1. テーマファイルを作成
2. 開発環境へインストール
3. テーマの有効化

29. _sのセットアップ
1.テーマファイルを作成
2. 開発環境へインストール
3. テーマの有効化

30. http://underscores.me/

31. テーマファイルを作成する
• 基本設定は_sのDLページで設定可能
• とりあえず使ってみる場合なら、
「Theme Name」を入力するだけ
• 細かい設定は「Advanced Options」をクリック

32. テーマ名を入れて クリック！

34. Advanced Options
• スラッグ・作者・説明文を入力できる
• スラッグは関数同士の衝突回避に使われる
twentyeleven_foo() 、twentyten_foo() など
• 入力したらGENERATEでダウンロード開始

35. _sのセットアップ
1. テーマファイルを作成
2.開発環境へインストール
3. テーマの有効化

36. 開発環境へアップロード
• 先ほどDLしたzipを管理画面からアップロード
• テーマ一覧に表示されればOK
• テストデータを入れておくと便利
http://nuuno.net/note/wordpress-testdata/

37. クリック！

38. 先ほどDLしたzipファイルを
アップロードしよう

39. _sのセットアップ
1. テーマファイルを作成
2. 開発環境へインストール
3.テーマの有効化

40. 「有効化」

42. 2知って得する
_sの内部構造

43. No.１
テンプレート階層
知って得する_sの内部構造

44. テンプレート階層
archive.php single.php page.php404.php search.php
index.php
アーカイブ
カテゴリ
タグ
著者
etc..
個別投稿
メディア
ブログ
カスタム投稿
etc..
404ページ 固定ページ 検索結果
TOPページや
下記以外のページ

45. 詳細はCodexで
http://bit.ly/1Lfpj7u

46. No.２
テンプレートパーツ
知って得する_sの内部構造

47. _sでは、
パーツ別にPHPが
分割されている

48. header.php
sidebar.php
content.php
footer.php
comment.php

49. content.phpは
更に細分化されている

50. コンテンツ階層
content-
none.php
content-
single.php
content-
search.php
content-
page.php
content.php
該当記事なし
index.php
search.php
archive.php
個別投稿
single.php
固定ページ
page.php
検索結果
search.php
下記に該当しない
コンテンツ

51. No.３
カスタム要素
知って得する_sの内部構造

52. その他のカスタム要素
• jsディレクトリ：_sデフォルトのJS置き場
• layoutディレクトリ：レイアウト用CSS置き場
• languagesディレクトリ：翻訳ファイル置き場
• incディレクトリ：拡張機能置き場

53. jsディレクトリ
_sにデフォルトで使用されている
JavaScriptファイルなどがある

54. jsディレクトリ
• skip-link-focus-fix.js：
• customizer.js ：
• navigation.js ：

55. jsディレクトリ
• skip-link-focus-fix.js：バグFIX（っぽい）
• customizer.js ：カスタマイザー用JS
• navigation.js ：ドロップダウンナビ用JS

56. layoutsディレクトリ
レイアウト調整用CSSが
ちょっとだけ入ってるディレクトリ

57. layoutsディレクトリ
• content-sidebar.css：
• sidebar-content.css：

58. layoutsディレクトリ
• content-sidebar.css：サイドバーを右に置くCSS
• sidebar-content.css：サイドバーを左に置くCSS
中身をstyle.cssにコピペでもOK

59. languagesディレクトリ
翻訳ファイルがここに入ってます

60. _sは基本英語
「カテゴリ」や「タグ」「コメント」は、
日本語で表示させたい・・・！

61. http://bit.ly/1NlLeuS
からja.moをDL

62. ja.moをlanguagesディレクトリへ

63. ja.moで翻訳完了！
これが・・・

64. ja.moで翻訳完了！
こうなる
↓翻訳の詳細（GitHub）↓
http://bit.ly/1KfIvmK

65. incディレクトリ
オプション機能やカスタマイズ機能が
まとめられているディレクトリ

66. incディレクトリ
• custom-header.php：
• customizer.php ：
• extras.php ：
• jetpack.php ：
• template-tags.php ：

67. incディレクトリ
• custom-header.php：「ヘッダー画像」関係
• customizer.php ：「カスタマイザー」関係
• extras.php ：クラスやtitle拡張
• jetpack.php ：Jetpackの無限スクロール対応
• template-tags.php ：テンプレートタグ拡張

68. その他
• rtl.css：SSCの用語言く書らか右

69. 3テーマに
スタイルをつける

70. テーマにスタイルをつける
1. 基本的なスタイル調整方法
2. ＜休憩＞
3. とりあえずみんなで触ってみよう
4. WordPressならではのクラスを活用する

71. テーマにスタイルをつける
1.基本的なスタイル調整方法
2. ＜休憩＞
3. とりあえずみんなで触ってみよう
4. WordPressならではのクラスを活用する

72. 基本的なスタイル調整方法
• Chromeやfirefoxの開発ツールを利用しよう
• 調整方法は通常のHTMLファイルと一緒
• WordPressならではのクラスを使って条件分け

73. Chrome開発ツールの場合
Mac:[Option]キー + [command]キー + [i]キー
Win: F12

74. Chrome開発ツールの場合
赤枠内にCSSを書いていく

75. 最後にstyle.cssに
転記して保存しよう

76. ちょっとだけ
Live Demo

77. テーマにスタイルをつける
1. 基本的なスタイル調整方法
2.＜休憩＞
3. とりあえずみんなで触ってみよう
4. WordPressならではのクラスを活用する

78. 今の間に
_sを有効化させてね
ヽ(・ ・ )ﾉ

79. テーマにスタイルをつける
1. 基本的なスタイル調整方法
2. ＜休憩＞
3.とりあえずみんなで触ってみよう
4. WordPressならではのクラスを活用する

80. とりあえずみんなで触ってみよう
1. サイトを２カラムにする
2. 記事部分のスタイルを調整する
3. ヘッダーまわりにスタイルを追加する
4. アイキャッチ画像をサイトに表示させる

81. サイトを
２カラムにする

82. サイトを２カラムにする
layoutsディレクトリのCSSを、style.cssにコピペ

83. サイトを２カラムにする
content-sidebar.cssなら右サイドバー
sidebar-content.cssなら左サイドバーになる

84. サイトを２カラムにする
ついでに左右に余白を設けよう

85. サイトを２カラムにする
bodyか.siteにCSSを追加する

86. サイトを２カラムにする
.site {
max-width: 1024px;
margin: 0 auto;
}
style.cssに追加

87. 記事部分の
スタイルを調整する

88. 記事部分のスタイルを調整する
記事部分に余白と枠線をつけてみる

89. 記事部分のスタイルを調整する
.hentryにCSSを書き足そう

90. 記事部分のスタイルを調整する
.hentry {
margin: 0 0 1.5em;
padding: 20px;
border: 1px solid #e5e5e5;
}
style.cssの770行目近辺を探そう

91. 記事部分のスタイルを調整する
サイドバーとの余白も調整する

92. 記事部分のスタイルを調整する
.site-main {
margin: 0 25% 0 0;
padding: 10px;
}
style.cssに追加する

93. ヘッダーまわりに
スタイルを追加する

94. 下層ページでタイトルがpタグになる
デフォルトだとTOPと下層でスタイルがバラバラに・・・

95. .site-titleクラスを使ってスタイル調整

96. 記事部分のスタイルを調整する
.site-title{
font-size: 2rem;
font-weight: bold;
margin: 0.5em auto;
}
.site-title,.site-description {
text-align: center;
}
style.cssの一番下に書き足せばOK

97. ついでにナビゲーションも

98. ナビゲーションを調整する
.main-navigation ul {
background-color: #ffffff;
border-top: 1px solid #f5f5f5;
}
.main-navigation li {
border-left: 1px solid #f5f5f5;
border-right: 1px solid #f5f5f5;
}
.main-navigation li:first-child{
border-left: 0px;
}
.main-navigation a {
padding: 10px;
}
header{
border-bottom: 1px solid #f5f5f5;
}
style.cssの一番下に書き足せばOK

99. サイトっぽくなってきた

100. アイキャッチ画像を
サイトに表示させる

101. template-parts/content.php
<?php
/**
* Template part for displaying posts.
*
* @package _s
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_post_thumbnail();?>
10-11行目の間に書き足そう

102. 記事タイトルの上に
アイキャッチ画像が表示される

103. こんな調子でCSSを
いじっていくと・・・

104. 例えばこんな感じになる

105. なんやかんやしたstyle.css
http://bit.ly/1KALb08

106. テーマにスタイルをつける
1. 基本的なスタイル調整方法
2. ＜休憩＞
3. とりあえずみんなで触ってみよう
4. WordPressならではのクラスを活用する

107. WordPressならではのクラスを活用する
• 動的にクラスを出す箇所が複数ある
• body_class()やpost_class()で設定する
• 上手く活用すれば記事別にスタイルを変更できる！

108. WordPressならではのクラスを活用する
• 特定のタグの投稿のみ非表示
.tag-投稿タグのスラッグ{ display:none;}
• 検索結果ページのみ赤文字に
.search-results{ color:red}
• 先頭固定記事のみ黒背景
.sticky{ background-color: black}

109. クラスの出力サンプルをもっと知る
Codexにサンプルがいろいろ載ってます！
• body_class
http://wpdocs.osdn.jp/テンプレートタグ/body_class
• post_class
http://wpdocs.osdn.jp/テンプレートタグ/post_class

110. アジェンダ
• テーマ作成３つの方法
• PHP知識なしでもテーマを作る方法
• _sを使った作成の流れ
• トラブルシューティング
• より踏み込んだカスタマイズへ

111. トラブルシューティング
1. jQueryが使えない！
2. functions.php触ったら真っ白になった！
3. レイアウトが思ったとおりにならない！

112. jQueryが使えない！
• WordPress本体のjQueryでは「$」が使えない
• 他のJSライブラリとの衝突を回避するため
• 「jQuery」か無名関数でラップして使おう

113. jQueryが使えない！
(function($){
$('#foo').click();
})(jQuery);

114. functions.php触ったら真っ白になった！
• functions.phpにPHPエラーが出ると管理画面も死ぬ
• functions.phpは必ずバックアップを（git推奨）
• ローカルでテストしてから本番反映しよう

115. レイアウトが思ったとおりにならない！
• CSSのミスかも・・・？
• 意図したテンプレートが読まれていない可能性あり
• テンプレート階層を見直そう：http://bit.ly/1Lfpj7u

116. アジェンダ
• テーマ作成３つの方法
• PHP知識なしでもテーマを作る方法
• _sを使った作成の流れ
• より踏み込んだカスタマイズへ

117. _sを安全にいじる
たった１つの原則

118. 自信がないなら
PHPは使わない

119. オリジナルPHPは使わない
• オリジナルPHPを使うとセキュリティがつらい
echo とか echo とか echoとか
• PHPを書くならテンプレートタグで
http://wpdocs.osdn.jp/テンプレートタグ
• ヘッダー画像はコピペでできる

120. inc/custome-header.php
8-12行目をコピーしよう！

121. header.php
コピーしたPHPを貼り付けよう！

122. ヘッダー画像が表示された！

123. JavaScriptやCSSを
追加で読み込みさせるなら

124. wp_enqueue_script()
wp_enqueue_style()

125. 外部ファイルは
wp_head()かwp_footer()
で読み込む

126. 任意のJSを追加する場合
function theme_name_scripts() {
wp_enqueue_script(
'script-name',
get_template_directory_uri() . '/js/example.js',
array(),
'1.0.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
赤文字部分をファイル名やファイルパスに書き換えればOK

127. 任意のCSSを追加する場合
function theme_name_style() {
wp_enqueue_style(
'style-name',
get_stylesheet_uri(). ‘css/origin.css’
);
}
add_action( 'wp_enqueue_scripts', 'theme_name_style' );
赤文字部分をファイル名やファイルパスに書き換えればOK

128. プラグインでも使うので、
wp_enqueue_scriptと
wp_enqueue_styleは
覚えておくと便利b

129. enjoy !