2014/9/17にコワーキングスペース茅場町で開催された「ゼロから始めるWordPress勉強会」で使用した資料です。

1. _sとBootstrapとSassを使って
WordPressのテーマを作る
2014年９月17日
ゼロから始めるWordPress勉強会
＠コワーキングスペース茅場町
中畑隆拓

2. _sとBootstrapとSassを使って
WordPressのテーマを作る
_sとBootstrapとSassと
テスト用データとThemeCheckを使っ
て
WordPressのテーマを作る

3. 自己紹介
「なかちょんブログ」で検索
http://blog.nakachon.com/

4. やろうとおもった理由
• 今までオレオレ流で開発していたので、
必要な機能をその都度作っていた
• 納品したらThemeChcekが入っていて、そ
の後、声がかからなかった
• 「いつかやらなきゃ！」と思ってるとず
るずるいっちゃう

5. 説明
• Bootstrap
• Sass
• _s
• テスト用データ
• ThemeCheck

6. _s（アンダースコア）とは？
http://underscores.me/

7. _s（アンダースコア）とは？
→ テーマ開発の元となるテーマ

8. 説明
• Bootstrap（後藤さんが説明）
• Sass （小林さんが説明）
• _s （自作テーマ用ベーステーマ）
• テスト用データ→ サンプル記事
• ThemeCheck → テーマチェック

9. 今回やることのイメージ
_s Bootstrap
Theme Check
テスト用データ
WordPressのテーマ
Sass
スタイルシートPHP
テーマの編集

10. 流れ
• テストデータの設定
• _sテーマの設定
• Bootstrap設定
• Sass設定
• style.scss
• JSの設定( functions.php)
• ナビメニューの設定
• レイアウト設定

11. 今日は、流れを説明することがメインです。
後でみなさんが開発するときに
このスライドを見て
あ、ここのファイルを編集すればいいのか
こういうふうにすればいいのか
というようになればいいとおもっています

12. _sについて勉強するなら
このサイト！
Gatespace's Blog
http://gatespace.jp/

13. テストデータのインポート

14. インポート用テストデータをダウンロード
http://megumi-manuals.com/

15. テストデータのインポート

16. テストデータのインポート

17. テストデータのインポート

18. 注意
ダウンロードしたファイルは
ZIPファイルなので
解凍してからインポートしましょう
test_data.zip → test-data-ja.xml

19. テストデータのインポート

20. テストデータのインポート

21. テストデータのインポート

22. テストデータのインポート

23. テストデータのインポート

24. ＿Ｓのインストール

25. ＿ｓのインストール
英数字でテーマ名をいれる
http://underscores.me/

26. ＿ｓのインストール
Sass用テーマもできてたのです
が、今回は普通のテーマで
説明します。

27. ＿ｓのインストール
wp-content/themes フォルダにいれます。

28. BootstrapのSass

29. githubからBootstrap-sassをダウン
ロード
https://github.com/twbs/bootstrap-sass

31. 必要なファイル

32. assetsをテーマフォルダに移動

33. style.scssをつくりましょう

34. その前にテーマを切り替え

35. _sを適用した最初の状態

36. まずは、style.cssをコピーして
style.scssにする

37. Sassのコマンド
>sass –watch style.scss:style.css
style.scssに変更があるとstyle.cssを上書きする

38. Bootstrapのscssを読み込む

39. style.scssにBootstrapのscss
@import “assets/stylesheets/bootstrap”;

40. すると......

41. _sのstyle.cssには....

42. _sのReset.cssを消しましょう

43. すると...

44. 前はこう

45. JavaScriptの読み込み

46. functions.phpに記述します

47. function.phpのdev_scripts()に記述

48. メニューバーの設定

49. WordPressのメニュー
これを自分で設定するのはけっこう面倒!

50. wp-boostrap-navwalker
を使います。
https://github.com/twittem/wp-bootstrap-navwalker

51. wp_bootstrap_navwalker.phpを移動
assets/incフォルダに移動するとよい

52. functions.phpに追加
wp_bootstrap_navwalker.phpを
読み込む

53. 管理画面の外観メニューを設定

54. そのままだとこういう表示

55. header.phpを編集
Bootstrapの書き方と
wp_bootstrap_navwalkerの書き方

56. header.phpを編集

57. メニューバーが設定された
サブメニューもいけちゃう！

58. レイアウトをつくる

59. header.php

60. classにcontainerを追加

61. headerのレイアウト完了！

62. header.php
コンテンツ部分のレイアウト
classにcontainerを追加

63. コンテンツ部分のレイアウト完了！

64. footer.php

65. footer.php
classにcontainerを追加

66. footerのレイアウト完了！

67. ２カラム・レイアウトをつくる

68. 右側にサイドバーの２カラムにする

69. index.php
div id=“primary”のclassに、col-md-8を記載

70. sidebar.php
<div class=“col-md-4”> </div>で囲う

71. ２カラムレイアウト完了！

72. レイアウトの設定他のファイル
• index.php
• page.php
• single.php
• archive.php
( divではなくsectionになっているので注意）

73. おまけ

74. WordPressのメニューの
色を変えたい！

75. bootstrapの
scssファイルを編集
Navbarのスタイルが書かれています
テーマフォルダ/assets/stylesheets
/bootstrap/_variables.scss

76. ThemeCheckプラグイン

78. テーマのチェックをしてくれます

79. まとめ

80. 本日お話しした内容
• テストデータの設定
• _sテーマの設定
• Bootstrap設定
• Sass設定
• style.scss
• JSの設定( functions.php)
• ナビメニューの設定
• レイアウト設定
• おまけ

81. 本日の資料
• このスライド
http://www.slideshare.net/nakachong
• 私が作ったテーマファイル
（ちょっと追加されてます）
http://goo.gl/t5Gv3s
質問＆要望あったら連絡ください。
→ ブログで書きます！（遅くなるかもしれませんが）
http://blog.nakachon.com/