HOME  /WordPress(応用)
 /Bootstrapの導入方法と設定
2017年11月05日

Bootstrapの導入方法と設定

Bootstrapはグリッドデザインやボタン及びナビゲーション等の色々な機能を持っており、これを利用するとCSSを記述しなくても色々なデザインが可能になるツールです。

この日本語リファーレンスサイトは下記になります。
Bootstrap3日本語リファレンス

1.Bootstrapのダウンロード方法

1-1.Bootstrapの公式サイトからBootstrapをダウンロードします。

Bootstrap公式サイトから『Download Bootstrap』ボタンを挿入すると、PCにBootstrapプログラムがダウンロードされます。この時点ではVer3.3.7です。

1-2.ダウンロードしたファイルを解凍し、自分のテーマフォルダの中に取り込みます。

解凍したファイルは下記の構造になっています。

上記の中で必要なファイルは下記になります。

■cssフォルダにあるbootstrap.min.css

■jsフォルダにあるbootstrap.min.js

■fontフォルダの中の総てのファイル

注1.minの名前がついているファイルはデータ量を少なく為に各種設定を改行なしで並べているファイルです。
しかしBootstrapの設定を見る為には、上記以外のファイルを見た方が良いので、私はテーマフォルダの中にlibフォルダを作成し、ここにCSSフォルダfontsフォルダjsフォルダをコピーしています。

<子テーマのフォルダ構成>

 

 

2.HTTP表示にBootstrapを反映させる方法

子テーマに「header.php」ファイルを作成し、下記を記述してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset='UTF-8'>
  <!--WordPressの管理画面機能と連動する為の必須宣言-->
    <?php wp_head(); ?>
  <!--viewportの利用宣言-->
    <meta name="viewport" content="width=device-width,initial-scale=1">
  <!--Bootstrap利用宣言-->
    <link rel='stylesheet' href='<?php echo get_stylesheet_directory_uri();?>/lib/css/bootstrap.min.css' >
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <script src='<?php echo get_stylesheet_directory_uri();?>/lib/js/bootstrap.min.js'></script>
  <!--自作jqueryプログラムの利用宣言-->
    <script src='<?php echo get_stylesheet_directory_uri();?>/js/my-jquery.js'></script>
  <!--スタイルシートはテーマフォルダ直下のstyle.cssを利用-->
    <link rel='stylesheet' href='<?php echo get_stylesheet_uri(); ?>' type='text/css' media='screen'>
  <!--タブにブログ名を表示-->
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri();?>/img/site_icon.png">
</head>

※1.<!DOCTYPE html>は、文書がHTML5で作成されたものであることを宣言しています。

※2.<html lang=”ja”>は、htmlは日本語である事を宣言しています。

※3.<meta charset=’UTF-8′>は、文字エンコーディングはUTF-8である事を宣言しています。

※4.<?php wp_head(); ?>はWordPressを使う場合は必須で、ここで色々な設定が吐き出されます。

※5.上記リストの赤字部分がBootstrapを機能させるための設定です。

※6.<link rel=’stylesheet’××の所がBootstrapのCSSファイルの設置場所です。

※7.<script src=”https://ajax.googleapis.com/××の所がBootstrapが利用しているgoogleのjqueryライブラリです。

※8.<script src=”<?php echo get_template_directory_uri(); ?>××の所がBootstrapがgoogleのjqueryライブラリを使って記述したjqueyプログラムの設置場所です

※9.自作jqueryプログラムやタブに表示するブログ名、アイコン等もこの<head>部に記述します。この辺は他のドキュメントで詳しく解説していきます。

 メモ

WordPressが使っているjqueryライブラリは、<?php get_header(); ?>が実行された段階で呼び込まれます。
一方、Bootstrapは上記の様にgoogleのjqueryライブラリを利用しています。
そこで自作でJqueryプログラムを作成する場合は、どちらのライブラリも利用できます。

私は事例が多いgoogleのライブラリを使ってスクリプトを作成しています。

尚、WordPressのライブラリを使う場合は「$」の所が「jquery」になります。

3.ビジュアルエディタにBootstrapを反映させる方法

Bootstrapの中にはコンテンツエリアで利用できる表やボタンの機能等があります。

そこでビジュアルエディタにBootstrapを適用させる為には「my_editor.style.css 」に下記設定を行います。

/*****************************************************************/
/* TinyMCE画面設定 */ 
/*****************************************************************/
/** Bootstrapのcssの読み込み **/
@import url('lib/css/bootstrap.min.css');

※1.赤字の所がBootstrapのCSSの設置場所です。
この設定はmy_editor.style.cssの先頭に記述する必要があります。

 メモ

ビジュアルエディタにjqueryライブラリは読み込めないので読み込むのはBootstrapのCSS部分だけです。
JqueryはクライアントにHTTP表示が終わった後で起動する、デバイス側のプログラムです。

例えば表示画面にタブがあり、このタブをクリックすると表示内容が変わる等はJqueryで表示内容を切替えます。

この場合、個々のタブに表示するコンテンツをビジュアルエディタで作成する為には両方のタブが見えてないと記述できません。

よって、ビジュアルエディタにはJqueryは不要と考えてください。

4.Bootstrapのブレークポイント

レスポンシブWebデザインとは、ユーザーが閲覧するデバイス幅に応じたデザインで表示させる技術のことで、今回のサイト改定ポイントはここにあります。

BootstrapはレスポンシブWebデザインツールで、デバイスの区切り(ブレークポイント)は下記で設定されています。

  モバイル タブレット   デスクトップ① デスクトップ②
表示幅
(px)
 ~767  768
~991
 992
~1199
 1200~
名前  xs  sm  md  lg

しかし、デスクトップ①と②はあまり意味を持たないので、このサイトでは下記区分で利用しています。

  スマホ タブレット PC
表示幅
(px)
~767 768
~991
992~
名称 xs sm pc