_sとBootstrapとSassを使って
WordPressのテーマを作る
2014年９月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

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

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

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

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

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

＿Ｓのインストール

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

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

＿ｓのインストール
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のレイアウト完了！

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

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

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

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

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

レイアウトの設定他のファイル
• 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
質問＆要望あったら連絡ください。
→ ブログで書きます！（遅くなるかもしれませんが）
http://blog.nakachon.com/