Downloaded 54 times
Uploaded byTakahiro Nakahata
PPTX, PDF15,253 views
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
2014/9/17にコワーキングスペース茅場町で開催された「ゼロから始めるWordPress勉強会」で使用した資料です。
Recommended
More Related Content
More from Takahiro Nakahata
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 BootstrapTheme 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/