更新日: 2016年12月14日
WordPress

WordPressをTwitter Bootstrapでレスポンシブデザイン対応

WordPress で運営しているブログを Twitter Bootstrap を用いて、レスポンシブデザインに対応する Tips です。Bootstrap を用いると、比較的簡単に WordPress をモバイル対応のレスポンシブデザインにできます。

Bootstrap The world’s most popular mobile-first and responsive front-end framework.

— 環境 —
WordPress 4
Twitter Bootstrap 3.3.7

Twitter Bootstrap ダウンロードと設置

Twitter Bootstrap をダウンロードして、以下に設置します。


/path/to/wordpress_theme/lib/bootstrap-3.3.7-dist

/path/to/wordpress_theme/lib/bootstrap-3.3.7-dist

WordPress テーマを git 管理していれば、lib フォルダを .gitignore に追加。

.gitignore


/lib

/lib

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

functions.php で Bootstrap 用の CSS/JS 呼び出しをエンキュー

wp_enqueue_style(), wp_enqueue_script() 関数でスタイル/スクリプトをキューに追加する関数を作成します。そして add_action() で wp_enqueue_scripts にフックします。

functions.php

/**
* Twitter Bootstrap 用のスクリプトとスタイルをエンキュー
*/
function twitter_bootstrap_scripts() {
    wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css');
    wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'twitter_bootstrap_scripts' );

/**

* Twitter Bootstrap 用のスクリプトとスタイルをエンキュー

function twitter_bootstrap_scripts() {

wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css');

wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js', array(), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'twitter_bootstrap_scripts' );

これで、テンプレート内で wp_head() 等を呼び出すと、このフックした関数が実行されて Twitter Bootstrap の CSS/JavaScript の読み込みに必要なヘッダータグが出力される。

ヘッダーテンプレート内で wp_head() 呼び出し

ヘッダーテンプレートで wp_head() を呼び出します。

header.php

<head>
// ...
wp_head();
</head>

<head>

// ...

wp_head();

</head>

これで functions.php でエンキューした関数が出力される。Twitter Bootstrap 呼び出しに必要な CSS、JavaScript を読み込むヘッダータグが出力されます。

DOCTYPE を HTML5 対応にする

header.php

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

1 2	<!DOCTYPE html> <meta name="viewport" content="width=device-width, initial-scale=1.0">

上記コードが記載されているように、ヘッダーテンプレート（header.php）を編集します。

Twitter Bootstrap のグリッドレイアウトに必要なクラス指定を追加

各々テンプレートで、Bootstrap のグリッドレイアウトに必要となる CSS クラスを指定していきます。以下、記事テンプレート（single.php）での例です。

single.php

<?php get_header(); ?>

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-8">
            <!-- content -->
            <?php if (have_posts()) : ?>
                <?php while (have_posts()) : the_post(); ?>
                    <div class="main-article">
                        <?php the_content(); ?>
                    </div>
                <?php endwhile; ?>
            <?php else : ?>
                記事がありません
            <?php endif; ?>
            <!-- /content -->
        </div>
        <div class="col-xs-12 col-sm-4">
            <?php get_sidebar(); ?>
        </div>
    </div>
</div>

<?php get_footer(); ?>

<?php get_header(); ?>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<?php the_content(); ?>

</div>

<?php endwhile; ?>

<?php else : ?>

記事がありません

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

Bootstrap が提供する col-xs-12, col-sm-8, col-sm-4 といったCSSクラスを使って、グリッドデザインをレイアウトします。同じように category.php や archive.php などの他のテンプレートも必要に応じて対応。これでデスクトップでは2カラム、モバイルでは1カラムのリキッドデザインとなります。

Bootstrap のグリッドについては公式ドキュメントを参考。
Grid system Bootstrap