underscoreとbootstrapとsassでword pressのテーマをつくろう
DESCRIPTION
2014/9/17にコワーキングスペース茅場町で開催された「ゼロから始めるWordPress勉強会」で使用した資料です。TRANSCRIPT
_sと Bootstrapと Sassを使ってWordPressのテーマを作る
2014年9月 17日ゼロから始めるWordPress勉強会@コワーキングスペース茅場町
中畑隆拓
_sと Bootstrapと Sassとテスト用データと ThemeCheckを
使ってWordPressのテーマを作る
_sと Bootstrapと Sassを使って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ファイルを編集
テーマフォルダ /assets/stylesheets/bootstrap/_variables.scss
Navbarのスタイルが書かれています
ThemeCheckプラグイン
テーマのチェックをしてくれます
まとめ
本日お話しした内容
• テストデータの設定• _sテーマの設定• Bootstrap設定• Sass設定• style.scss • JSの設定 ( functions.php)• ナビメニューの設定• レイアウト設定• おまけ
本日の資料
•このスライドhttp://www.slideshare.net/nakachong
•私が作ったテーマファイル(ちょっと追加されてます)http://goo.gl/t5Gv3s
質問&要望あったら連絡ください。→ ブログで書きます!(遅くなるかもしれませんが)
http://blog.nakachon.com/