Submit Search
Upload
WordPress と Bootstrap
•
2 likes
•
700 views
株式会社ガリレオ(開発グループ)
Follow
WordPressのテーマをBootstrapを使って作成するために必要な最低限の知識を説明
Read less
Read more
Internet
Report
Share
Report
Share
1 of 18
Download Now
Download to read offline
Recommended
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
Nakazawa Yuichi
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
Takayuki Shimizukawa
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回
Hitsuji
ゼロからつくるWord pressテーマ第9回
ゼロからつくるWord pressテーマ第9回
Hitsuji
ゼロからつくるWord pressテーマ第7回
ゼロからつくるWord pressテーマ第7回
Hitsuji
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
Hitsuji
WordPressとjQuery
WordPressとjQuery
Seto Takahiro
More Related Content
What's hot
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
Takashi Uemura
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
tamotsu toyoda
Word press34
Word press34
BREN
What's new! TwentyThirteen + WordPress3.6
What's new! TwentyThirteen + WordPress3.6
Takashi Uemura
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
Hitsuji
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回
Hitsuji
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
Hitsuji
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
Takashi Uemura
WordPressテーマ作成
WordPressテーマ作成
Takami Kazuya
Pyramid入門
Pyramid入門
Atsushi Odagiri
後期02
後期02
Takenori Nakagawa
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
hokori matu
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
hirokiky
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Takashi Uemura
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
Djangoフレームワークの紹介
Djangoフレームワークの紹介
Shinya Okano
What's hot
(20)
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
Word press34
Word press34
What's new! TwentyThirteen + WordPress3.6
What's new! TwentyThirteen + WordPress3.6
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
WordPressテーマ作成
WordPressテーマ作成
Pyramid入門
Pyramid入門
後期02
後期02
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Djangoフレームワークの紹介
Djangoフレームワークの紹介
Similar to WordPress と Bootstrap
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
タカシ キタジマ
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
Sosuke Kimura
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
takashi ono
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法
regret raym
Struts2を始めよう!
Struts2を始めよう!
Shinpei Ohtani
Wp html5
Wp html5
regret raym
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
西畑 一馬
CodeIgniterによるPhwittr
CodeIgniterによるPhwittr
kenjis
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
Satomi Tsujita
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Tasuku Otani
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
アプリコンテスト
アプリコンテスト
Tomonori Yamada
Ruby on Rails Tutorial
Ruby on Rails Tutorial
Ken Iiboshi
Mvc conf session_2_shibamura
Mvc conf session_2_shibamura
Hiroshi Okunushi
WordBech Osaka No.28
WordBech Osaka No.28
Kite Koga
baserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアル
Ryuji Egashira
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Y Watanabe
第2回こけむさズword press部
第2回こけむさズword press部
Yuki Suzuki
20091030cakephphandson 01
20091030cakephphandson 01
Yusuke Ando
Similar to WordPress と Bootstrap
(20)
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法
Struts2を始めよう!
Struts2を始めよう!
Wp html5
Wp html5
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
CodeIgniterによるPhwittr
CodeIgniterによるPhwittr
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
アプリコンテスト
アプリコンテスト
Ruby on Rails Tutorial
Ruby on Rails Tutorial
Mvc conf session_2_shibamura
Mvc conf session_2_shibamura
WordBech Osaka No.28
WordBech Osaka No.28
baserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアル
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
第2回こけむさズword press部
第2回こけむさズword press部
20091030cakephphandson 01
20091030cakephphandson 01
WordPress と Bootstrap
1.
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 からコピー
16.
Bootstrap Starter の画面が出せました
17.
StaticPress 静的ファイルを出力するプラグイン WordPressをHTMLテンプレートエンジンとして活用で
きるようになる WordPress+Bootstrapでページを作成、StaticPressで HTML生成、クラウドサービスへ転送して公開 WordPress › StaticPress « WordPress Plugins: https:// wordpress.org/plugins/staticpress/
18.
まとめ WordPressのテーマでBootstrapを利用する 方法を紹介しました。
StaticPressで静的HTMLを出力すること で、WordPressをテンプレートエンジンと して利用できることを紹介しました。
Download Now