Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
_sとBootstrapとSassを使って 
WordPressのテーマを作る 
2014年9月17日 
ゼロから始めるWordPress勉強会 
@コワーキングスペース茅場町 
中畑隆拓
_sとBootstrapとSassを使って 
WordPressのテーマを作る 
_sとBootstrapとSassと 
テスト用データとThemeCheckを使っ 
て 
WordPressのテーマを作る
自己紹介 
「なかちょんブログ」で検索 
http://blog.nakachon.com/
やろうとおもった理由 
• 今までオレオレ流で開発していたので、 
必要な機能をその都度作っていた 
• 納品したらThemeChcekが入っていて、そ 
の後、声がかからなかった 
• 「いつかやらなきゃ!」と思ってるとず 
るずるいっちゃう
説明 
• Bootstrap 
• Sass 
• _s 
• テスト用データ 
• ThemeCheck
_s(アンダースコア)とは? 
http://underscores.me/
_s(アンダースコア)とは? 
→ テーマ開発の元となるテーマ
説明 
• Bootstrap(後藤さんが説明) 
• Sass (小林さんが説明) 
• _s (自作テーマ用ベーステーマ) 
• テスト用データ→ サンプル記事 
• ThemeCheck → テーマチェック
今回やることのイメージ 
_s Bootstrap 
Theme Check 
テスト用データ 
WordPressのテーマ 
Sass 
スタイルシートPHP 
テーマの編集
流れ 
• テストデータの設定 
• _sテーマの設定 
• Bootstrap設定 
• Sass設定 
• style.scss 
• JSの設定( functions.php) 
• ナビメニューの設定 
• レイアウト設定
今日は、流れを説明することがメインです。 
後でみなさんが開発するときに 
このスライドを見て 
あ、ここのファイルを編集すればいいのか 
こういうふうにすればいいのか 
というようになればいいとおもっています
_sについて勉強するなら 
このサイト! 
Gatespace's Blog 
http://gatespace.jp/
テストデータのインポート
インポート用テストデータをダウンロード 
http://megumi-manuals.com/
テストデータのインポート
テストデータのインポート
テストデータのインポート
注意 
ダウンロードしたファイルは 
ZIPファイルなので 
解凍してからインポートしましょう 
test_data.zip → test-data-ja.xml
テストデータのインポート
テストデータのインポート
テストデータのインポート
テストデータのインポート
テストデータのインポート
_Sのインストール
_sのインストール 
英数字でテーマ名をいれる 
http://underscores.me/
_sのインストール 
Sass用テーマもできてたのです 
が、今回は普通のテーマで 
説明します。
_sのインストール 
wp-content/themes フォルダにいれます。
BootstrapのSass
githubからBootstrap-sassをダウン 
ロード 
https://github.com/twbs/bootstrap-sass
必要なファイル
assetsをテーマフォルダに移動
style.scssをつくりましょう
その前にテーマを切り替え
_sを適用した最初の状態
まずは、style.cssをコピーして 
style.scssにする
Sassのコマンド 
>sass –watch style.scss:style.css 
style.scssに変更があるとstyle.cssを上書きする
Bootstrapのscssを読み込む
style.scssにBootstrapのscss 
@import “assets/stylesheets/bootstrap”;
すると......
_sのstyle.cssには....
_sのReset.cssを消しましょう
すると...
前はこう
JavaScriptの読み込み
functions.phpに記述します
function.phpのdev_scripts()に記述
メニューバーの設定
WordPressのメニュー 
これを自分で設定するのはけっこう面倒!
wp-boostrap-navwalker 
を使います。 
https://github.com/twittem/wp-bootstrap-navwalker
wp_bootstrap_navwalker.phpを移動 
assets/incフォルダに移動するとよい
functions.phpに追加 
wp_bootstrap_navwalker.phpを 
読み込む
管理画面の外観メニューを設定
そのままだとこういう表示
header.phpを編集 
Bootstrapの書き方と 
wp_bootstrap_navwalkerの書き方
header.phpを編集
メニューバーが設定された 
サブメニューもいけちゃう!
レイアウトをつくる
header.php
classにcontainerを追加
headerのレイアウト完了!
header.php 
コンテンツ部分のレイアウト 
classにcontainerを追加
コンテンツ部分のレイアウト完了!
footer.php
footer.php 
classにcontainerを追加
footerのレイアウト完了!
2カラム・レイアウトをつくる
右側にサイドバーの2カラムにする
index.php 
div id=“primary”のclassに、col-md-8を記載
sidebar.php 
<div class=“col-md-4”> </div>で囲う
2カラムレイアウト完了!
レイアウトの設定他のファイル 
• index.php 
• page.php 
• single.php 
• archive.php 
( divではなくsectionになっているので注意)
おまけ
WordPressのメニューの 
色を変えたい!
bootstrapの 
scssファイルを編集 
Navbarのスタイルが書かれています 
テーマフォルダ/assets/stylesheets 
/bootstrap/_variables.scss
ThemeCheckプラグイン
テーマのチェックをしてくれます
まとめ
本日お話しした内容 
• テストデータの設定 
• _sテーマの設定 
• Bootstrap設定 
• Sass設定 
• style.scss 
• JSの設定( functions.php) 
• ナビメニューの設定 
• レイアウト設定...
本日の資料 
• このスライド 
http://www.slideshare.net/nakachong 
• 私が作ったテーマファイル 
(ちょっと追加されてます) 
http://goo.gl/t5Gv3s 
質問&要望あったら連絡ください...
 UnderScoreとbootstrapとsassでword pressのテーマをつくろう
 UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Upcoming SlideShare
Loading in …5
×

UnderScoreとbootstrapとsassでword pressのテーマをつくろう

12,601 views

Published on

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

Published in: Design
  • Dating direct: ❤❤❤ http://bit.ly/39pMlLF ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❶❶❶ http://bit.ly/39pMlLF ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

UnderScoreとbootstrapとsassでword pressのテーマをつくろう

  1. 1. _sとBootstrapとSassを使って WordPressのテーマを作る 2014年9月17日 ゼロから始めるWordPress勉強会 @コワーキングスペース茅場町 中畑隆拓
  2. 2. _sとBootstrapとSassを使って WordPressのテーマを作る _sとBootstrapとSassと テスト用データとThemeCheckを使っ て WordPressのテーマを作る
  3. 3. 自己紹介 「なかちょんブログ」で検索 http://blog.nakachon.com/
  4. 4. やろうとおもった理由 • 今までオレオレ流で開発していたので、 必要な機能をその都度作っていた • 納品したらThemeChcekが入っていて、そ の後、声がかからなかった • 「いつかやらなきゃ!」と思ってるとず るずるいっちゃう
  5. 5. 説明 • Bootstrap • Sass • _s • テスト用データ • ThemeCheck
  6. 6. _s(アンダースコア)とは? http://underscores.me/
  7. 7. _s(アンダースコア)とは? → テーマ開発の元となるテーマ
  8. 8. 説明 • Bootstrap(後藤さんが説明) • Sass (小林さんが説明) • _s (自作テーマ用ベーステーマ) • テスト用データ→ サンプル記事 • ThemeCheck → テーマチェック
  9. 9. 今回やることのイメージ _s Bootstrap Theme Check テスト用データ WordPressのテーマ Sass スタイルシートPHP テーマの編集
  10. 10. 流れ • テストデータの設定 • _sテーマの設定 • Bootstrap設定 • Sass設定 • style.scss • JSの設定( functions.php) • ナビメニューの設定 • レイアウト設定
  11. 11. 今日は、流れを説明することがメインです。 後でみなさんが開発するときに このスライドを見て あ、ここのファイルを編集すればいいのか こういうふうにすればいいのか というようになればいいとおもっています
  12. 12. _sについて勉強するなら このサイト! Gatespace's Blog http://gatespace.jp/
  13. 13. テストデータのインポート
  14. 14. インポート用テストデータをダウンロード http://megumi-manuals.com/
  15. 15. テストデータのインポート
  16. 16. テストデータのインポート
  17. 17. テストデータのインポート
  18. 18. 注意 ダウンロードしたファイルは ZIPファイルなので 解凍してからインポートしましょう test_data.zip → test-data-ja.xml
  19. 19. テストデータのインポート
  20. 20. テストデータのインポート
  21. 21. テストデータのインポート
  22. 22. テストデータのインポート
  23. 23. テストデータのインポート
  24. 24. _Sのインストール
  25. 25. _sのインストール 英数字でテーマ名をいれる http://underscores.me/
  26. 26. _sのインストール Sass用テーマもできてたのです が、今回は普通のテーマで 説明します。
  27. 27. _sのインストール wp-content/themes フォルダにいれます。
  28. 28. BootstrapのSass
  29. 29. githubからBootstrap-sassをダウン ロード https://github.com/twbs/bootstrap-sass
  30. 30. 必要なファイル
  31. 31. assetsをテーマフォルダに移動
  32. 32. style.scssをつくりましょう
  33. 33. その前にテーマを切り替え
  34. 34. _sを適用した最初の状態
  35. 35. まずは、style.cssをコピーして style.scssにする
  36. 36. Sassのコマンド >sass –watch style.scss:style.css style.scssに変更があるとstyle.cssを上書きする
  37. 37. Bootstrapのscssを読み込む
  38. 38. style.scssにBootstrapのscss @import “assets/stylesheets/bootstrap”;
  39. 39. すると......
  40. 40. _sのstyle.cssには....
  41. 41. _sのReset.cssを消しましょう
  42. 42. すると...
  43. 43. 前はこう
  44. 44. JavaScriptの読み込み
  45. 45. functions.phpに記述します
  46. 46. function.phpのdev_scripts()に記述
  47. 47. メニューバーの設定
  48. 48. WordPressのメニュー これを自分で設定するのはけっこう面倒!
  49. 49. wp-boostrap-navwalker を使います。 https://github.com/twittem/wp-bootstrap-navwalker
  50. 50. wp_bootstrap_navwalker.phpを移動 assets/incフォルダに移動するとよい
  51. 51. functions.phpに追加 wp_bootstrap_navwalker.phpを 読み込む
  52. 52. 管理画面の外観メニューを設定
  53. 53. そのままだとこういう表示
  54. 54. header.phpを編集 Bootstrapの書き方と wp_bootstrap_navwalkerの書き方
  55. 55. header.phpを編集
  56. 56. メニューバーが設定された サブメニューもいけちゃう!
  57. 57. レイアウトをつくる
  58. 58. header.php
  59. 59. classにcontainerを追加
  60. 60. headerのレイアウト完了!
  61. 61. header.php コンテンツ部分のレイアウト classにcontainerを追加
  62. 62. コンテンツ部分のレイアウト完了!
  63. 63. footer.php
  64. 64. footer.php classにcontainerを追加
  65. 65. footerのレイアウト完了!
  66. 66. 2カラム・レイアウトをつくる
  67. 67. 右側にサイドバーの2カラムにする
  68. 68. index.php div id=“primary”のclassに、col-md-8を記載
  69. 69. sidebar.php <div class=“col-md-4”> </div>で囲う
  70. 70. 2カラムレイアウト完了!
  71. 71. レイアウトの設定他のファイル • index.php • page.php • single.php • archive.php ( divではなくsectionになっているので注意)
  72. 72. おまけ
  73. 73. WordPressのメニューの 色を変えたい!
  74. 74. bootstrapの scssファイルを編集 Navbarのスタイルが書かれています テーマフォルダ/assets/stylesheets /bootstrap/_variables.scss
  75. 75. ThemeCheckプラグイン
  76. 76. テーマのチェックをしてくれます
  77. 77. まとめ
  78. 78. 本日お話しした内容 • テストデータの設定 • _sテーマの設定 • Bootstrap設定 • Sass設定 • style.scss • JSの設定( functions.php) • ナビメニューの設定 • レイアウト設定 • おまけ
  79. 79. 本日の資料 • このスライド http://www.slideshare.net/nakachong • 私が作ったテーマファイル (ちょっと追加されてます) http://goo.gl/t5Gv3s 質問&要望あったら連絡ください。 → ブログで書きます!(遅くなるかもしれませんが) http://blog.nakachon.com/

×