Downloaded 54 times
Uploaded byTakahiro Nakahata
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
2014/9/17にコワーキングスペース茅場町で開催された「ゼロから始めるWordPress勉強会」で使用した資料です。
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
- 1. _sとBootstrapとSassを使って WordPressのテーマを作る 2014年９月17日 ゼロから始めるWordPress勉強会 ＠コワーキングスペース茅場町 中畑隆拓
- 2. _sとBootstrapとSassを使って WordPressのテーマを作る _sとBootstrapとSassと テスト用データとThemeCheckを使っ て WordPressのテーマを作る
- 3.
- 4. やろうとおもった理由 • 今までオレオレ流で開発していたので、 必要な機能をその都度作っていた • 納品したらThemeChcekが入っていて、そ の後、声がかからなかった • 「いつかやらなきゃ！」と思ってるとず るずるいっちゃう
- 5. 説明 • Bootstrap • Sass • _s • テスト用データ • ThemeCheck
- 6.
- 7.
- 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'sBlog http://gatespace.jp/
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. 注意 ダウンロードしたファイルは ZIPファイルなので 解凍してからインポートしましょう test_data.zip → test-data-ja.xml
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37. Sassのコマンド >sass –watchstyle.scss:style.css style.scssに変更があるとstyle.cssを上書きする
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70. sidebar.php <div class=“col-md-4”></div>で囲う
- 71.
- 72. レイアウトの設定他のファイル • index.php • page.php • single.php • archive.php ( divではなくsectionになっているので注意）
- 73.
- 74.
- 75. bootstrapの scssファイルを編集 Navbarのスタイルが書かれています テーマフォルダ/assets/stylesheets /bootstrap/_variables.scss
- 76.
- 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/