Bootstrap3

Bootstrap3.3.5で作るWordPressページの基本構造

Templates of WordPress for Bootstrap3.3.5

Pocket

基本構造を記述します

index.php と各パーツテンプレートを使って、ページの基本構造(ヘッダー・コンテンツ・サイドバー・フッター)を記述します。ヘッダーはheader.php、コンテンツはcontent.php、サイドバーはsidebar.php、フッターはfooter.phpに記述します。
index.phpには各パーツテンプレートを読み込むコードを、header.phpにはエンコードの種類などの指定を記述します。

header.phpを準備する

header.php記載例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title('|', true, 'right'); bloginfo('name');?></title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<div id="container-fluid">

header.phpの詳細

2行目、3行目

if (isset($_SERVER['HTTP_USER_AGENT']) && (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false))
header('X-UA-Compatible: IE=edge,chrome=1');

IEで閲覧している場合の対策です。IE利用環境の場合は、Google Chrome Frameで表示します。Google Chrome Frameとは、IEでGoogle Chrome相当のレンダリングエンジンを利用可能にするIEのプラグインです。
Google Chrome Frameがインストールされていない場合は、IEの利用可能な最新のレンダリングエンジンで表示します。

Google Chrome Frameはサービスが終了したので削除し、5行目に以下のコードを追加します。

5行目

<meta http-equiv="X-UA-Compatible" content="IE=edge">

4行目

<meta charset="<?php bloginfo( 'charset' ); ?>" />

エンコードの種類を出力するためのテンプレートタグです。

6行目

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

モバイルファーストを実践:スマートフォン向けに最適なページが出力されるためのタグです。

7行目

<title><?php wp_title('|', true, 'right'); bloginfo('name');?></title>

bloginfo(‘name’)はブログのタイトルを出力するテンプレートタグです。wp_title(‘|’, true, ‘right’)はページごとのタイトルを出力するテンプレートタグですが、因数により ページのタイトル | ブログのタイトル という形式でタイトルタグが設定されます。

8行目

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

bootstrap.min.css をCDNを利用して読み込みます。Bootstrapをダウンロードして利用する場合は下記のように記載します。cssフォルダ名は各自環境に合わせて読み替えてください。

<link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" rel="stylesheet" media="screen">

get_template_directory_uri()は有効化しているテンプレートディレクトリの URI を取得するテンプレートタグです。子テーマを使用している場合は、親テーマのディレクトリのURIを取得します。子テーマのディレクトリを取得するにはget_stylesheet_directory_uri()を使用します。

9行目

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

アイコンフォントの Font Awesome をCDNを利用して読み込みます。

10行目

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />

独自に設定するスタイルシートを読み込むテンプレートタグです。下記の例のようにbloginfo(‘stylesheet_url’)を利用している例もよく見かけますが、echo get_stylesheet_uri()関数の出力を用いることが推奨されています。

非推奨例

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

11行目

<?php wp_head(); ?>

テーマ作成時に必ず記述すべきテンプレートタグが<?php wp_head(); ?>です。このテンプレートタグを記載することによって管理バーが表示されます。管理バー以外にもメタタグの出力やJavascriptの読み込みなどWordPressがHTMLを自動的に出力するために必要です。

13行目

<body <?php body_class(); ?>>

表示するページの種類などによってbodyに自動的にクラスを付加してくれるテンプレートタグがbody_class()です。このタグを記載することによって、WordPressは現在のページの情報をclass名で出力してくれます。

15行目

<div id="container-fluid">

Bootstrap の Grid systemを設定するにあたり必ず記載しておかなければならないタグが<div id=”container-fluid”>または<div id=”container”>です。
Bootstrapはレスポンシブなデザインで画面の大きなデスクトップからスマートフォンまで対応しますが<div id=”container”>(fixed-width)を利用すると画面サイズが最大幅1170pxで以下三段階に縮小します。<div id=”container-fluid”>(full-width)は最大幅の制限がなく画面にあわせたフルサイズでシームレスに縮小します。どちらのタグでも左右の余白(左右とも15px)が設定されます。

footer.phpを準備する

footer.php記載例

<div id="footer">
<div class="text-center">
<small>Copyright &copy; Bootstrap Guidebook All Rights Reserved.</small>
</div>

</div><!-- end of #footer -->
</div><!-- #container-fluid -->
<!--[if lt IE 9]>
//IE8以下のHTML5とレスポンシブ対応
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" type="text/javascript"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" type="text/javascript"></script>
<![endif]-->
<!--bootstrap minified JavaScriptの読み込み-->
<script src="////netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<?php wp_footer(); ?>
</body>
</html>

footer.phpの詳細

2行目、3行目

<div class="text-center">
<small>Copyright &copy; <?php bloginfo(name) ?> All Rights Reserved.</small>
</div>

コピーライトを記載します。bootstrap.cssで指定されているクラスclass=”text-center”で中央揃えを実現します。

10行目

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" type="text/javascript"></script>

IE8以前のブラウザにも、HTML5のタグを認識させるためのライブラリを読み込ませます。

11行目

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" type="text/javascript"></script>

Media Queriesに非対応のIE8以前のブラウザでレスポンシブなデザインを実現させるためのライブラリを読み込ませます。

14行目

<script src="////netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

BootstrapのJavascriptを読み込ませます。

15行目

<?php wp_footer(); ?>

テーマ作成時に必ず記述すべきテンプレートタグが<?php wp_footer(); ?>です。このテンプレートタグを記載することによってプラグインで定義したスクリプトなどが出力されます。

functions.phpを準備する

functions.php記載例

<?php

/* jQuery の読み込み */
function add_my_scripts() {
    if(is_admin()) return; //管理画面ではスクリプトは読み込まない
    wp_deregister_script( 'jquery'); //デフォルトの jQuery は読み込まない
    //CDN から読み込む
    wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.4/jquery.min.js', array(), '1.11.4', false);
    wp_enqueue_script( 'jquery-mig', '//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js', array(), '1.2.1', false);
    }
    add_action('wp_print_scripts', 'add_my_scripts');

// ウィジェットエリア
register_sidebar(array(
'name' => 'サイドバー',
'before_title' => '<p>',
'after_title' => '</p>',
));

functions.phpの詳細

4行目〜11行目

/* jQuery の読み込み */
function add_my_scripts() {
    if(is_admin()) return; //管理画面ではスクリプトは読み込まない
    wp_deregister_script( 'jquery'); //デフォルトの jQuery は読み込まない
    //CDN から読み込む
    wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.4/jquery.min.js', array(), '1.11.4', false);
    wp_enqueue_script( 'jquery-mig', '//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js', array(), '1.2.1', false);
    }
    add_action('wp_print_scripts', 'add_my_scripts');

Bootstrap3 を使用するにはjQueryライブラリが必要になります。WordPressにデフォルトで同梱されているjQueryライブラリは利用せずに、functions.phpでCDNより読み込むように設定します。

14行目〜18行目

// ウィジェットエリア
register_sidebar(array(
'name' => 'サイドバー',
'before_title' => '<p>',
'after_title' => '</p>',
));

ウィジェットの機能を有効にして、サイドバーに表示するメニューを管理画面で指定できるようにします。「サイドバー」という名称のウィジェットエリアを作成します。

デフォルトではウィジェットのタイトルは<h2>タグで表示されます。SEO対策上<h2>は好ましくないので<p>タグにウィジェットのタイトルを変更します。

sidebar.phpを準備する

sidebar.php記載例

<div id="sidebar">
	<ul id="menu">
		<?php dynamic_sidebar('サイドバー'); ?>
	</ul>
</div><!-- #sidebar -->

functions.php で設定したウィジェットエリアが出力されます。

content.phpを準備する

content.php記載例

<?php if(have_posts()): while(have_posts()): the_post(); ?>
        <div>
            <?php
            if ( is_single() ) :
            the_title( '<h1>', '</h1>' ); 
            the_content();
            else :
            the_title( '<h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
            the_excerpt(); 
            endif;
            ?>    

        </div><!-- .post -->
<?php endwhile; endif; ?>

投稿記事を表示する設定を記載します。
単独ページの場合はタイトルを<h1>タグで囲んで表示します。トップページやアーカイブページでは<h2>タグで囲まれたタイトルにリンクを張ったうえで抜粋記事を表示します。

index.phpを準備する

index.php記載例

<?php get_header(); ?>

<div class="container-fluid">

<div class="row">
    <div class="col-md-9">
        <?php get_template_part('content'); ?>
    </div>
    <div class="col-md-3">
        <?php get_sidebar(); ?>
    </div>
</div><!-- .raw -->

<?php get_footer(); ?>

1行目

<?php get_header(); ?>

header.phpを読み込ませます。

7行目

<?php get_template_part('content'); ?>

content.phpを読み込ませます。

10行目

<?php get_sidebar(); ?>

sidebar.phpを読み込ませます。

14行目

<?php get_footer(); ?>

sidebar.phpを読み込ませます。

3行目〜12行目

<div class="container-fluid">

<div class="row">
    <div class="col-md-9">
        <?php get_template_part('content'); ?>
    </div>
    <div class="col-md-3">
        <?php get_sidebar(); ?>
    </div>
</div><!-- .raw -->

Bootstrap3 の Grid sytem を使用してコンテンツとサイドバーを配置します。

Bootstrap3 の Grid sytem の説明は次回の投稿で行います。