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

スポンサーリンク
スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

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 をダウンロードして、以下に設置します。

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

.gitignore

スポンサーリンク

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

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

functions.php

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

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

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

header.php

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

DOCTYPE を HTML5 対応にする

header.php

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

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

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

single.php

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

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

スポンサーリンク
WordPress は人気ナンバーワンのブログ・ウェブサイトの管理ツールです。PHP を使えればカスタマイズできるので、ぜひトライされてみてください。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!