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の活用
WordPressPHPで実装された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を使った独自テーマ
Bootstrapのexampleにあるstarter-templateを
参考する
simple-bootstrapディレクトリを用意し、これ
をWordPressの wp-content/themes/ に置く
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以下は自作
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<?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 からコピー
Bootstrap Starter の画面が出せました
StaticPress静的ファイルを出力するプラグイン
WordPressをHTMLテンプレートエンジンとして活用で
きるようになる
WordPress+Bootstrapでページを作成、StaticPressで
HTML生成、クラウドサービスへ転送して公開
WordPress › StaticPress « WordPress Plugins: https://wordpress.org/plugins/staticpress/
まとめ
WordPressのテーマでBootstrapを利用する
方法を紹介しました。
StaticPressで静的HTMLを出力すること
で、WordPressをテンプレートエンジンと
して利用できることを紹介しました。