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

_sと Bootstrapと Sassを使ってWordPressのテーマを作る

2014年９月 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

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

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

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

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

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

＿Ｓのインストール

＿ｓのインストール

英数字でテーマ名をいれる

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ファイルを編集

テーマフォルダ /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/