wordpress + bootstrap

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/

http://ja.wordpress.org/

Bootstrap

CSSフレームワーク

レスポンシブWebデザイン対応

ライセンス：MITライセンス

Bootstrap: http://getbootstrap.com/

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を直接利用しても良い

（ソースコードがあった方が確認がしやすい）

http://getbootstrap.com/getting-started/

WordPressテーマ作成Bootstrapを使った独自テーマ

Bootstrapのexampleにあるstarter-templateを

参考する

simple-bootstrapディレクトリを用意し、これ

をWordPressの wp-content/themes/ に置く

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> <?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/

https://wordpress.org/plugins/staticpress/

まとめ

WordPressのテーマでBootstrapを利用する

方法を紹介しました。

StaticPressで静的HTMLを出力すること

で、WordPressをテンプレートエンジンと

して利用できることを紹介しました。

wordpress + bootstrap

Technology