SlideShare a Scribd company logo
1 of 18
Download to read offline
WordPressとBootstrap 
株式会社ガリレオ 小山博史
自己紹介 
twitter: 
 @hiro345 
! 
blog: 
 http://www.sssg.org/blogs/hiro345/ 
! 
執筆: 
 @IT … Java, Eclipse, Android, C 
 日経Linux … Raspberry Pi, Java, Dart
内容 
WordPress 
Bootstrap 
WordPressテーマでのBootstrapの利用 
StaticPressの活用
WordPress 
PHPで実装されたCMS 
ブログ系Webサイト構築で大人気 
スタティックページの構築も可能 
ライセンス:GPL v2 
WordPress › 日本語: http://ja.wordpress.org/
Bootstrap 
CSSフレームワーク 
レスポンシブWebデザイン対応 
ライセンス:MITライセンス 
Bootstrap: http://getbootstrap.com/
WordPressのテーマ 
基本的な最小構成 
style.css … テーマのメタ情報とスタイル情報を記載 
index.php … ページの本体を出力するプログラム 
機能拡張に便利 
functions.php … 独自関数を定義したり、既存のテンプレートの処理をフックし 
て機能追加するといったカスタマイズに利用 
パーツ 
header.php … 共通のヘッダーを記述 
footer.php … 共通のフッターを記述
Bootstrapの入手 
Getting started · Bootstrap: 
http://getbootstrap.com/getting-started/ 
bootstrap-3.2.0-dist.zip … 配布用 
bootstrap-3.2.0.zip … 開発用ソースコード 
CDNを直接利用しても良い 
(ソースコードがあった方が確認がしやすい)
WordPress と Bootstrap
WordPressテーマ作成 
Bootstrapを使った独自テーマ 
Bootstrapのexampleにあるstarter-templateを 
参考する 
simple-bootstrapディレクトリを用意し、これ 
をWordPressの wp-content/themes/ に置く
WordPressテーマ構成 
… bootstrap-3.2.0.zipを展開したもの 
 参考のため入れただけで、なくても良い 
… bootstrap-3.2.0-dist.zipを展開したもの 
 *starter-template.css を下記から入手 
  bootstrap-3.2.0/docs/examples/starter-template/ 
! 
! 
! 
! 
! 
! 
… footer.php以下は自作 
simple-bootstrap 
|-- bootstrap-3.2.0 
(略) 
|-- bootstrap-3.2.0-dist 
| |-- css 
| | |-- bootstrap.css 
| | |-- bootstrap.css.map 
| | |-- bootstrap.min.css 
| | |-- bootstrap-theme.css 
| | |-- bootstrap-theme.css.map 
| | |-- bootstrap-theme.min.css 
| | `-- starter-template.css 
| |-- fonts 
| | |-- glyphicons-halflings-regular.eot 
| | |-- glyphicons-halflings-regular.svg 
| | |-- glyphicons-halflings-regular.ttf 
| | `-- glyphicons-halflings-regular.woff 
| `-- js 
| |-- bootstrap.js 
| `-- bootstrap.min.js 
|-- footer.php 
|-- functions.php 
|-- header.php 
|-- index.php 
`-- style.css
style.css 
@charset "utf-8"; 
/* 
Theme Name: bootstrap-simple 
Description: Bootstrapを使ったシンプルなテーマ。 
Version: 1.0 
License: The Open Software License 3.0 
License URI: http://www.opensource.org/licenses/OSL-3.0 
*/
functions.php 
<?php 
function get_bootstrap_uri($file_name) { 
return get_template_directory_uri() . '/bootstrap-3.2.0-dist/' . $file_name; 
} 
?> 
(関数化はしなくてもいいのですが、参考までに)
header.php 
<!DOCTYPE html> 
<html <?php language_attributes(); ?>> 
<head> 
<meta charset="<?php bloginfo( 'charset' ); ?>" /> 
<meta name="viewport" content="width=device-width" /> 
<title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title> 
<link type="text/css" 
href="<?php echo get_bootstrap_uri('css/bootstrap.min.css'); ?>" 
rel="stylesheet"> 
<link type="text/css" 
href="<?php echo get_bootstrap_uri('css/bootstrap-theme.min.css'); ?>" 
rel="stylesheet"> 
<link type="text/css" 
href="<?php echo get_bootstrap_uri('css/starter-template.css'); ?>" 
rel="stylesheet"> 
<link type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" 
rel="stylesheet" /> 
<?php wp_head(); ?> 
</head> 
<body>
footer.php 
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
</script> 
<script 
src="<?php echo get_bootstrap_uri('js/bootstrap.min.js'); ?>"> 
</script> 
<?php wp_footer(); ?> 
</body> 
</html>
index.php 
↓ header.phpの呼び出し 
<?php get_header(); ?> 
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
<div class="container"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle collapsed" 
data-toggle="collapse" data-target=".navbar-collapse"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" href="#">Project name</a> 
</div> 
(略) 
<div class="container"> 
<div class="starter-template"> 
<h1>Bootstrap starter template</h1> 
(略) 
</div> 
</div><!-- /.container --> 
<?php get_footer(); ?> 
↑ footer.phpの呼び出し 
*get_header()とget_footer()の間のコードは 
 starter-template/index.html からコピー
Bootstrap Starter の画面が出せました
StaticPress 
静的ファイルを出力するプラグイン 
WordPressをHTMLテンプレートエンジンとして活用で 
きるようになる 
WordPress+Bootstrapでページを作成、StaticPressで 
HTML生成、クラウドサービスへ転送して公開 
WordPress › StaticPress « WordPress Plugins: https:// 
wordpress.org/plugins/staticpress/
まとめ 
WordPressのテーマでBootstrapを利用する 
方法を紹介しました。 
StaticPressで静的HTMLを出力すること 
で、WordPressをテンプレートエンジンと 
して利用できることを紹介しました。

More Related Content

What's hot

WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニックWordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニックTakashi Uemura
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩Chieko Aihara
 
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoyatamotsu toyoda
 
Word press34
Word press34Word press34
Word press34BREN
 
What's new! TwentyThirteen + WordPress3.6
What's new! TwentyThirteen + WordPress3.6What's new! TwentyThirteen + WordPress3.6
What's new! TwentyThirteen + WordPress3.6Takashi Uemura
 
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編Hitsuji
 
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~hokori matu
 
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回Hitsuji
 
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回Hitsuji
 
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまでWordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまでTakashi Uemura
 
WordPressテーマ作成
WordPressテーマ作成WordPressテーマ作成
WordPressテーマ作成Takami Kazuya
 
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!hokori matu
 
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017hirokiky
 
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義EC-CUBEプラグイン講義
EC-CUBEプラグイン講義ria1201
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2Nishida Kansuke
 
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作るWordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作るTakashi Uemura
 
WordPressプラグイン作成入門
WordPressプラグイン作成入門WordPressプラグイン作成入門
WordPressプラグイン作成入門Yuji Nojima
 
Djangoフレームワークの紹介
Djangoフレームワークの紹介Djangoフレームワークの紹介
Djangoフレームワークの紹介Shinya Okano
 

What's hot (20)

WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニックWordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
 
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
 
Word press34
Word press34Word press34
Word press34
 
What's new! TwentyThirteen + WordPress3.6
What's new! TwentyThirteen + WordPress3.6What's new! TwentyThirteen + WordPress3.6
What's new! TwentyThirteen + WordPress3.6
 
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
 
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
 
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回
 
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
 
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまでWordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
 
WordPressテーマ作成
WordPressテーマ作成WordPressテーマ作成
WordPressテーマ作成
 
Pyramid入門
Pyramid入門Pyramid入門
Pyramid入門
 
後期02
後期02後期02
後期02
 
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
 
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
 
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
 
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作るWordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
 
WordPressプラグイン作成入門
WordPressプラグイン作成入門WordPressプラグイン作成入門
WordPressプラグイン作成入門
 
Djangoフレームワークの紹介
Djangoフレームワークの紹介Djangoフレームワークの紹介
Djangoフレームワークの紹介
 

Similar to WordPress と Bootstrap

Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」タカシ キタジマ
 
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発Twitterbootstrapでモック開発
Twitterbootstrapでモック開発Sosuke Kimura
 
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshopWordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshoptakashi ono
 
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法regret raym
 
Struts2を始めよう!
Struts2を始めよう!Struts2を始めよう!
Struts2を始めよう!Shinpei Ohtani
 
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作西畑 一馬
 
CodeIgniterによるPhwittr
CodeIgniterによるPhwittrCodeIgniterによるPhwittr
CodeIgniterによるPhwittrkenjis
 
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3editionRails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3editionSatomi Tsujita
 
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみようAlfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみようTasuku Otani
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップYasuhito Yabe
 
アプリコンテスト
アプリコンテストアプリコンテスト
アプリコンテストTomonori Yamada
 
Ruby on Rails Tutorial
Ruby on Rails TutorialRuby on Rails Tutorial
Ruby on Rails TutorialKen Iiboshi
 
Mvc conf session_2_shibamura
Mvc conf session_2_shibamuraMvc conf session_2_shibamura
Mvc conf session_2_shibamuraHiroshi Okunushi
 
WordBech Osaka No.28
WordBech Osaka No.28WordBech Osaka No.28
WordBech Osaka No.28Kite Koga
 
baserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアルbaserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアルRyuji Egashira
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Sho Ito
 
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsugSpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsugY Watanabe
 
第2回こけむさズword press部
第2回こけむさズword press部第2回こけむさズword press部
第2回こけむさズword press部Yuki Suzuki
 
20091030cakephphandson 01
20091030cakephphandson 0120091030cakephphandson 01
20091030cakephphandson 01Yusuke Ando
 

Similar to WordPress と Bootstrap (20)

Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
 
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
 
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshopWordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
 
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法
 
Struts2を始めよう!
Struts2を始めよう!Struts2を始めよう!
Struts2を始めよう!
 
Wp html5
Wp html5Wp html5
Wp html5
 
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
 
CodeIgniterによるPhwittr
CodeIgniterによるPhwittrCodeIgniterによるPhwittr
CodeIgniterによるPhwittr
 
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3editionRails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
 
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみようAlfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
アプリコンテスト
アプリコンテストアプリコンテスト
アプリコンテスト
 
Ruby on Rails Tutorial
Ruby on Rails TutorialRuby on Rails Tutorial
Ruby on Rails Tutorial
 
Mvc conf session_2_shibamura
Mvc conf session_2_shibamuraMvc conf session_2_shibamura
Mvc conf session_2_shibamura
 
WordBech Osaka No.28
WordBech Osaka No.28WordBech Osaka No.28
WordBech Osaka No.28
 
baserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアルbaserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアル
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
 
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsugSpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
 
第2回こけむさズword press部
第2回こけむさズword press部第2回こけむさズword press部
第2回こけむさズword press部
 
20091030cakephphandson 01
20091030cakephphandson 0120091030cakephphandson 01
20091030cakephphandson 01
 

WordPress と Bootstrap

  • 2. 自己紹介 twitter:  @hiro345 ! blog:  http://www.sssg.org/blogs/hiro345/ ! 執筆:  @IT … Java, Eclipse, Android, C  日経Linux … Raspberry Pi, Java, Dart
  • 3. 内容 WordPress Bootstrap WordPressテーマでのBootstrapの利用 StaticPressの活用
  • 4. WordPress PHPで実装されたCMS ブログ系Webサイト構築で大人気 スタティックページの構築も可能 ライセンス:GPL v2 WordPress › 日本語: http://ja.wordpress.org/
  • 5. Bootstrap CSSフレームワーク レスポンシブWebデザイン対応 ライセンス:MITライセンス Bootstrap: http://getbootstrap.com/
  • 6. WordPressのテーマ 基本的な最小構成 style.css … テーマのメタ情報とスタイル情報を記載 index.php … ページの本体を出力するプログラム 機能拡張に便利 functions.php … 独自関数を定義したり、既存のテンプレートの処理をフックし て機能追加するといったカスタマイズに利用 パーツ header.php … 共通のヘッダーを記述 footer.php … 共通のフッターを記述
  • 7. Bootstrapの入手 Getting started · Bootstrap: http://getbootstrap.com/getting-started/ bootstrap-3.2.0-dist.zip … 配布用 bootstrap-3.2.0.zip … 開発用ソースコード CDNを直接利用しても良い (ソースコードがあった方が確認がしやすい)
  • 9. WordPressテーマ作成 Bootstrapを使った独自テーマ Bootstrapのexampleにあるstarter-templateを 参考する simple-bootstrapディレクトリを用意し、これ をWordPressの wp-content/themes/ に置く
  • 10. WordPressテーマ構成 … bootstrap-3.2.0.zipを展開したもの  参考のため入れただけで、なくても良い … bootstrap-3.2.0-dist.zipを展開したもの  *starter-template.css を下記から入手   bootstrap-3.2.0/docs/examples/starter-template/ ! ! ! ! ! ! … footer.php以下は自作 simple-bootstrap |-- bootstrap-3.2.0 (略) |-- bootstrap-3.2.0-dist | |-- css | | |-- bootstrap.css | | |-- bootstrap.css.map | | |-- bootstrap.min.css | | |-- bootstrap-theme.css | | |-- bootstrap-theme.css.map | | |-- bootstrap-theme.min.css | | `-- starter-template.css | |-- fonts | | |-- glyphicons-halflings-regular.eot | | |-- glyphicons-halflings-regular.svg | | |-- glyphicons-halflings-regular.ttf | | `-- glyphicons-halflings-regular.woff | `-- js | |-- bootstrap.js | `-- bootstrap.min.js |-- footer.php |-- functions.php |-- header.php |-- index.php `-- style.css
  • 11. style.css @charset "utf-8"; /* Theme Name: bootstrap-simple Description: Bootstrapを使ったシンプルなテーマ。 Version: 1.0 License: The Open Software License 3.0 License URI: http://www.opensource.org/licenses/OSL-3.0 */
  • 12. functions.php <?php function get_bootstrap_uri($file_name) { return get_template_directory_uri() . '/bootstrap-3.2.0-dist/' . $file_name; } ?> (関数化はしなくてもいいのですが、参考までに)
  • 13. header.php <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width" /> <title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title> <link type="text/css" href="<?php echo get_bootstrap_uri('css/bootstrap.min.css'); ?>" rel="stylesheet"> <link type="text/css" href="<?php echo get_bootstrap_uri('css/bootstrap-theme.min.css'); ?>" rel="stylesheet"> <link type="text/css" href="<?php echo get_bootstrap_uri('css/starter-template.css'); ?>" rel="stylesheet"> <link type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" /> <?php wp_head(); ?> </head> <body>
  • 14. footer.php <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <script src="<?php echo get_bootstrap_uri('js/bootstrap.min.js'); ?>"> </script> <?php wp_footer(); ?> </body> </html>
  • 15. index.php ↓ header.phpの呼び出し <?php get_header(); ?> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> (略) <div class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1> (略) </div> </div><!-- /.container --> <?php get_footer(); ?> ↑ footer.phpの呼び出し *get_header()とget_footer()の間のコードは  starter-template/index.html からコピー
  • 17. StaticPress 静的ファイルを出力するプラグイン WordPressをHTMLテンプレートエンジンとして活用で きるようになる WordPress+Bootstrapでページを作成、StaticPressで HTML生成、クラウドサービスへ転送して公開 WordPress › StaticPress « WordPress Plugins: https:// wordpress.org/plugins/staticpress/
  • 18. まとめ WordPressのテーマでBootstrapを利用する 方法を紹介しました。 StaticPressで静的HTMLを出力すること で、WordPressをテンプレートエンジンと して利用できることを紹介しました。