【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法

公開日： 2015/03/16 : Web技術・ノウハウ, Wordpress TwitterBootstrap

先日Googleから「4/21以降、サイトのスマホ対応有無を検索結果の順位に反映する」旨のアナウンスがありました。

Google ウェブマスター向け公式ブログ: 検索結果をもっとモバイルフレンドリーに

かいつまんで言うと「（スマホで検索する人には）スマホ対応サイトを優先的に上位表示するよ」ということですね。

そしてこれを機に、自サイトをレスポンシブ・デザイン化しようかなと検討されている方も多いのではないでしょうか？

そこで今回は「WordPressで作ったサイトをレスポンシブデザイン化する方法」をご紹介します。

極力やることを絞ってシンプルにまとめましたので、これからWordPressサイトをレスポンシブデザイン化しようとしている方は参考にしてみてください。

1 前提
2 作業の流れ
3 Bootstrapの注意点
- 3.1 クラス名の衝突
- 3.2 読み込みファイルサイズの増大
4 参考サイトのご紹介
5 おわりに

前提

今回ご紹介するレスポンシブデザイン化とは、”スマホ・PCそれぞれの画面サイズに応じて動的にレイアウトを変えるもの”を指します。あくまでレイアウトを最適化するという点だけで、スマホ用の画像を個別に用意する等までは含みません。つまり単純に「リキッドデザイン化する」ということです。

TwitterBootstrap（Bootstrap3）

リキッドデザイン用のCSSをイチから作るのは手間なので、TwitterBootstrap（Bootstrap3）を使用します。これをWordPressに組み込むことでレスポンシブ・デザイン化を実現します。

Bootstrapを知らない方は以下に目を通してどんなものか見てみてください。
※Bootstrapの使い方についても解説がありますが、ここではそこまで理解しなくても大丈夫です。

今日からはじめる！Twitter Bootstrap 3入門〜Webデザイナーのための簡単サイト構築術〜 | Find Job ! Startup

jQuery

Bootstrapを使うにはjQueryのバージョン1.X系（1.9以上）が必要になります。

最新バージョンのWordPressを使っていればバージョン1.9以上のjQueryが読み込まれているかと思いますが、念のためブラウザ上で右クリック→ソースコードを見るなどしてバージョンを確認しておいてください。

今回レスポンシブデザイン化するWordPressサイト

今回の説明用にWordPressのデモサイトを用意します。
＃既存サイトについてレスポンシブデザイン化のテストをしたい場合はローカルにWordPressサイトを作って試してみてもいいでしょう。

テーマはなんでも構わないのですが、シンプルなものの方がわかりやすいので「BlankSlate」テーマにしました。

レスポンシブデザインを適用する前の見た目は以下のとおりです↓

サイト名「レスポンシブデザイン」とだけ設定しただけの状態です。

これからBootstrapを使ってこのサイトをレスポンシブデザイン化していきます。

それではいきましょう。

作業の流れ

WordPressにBootstrapを組み込む流れは以下のとおりです。

WordPressにBootstrapを読み込ませる
WordPressのテンプレート（PHPファイル）を編集 – マークアップ

順番に見ていきましょう。

1. WordPressにBootstrapを読み込ませる

(1)Bootstrapをダウンロード

はじめにBootstrapの本体をダウンロードします。

Bootstrapの公式サイトにアクセスし、画面中央の「Download Bootstrap」をクリックしてダウンロード用のページへ移動します。

複数のダウンロードボタンがありますが、一番左の「Bootstrap」の「Donwload Bootstrap」ボタンをクリックしてください。

圧縮ファイル（bootstrap-3.3.2-dist.zip）を適当な場所にダウンロードし、ファイルを解凍します。

(2)WordPressのテーマ内にファイルを配置

(1)の圧縮ファイルを解凍すると「bootstrap-3.3.2-dist」というフォルダが現れます。この中にBootstrapのcssやjsなどのファイルが一式入っているわけですね。これをWordPressテーマの中に配置します。

今回はテーマフォルダ直下に「lib」フォルダを作ってその中に解凍フォルダを丸ごと入れてしまいます。

(3)Bootstrapのファイルを読み込む

次に(2)で配置したフォルダのcssとjsをWordPressで読み込みます。

functions.phpをテキストエディタで開いて以下を追加してください。

/**

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

*/

function my_bootstrap_scripts() {

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

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

}

add_action( 'wp_enqueue_scripts', 'my_bootstrap_scripts' );

/**

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

function my_bootstrap_scripts() {

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

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

}

add_action( 'wp_enqueue_scripts', 'my_bootstrap_scripts' );

これでWordPressのテーマにBootstrapのファイルが読み込まれます。

ここで一度ブラウザでサイトを表示してみてください。

Bootstrapの読み込みがうまくいっていれば、サイトのデザインが以下のように変わります。

フォントやリンクなどがキレイになっていますね。これはBootstrapのスタイルが効いているためです。このようにデザイン部分を良きに計らえで調整してくれるのもBootstrapの良いところです。

Bootstrapが読み込まれていることを確認できたところで次へ進みましょう。

2. WordPressのテンプレート（PHPファイル）を編集

(1)DOCTYPEをHTML5用に合わせる

header.phpの一行目を見てDOCTYPEを確認します。

この部分が

<!DOCTYPE html>

となっているようにしてください。

(2)viewportを変更

header.phpの以下部分を書き換えます。

変更前：<meta name=”viewport” content=”width=device-width” />
変更後：<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

viewportについての解説は以下をご覧ください。

ビューポートを設定する – PageSpeed Insights — Google Developers

(3)HTML（PHP）にclassを追加 – マークアップ

Bootstrapを組み込んだサイトでは、HTMLタグに特定のクラス名を追加することで

PCで表示したときは2列で表示
スマホで表示したときは1列で表示

のようにレイアウトを調節することができます。

これが冒頭でも触れた「リキッドデザイン」で、今回のレスポンシブ・デザインの要になります。

ここでちょっと寄り道。

Bootstrapでは画面上の横幅を12個のブロックに分ける、という考え方をします。（グリッドデザイン ※1）

グリッドデザインのイメージ

Bootstrap公式ページ（英語）より

画面上の各要素が「12個のうちいくつ分のスペースを取るか？」を指定することで横幅を調節する、というお話です。

※1）グリッドデザインについては以下のサイトでわかりやすく解説されています。

マルチデバイス対応に適した「可変グリッドレイアウト」

このBootstrapのレイアウトの考え方を踏まえた上で本題に戻ります。

さて、今回は以下の画像中の赤枠で囲んだ部分を

PCでは左右に並べて表示
スマホでは上下に表示

となるレスポンシブデザインにしましょう。

やろうとしていることがイメージできましたか？

次からいよいよファイルを編集していきます。

まずはページ全体をcontainerクラスで囲みます。

さらに左右の要素の入れ物となるdivにrowクラスを追加します。

ここでは既存のタグにクラスを追加していますが、divを新たに追加して

や

で既存の要素を囲っても構いません。
＃本来はそうすべきかもしれませんがここではこのまま進めます。

次に左側（index.php）・右側（sidebar.php）それぞれに横幅を指定するクラスを追加します。

以下のように「col-sm-数字」で横幅を指定してください。

左側（index.php）

右側（sidebar.php）

col-sm- の部分は「768px（タブレット端末の画面横幅）以上ならこのサイズにするよ〜」という意味です。（smは”Small devices Tablets”のこと）

「col-sm-（768px以上）」の他に「col-xs-（768px未満）」「col-md-（992px以上）」「col-lg-（1200px以上）」があり、それぞれを組み合わせて使うこともできます。

「col-sm-数字」の数字の部分は1〜12のいずれかを入れてください。今回は左右2:1の比率にしたかったので、左側を8、右側を4としました。

Bootstrapのグリッド幅指定（英語）

さっそくブラウザで表示を確認しましょう。

意図したとおり左右横並びになりました。

ブラウザの幅を狭めていくと・・・

縦一列に並び変わりました。

画面のサイズ（幅）によって左右に並んだり縦一列になったり、ちゃんと切り替わっていますね！

今回つくったデモサイトはこちらです。

ブラウザの横幅を変えてみて、表示が切り替わる様子を見てみてください。

○Chromeブラウザを使っている方向け

レスポンシブデザインの表示をチェックするときは以下のChromeアプリが便利ですよ。無料ですし、一度試してみてください。

Responsive Web Design Tester

3. IE対応

いろいろな端末のさまざまな画面サイズに合わせて表示を変えられる便利なレスポンシブデザインですが、残念ながらIE8以下のブラウザは未対応です。

古いバージョンのIEではHTML5のタグ（asideタグなど）を適切に扱えない
横幅毎に表示（スタイル）を変えるのに必要なCSSのメディアクエリー機能が効かない

といったことが原因で、旧版IEではレスポンシブデザインを適用したサイトを正しく表示できません。

とはいえIEユーザーを切り捨てられない、完璧でなくてもよいので最低限の対応はしておきたいというケースもあるかと思います。そのようなときは以下のスクリプトの力を借りましょう。

html5shiv.js ・・・古いIEでもHTML5のタグを認識できるようにするスクリプト
Respond.js ・・・ IE8でもmax-width／min-widthが効くようにしてくれるスクリプト

この2つを読み込むことで、古いIEにも対応したスポンシブデザインサイトにすることができます。

以下をheader.phpにコピペで貼り付けてください。

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

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

<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

Bootstrap公式ページ（英語）より

外部サイトにホスティングされているjsスクリプトを自サイトに読み込んでいるわけですね。

これで”一応”はIE8等の古いインターネットエクスプローラーでもレスポンシブデザインが効くようになります。ただし完璧ではないので、場合によってはブラウザの幅を変えてもデザインが切り替わらないこともあるかと思います。html5shiv.jsとrespond.jsは「無いよりマシ」程度に考えておいた方が無難です。

Bootstrapの注意点

便利なBootstrapですが、既存サイトに組み込む際には以下にご注意ください。

クラス名の衝突

Boostrapは特定のクラス名に対してスタイルが効く仕組みです。例えばボタンに「btn btn-default」のようなクラス名が付いていると、Bootstrapデザインのボタンになります。既存サイトのデザインを変えたくない場合、「たまたまクラス名が同じだったことによりBootstrapのスタイルが適用された」となっているところがないか気を付けましょう。

読み込みファイルサイズの増大

Bootstrapを読み込む分、サイトのファイルサイズが大きくなります。大抵の場合は問題になることはないかと思いますが…少しでも高速な表示が必要な場合など、シビアな条件を求められるサイトの場合にはBootstrapを使ってよいのか注意が必要です。

参考サイトのご紹介

WordPressとBootstrapを組み合わせをやってみるときに参考となるサイトをいくつかご紹介します。

Bootstrapを使って効率よくWordPressオリジナルテーマを作る from Kobayashi Yoshinori

なぜBootstrapを使うのかから具体的な内容までわかりやすく解説されています。

http://www.webdesignleaves.com/wp/wordpress/303/

Bootstrap 3 を WordPress で使ってみる

Bootstrapでのナビゲーションバーやパン屑リスト、ページネーションの使い方等々、当ブログ記事より更に詳細な解説記事です。

Bootstrap3移行ガイド

Bootstrapの公式サイトは英語ですが、こちらのサイトでは日本語で解説されています。

http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html

HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) – ＠IT

Bootstrapって何？というところから基本的な使い方まで画像付きで丁寧に解説されています。

おわりに

ここまでWordPressへBootstrapを導入してレスポンシブデザイン化する方法を説明してきましたが、いかがでしたでしょうか？

Bootstrapを使えば比較的手軽にWordPressをレスポンシブデザイン化（リキッドデザイン化）することができますので、是非うまく活用してみてください。

Comment

Bootstrapでwordpressの自作テーマを作ってみた① | ima×blog より:

2015年9月9日 19:45

[…] ・get_stylesheet_uri()･･･style.cssのURIを返す関数です。Bootstrapの読み込みに関してはコチラの記事がおすすめです。 […]

返信
momotarok0610 より:

2015年12月31日 18:19

貴重な情報提供ありがとうございます。
Webデザイン初心者で、現在WordPressの学習中なのですが、以下の部分をfunction.phpに記述しても、読み込みができませんでした。

/**

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

*/

function my_bootstrap_scripts() {

wp_enqueue_style( ‘bootstrap-css’, get_template_directory_uri() . ‘/lib/bootstrap-3.3.2-dist/css/bootstrap.min.css’);

wp_enqueue_script( ‘bootstrap-script’, get_template_directory_uri() . ‘/lib/bootstrap-3.3.2-dist/js/bootstrap.min.js’, array(), ‘1.0.0’, true );

}

add_action( ‘wp_enqueue_scripts’, ‘my_bootstrap_scripts’ );

原因が全く分からないのでなんとも言えないのですが、一度ご確認いただけますでしょうか。
なお、利用したテーマは、「BlankSlate」bootstrapは「bootstrap-3.3.6」です。
お手数おかけいたしますが、よろしくお願い致します。

返信
- yukarien より:
  
  2016年1月4日 16:50
  
  パスは合っていますか？
  bootstrapのバージョンが3.3.6なら、my_bootstrap_scripts内で指定するパスも /bootstrap-3.3.6/dist/js ・・・にしないとパスが合いません。
  
  返信
WordPressをBootstrap化 | サガす - WordPress より:

2016年4月17日 14:26

[…] 【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法 […]

返信
bootstrap wordpress | 限りなく"無職"に近いフリーランスより:

2016年9月21日 15:45

[…] 【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法 […]

返信

コメントを残すコメントをキャンセル

PREV: 【SEO初心者向け】検索順位を確実に上げるためのWordPress×SEO基礎知識
NEXT: Rubyで小数点第２位以下を切り捨てる方法