【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法
公開日:
:
Web技術・ノウハウ, Wordpress TwitterBootstrap
先日Googleから「4/21以降、サイトのスマホ対応有無を検索結果の順位に反映する」旨のアナウンスがありました。
Google ウェブマスター向け公式ブログ: 検索結果をもっとモバイル フレンドリーに
かいつまんで言うと「(スマホで検索する人には)スマホ対応サイトを優先的に上位表示するよ」ということですね。
そしてこれを機に、自サイトをレスポンシブ・デザイン化しようかなと検討されている方も多いのではないでしょうか?
そこで今回は「WordPressで作ったサイトをレスポンシブデザイン化する方法」をご紹介します。
極力やることを絞ってシンプルにまとめましたので、これからWordPressサイトをレスポンシブデザイン化しようとしている方は参考にしてみてください。
前提
今回ご紹介するレスポンシブデザイン化とは、”スマホ・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をテキストエディタで開いて以下を追加してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** * 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)
グリッドデザインのイメージ
画面上の各要素が「12個のうちいくつ分のスペースを取るか?」を指定することで横幅を調節する、というお話です。
※1)グリッドデザインについては以下のサイトでわかりやすく解説されています。
このBootstrapのレイアウトの考え方を踏まえた上で本題に戻ります。
さて、今回は以下の画像中の赤枠で囲んだ部分を
- PCでは左右に並べて表示
- スマホでは上下に表示
となるレスポンシブデザインにしましょう。
やろうとしていることがイメージできましたか?
次からいよいよファイルを編集していきます。
まずはページ全体をcontainerクラスで囲みます。
さらに左右の要素の入れ物となるdivにrowクラスを追加します。
ここでは既存のタグにクラスを追加していますが、divを新たに追加して
<div class=”container”></div>
や
<div class=”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としました。
さっそくブラウザで表示を確認しましょう。
意図したとおり左右横並びになりました。
ブラウザの幅を狭めていくと・・・
縦一列に並び変わりました。
画面のサイズ(幅)によって左右に並んだり縦一列になったり、ちゃんと切り替わっていますね!
今回つくったデモサイトはこちらです。
ブラウザの横幅を変えてみて、表示が切り替わる様子を見てみてください。
○Chromeブラウザを使っている方向け
レスポンシブデザインの表示をチェックするときは以下のChromeアプリが便利ですよ。無料ですし、一度試してみてください。
3. IE対応
いろいろな端末のさまざまな画面サイズに合わせて表示を変えられる便利なレスポンシブデザインですが、残念ながらIE8以下のブラウザは未対応です。
- 古いバージョンのIEではHTML5のタグ(asideタグなど)を適切に扱えない
- 横幅毎に表示(スタイル)を変えるのに必要なCSSのメディアクエリー機能が効かない
といったことが原因で、旧版IEではレスポンシブデザインを適用したサイトを正しく表示できません。
とはいえIEユーザーを切り捨てられない、完璧でなくてもよいので最低限の対応はしておきたいというケースもあるかと思います。そのようなときは以下のスクリプトの力を借りましょう。
- html5shiv.js ・・・ 古いIEでもHTML5のタグを認識できるようにするスクリプト
- Respond.js ・・・ IE8でもmax-width/min-widthが効くようにしてくれるスクリプト
この2つを読み込むことで、古いIEにも対応したスポンシブデザインサイトにすることができます。
以下をheader.phpにコピペで貼り付けてください。
1 2 3 4 5 6 7 8 9 10 11 |
<!-- 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]--> |
外部サイトにホスティングされているjsスクリプトを自サイトに読み込んでいるわけですね。
これで”一応”はIE8等の古いインターネットエクスプローラーでもレスポンシブデザインが効くようになります。ただし完璧ではないので、場合によってはブラウザの幅を変えてもデザインが切り替わらないこともあるかと思います。html5shiv.jsとrespond.jsは「無いよりマシ」程度に考えておいた方が無難です。
Bootstrapの注意点
便利なBootstrapですが、既存サイトに組み込む際には以下にご注意ください。
クラス名の衝突
Boostrapは特定のクラス名に対してスタイルが効く仕組みです。例えばボタンに「btn btn-default」のようなクラス名が付いていると、Bootstrapデザインのボタンになります。既存サイトのデザインを変えたくない場合、「たまたまクラス名が同じだったことによりBootstrapのスタイルが適用された」となっているところがないか気を付けましょう。
読み込みファイルサイズの増大
Bootstrapを読み込む分、サイトのファイルサイズが大きくなります。大抵の場合は問題になることはないかと思いますが…少しでも高速な表示が必要な場合など、シビアな条件を求められるサイトの場合にはBootstrapを使ってよいのか注意が必要です。
参考サイトのご紹介
WordPressとBootstrapを組み合わせをやってみるときに参考となるサイトをいくつかご紹介します。
なぜBootstrapを使うのかから具体的な内容までわかりやすく解説されています。
Bootstrap 3 を WordPress で使ってみる
Bootstrapでのナビゲーションバーやパン屑リスト、ページネーションの使い方等々、当ブログ記事より更に詳細な解説記事です。
Bootstrapの公式サイトは英語ですが、こちらのサイトでは日本語で解説されています。
HTML5アプリ作ろうぜ!(11):Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) – @IT
Bootstrapって何?というところから基本的な使い方まで画像付きで丁寧に解説されています。
おわりに
ここまでWordPressへBootstrapを導入してレスポンシブデザイン化する方法を説明してきましたが、いかがでしたでしょうか?
Bootstrapを使えば比較的手軽にWordPressをレスポンシブデザイン化(リキッドデザイン化)することができますので、是非うまく活用してみてください。
PR
関連記事
-
-
『Simple Custom CSS』はテーマをいじらずちょっとCSSを編集したいときに便利なプラグイン
CSSだけ編集したいけれどWordPressのテーマを直接編集するのは避けたい、かといって子テーマを
-
-
【保存版】全訳:Webサイトユーザビリティーチェックリスト25項目
本質的な知識というものは時が経っても価値が失われません。 User Effect の 「25-
-
-
『Post Lists View Custom』で投稿一覧・固定ページ一覧の表示項目をカンタンON/OFF
投稿一覧・固定ページ一覧の表示項目を変えられるプラグイン『Post Lists View Cus
-
-
macでローカル環境のopensslをバージョンアップする手順 〜 brewで更新→rbenvでrubyを再インストール 〜
先日自社の運営サイトのSSL証明書の更新作業をしたのですが、ローカル環境として使っているmacで
-
-
自作テーブルの追加からデータ取得まで!WordPressでデータをDBに保持して使う方法
WordPressでWebサイトを作ったとき、何かしらのデータをデータベース上に保持しておき必要
-
-
【SEO初心者向け】検索順位を確実に上げるためのWordPress×SEO基礎知識
「うちのホームページをネット検索に強くしたい。でもやり方がわからない。」 WordPressで
-
-
ドラッグ&ドロップだけ!『Intuitive Custom Post Order』は投稿一覧のページ並び順をスイスイ変更できるプラグイン
WordPressの投稿一覧の各投稿ページをカンタンに並べ替えできるプラグイン『Intuitiv
-
-
【保存版】WordPressのサイトをmacのローカル環境にコピーして動かす方法
WordPerssで作った既に公開中のWebサイトについて、サイトを丸ごとローカル環境に持ってき
-
-
『Duplicate Post』で投稿ページ・固定ページをカンタン複製
WordPressの投稿ページや固定ページを複製できるプラグイン『Duplicate Post』
-
-
付箋紙のようにメモ書きできる!『Dashboard Notepad』はWordPressのダッシュボードにメモを残せるプラグイン
WordPressで管理画面のダッシュボードにメモを残せるようになるプラグイン『Dashboar
Comment
[…] ・get_stylesheet_uri()・・・style.cssのURIを返す関数です。Bootstrapの読み込みに関してはコチラの記事がおすすめです。 […]
貴重な情報提供ありがとうございます。
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」です。
お手数おかけいたしますが、よろしくお願い致します。
パスは合っていますか?
bootstrapのバージョンが3.3.6なら、my_bootstrap_scripts内で指定するパスも /bootstrap-3.3.6/dist/js ・・・ にしないとパスが合いません。
[…] 【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法 […]
[…] 【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法 […]
[…] 【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法 […]