wordpress と bootstrap
Post on 29-Jun-2015
334 views
DESCRIPTION
WordPressのテーマをBootstrapを使って作成するために必要な最低限の知識を説明TRANSCRIPT
![Page 1: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/1.jpg)
WordPressとBootstrap株式会社ガリレオ 小山博史
![Page 2: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/2.jpg)
自己紹介
twitter: @hiro345 !blog: http://www.sssg.org/blogs/hiro345/ !執筆: @IT … Java, Eclipse, Android, C 日経Linux … Raspberry Pi, Java, Dart
![Page 3: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/3.jpg)
内容
WordPress
Bootstrap
WordPressテーマでのBootstrapの利用
StaticPressの活用
![Page 4: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/4.jpg)
WordPressPHPで実装されたCMS
ブログ系Webサイト構築で大人気
スタティックページの構築も可能
ライセンス:GPL v2
WordPress › 日本語: http://ja.wordpress.org/
![Page 5: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/5.jpg)
Bootstrap
CSSフレームワーク
レスポンシブWebデザイン対応
ライセンス:MITライセンス
Bootstrap: http://getbootstrap.com/
![Page 6: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/6.jpg)
WordPressのテーマ基本的な最小構成
style.css … テーマのメタ情報とスタイル情報を記載
index.php … ページの本体を出力するプログラム
機能拡張に便利
functions.php … 独自関数を定義したり、既存のテンプレートの処理をフックし
て機能追加するといったカスタマイズに利用
パーツ
header.php … 共通のヘッダーを記述
footer.php … 共通のフッターを記述
![Page 7: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/7.jpg)
Bootstrapの入手Getting started · Bootstrap: http://getbootstrap.com/getting-started/
bootstrap-3.2.0-dist.zip … 配布用
bootstrap-3.2.0.zip … 開発用ソースコード
CDNを直接利用しても良い
(ソースコードがあった方が確認がしやすい)
![Page 8: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/8.jpg)
![Page 9: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/9.jpg)
WordPressテーマ作成Bootstrapを使った独自テーマ
Bootstrapのexampleにあるstarter-templateを
参考する
simple-bootstrapディレクトリを用意し、これ
をWordPressの wp-content/themes/ に置く
![Page 10: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/10.jpg)
WordPressテーマ構成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
… bootstrap-3.2.0.zipを展開したもの
参考のため入れただけで、なくても良い … bootstrap-3.2.0-dist.zipを展開したもの
*starter-template.css を下記から入手
bootstrap-3.2.0/docs/examples/starter-template/
!!!!!!… footer.php以下は自作
![Page 11: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/11.jpg)
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 */
![Page 12: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/12.jpg)
functions.php<?php function get_bootstrap_uri($file_name) { return get_template_directory_uri() . '/bootstrap-3.2.0-dist/' . $file_name; } ?>
(関数化はしなくてもいいのですが、参考までに)
![Page 13: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/13.jpg)
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>
![Page 14: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/14.jpg)
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>
![Page 15: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/15.jpg)
index.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(); ?>
↓ header.phpの呼び出し
↑ footer.phpの呼び出し
*get_header()とget_footer()の間のコードは
starter-template/index.html からコピー
![Page 16: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/16.jpg)
Bootstrap Starter の画面が出せました
![Page 17: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/17.jpg)
StaticPress静的ファイルを出力するプラグイン
WordPressをHTMLテンプレートエンジンとして活用で
きるようになる
WordPress+Bootstrapでページを作成、StaticPressで
HTML生成、クラウドサービスへ転送して公開
WordPress › StaticPress « WordPress Plugins: https://wordpress.org/plugins/staticpress/
![Page 18: WordPress と Bootstrap](https://reader036.vdocument.in/reader036/viewer/2022062419/5590b1311a28abe4058b4648/html5/thumbnails/18.jpg)
まとめ
WordPressのテーマでBootstrapを利用する
方法を紹介しました。
StaticPressで静的HTMLを出力すること
で、WordPressをテンプレートエンジンと
して利用できることを紹介しました。