Contenu connexe
Similaire à WordPress と Bootstrap (20)
WordPress と Bootstrap
- 2. 自己紹介
twitter:
@hiro345
!
blog:
http://www.sssg.org/blogs/hiro345/
!
執筆:
@IT … Java, Eclipse, Android, C
日経Linux … Raspberry Pi, Java, Dart
- 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を直接利用しても良い
(ソースコードがあった方が確認がしやすい)
- 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>
- 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 からコピー