HOME  /WordPress(応用)
 /Bootstrapの導入方法と設定
2020年02月03日

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

 

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

レスポンシブWebデザインとは、ユーザーが閲覧するデバイス幅に応じたデザインで表示させる技術のことで、有名所でBootstrapとFlexboxが挙げられます。ここでは両者の特徴と違いを解説しています。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで作る方法を解説しています。しかしこの機能はHTMLでコラップスを指定した場合に使える機能で、ビジュアルエディタで編集可能なコラップスにする為には自作jqueryでダイナミックにこの機能を与える必要がある。この方法を解説しています。

SynologyのDSMで80/443以外のポート番号を使ったWebサイトを構築する方法を解説しています。

PCで表を作成し、それをタブレットやスマホで表示すると表が綺麗に収まりません。また基本機能だけでは表の枠線や色を綺麗に表示できません。よってここではこれらを解決する為にBootstrap機能も併用して綺麗な表を作成する方法を解説しています。

Bootstrapのインプットグループ機能を使った検索BOXを作成した事例です。検索BOXは関数化してボタンの色を指定できる様にしています。

モーダルウィンドウとは新しいウィンドウを表示し、その操作が完了するまで親ウィンドウの操作ができないタイプのウィンドウのことです。ここではBootstrapのモーダルウィンドウ機能をビジュアルエディタで使う方法を解説しています。

TinyMCEの仕様は親テーマのeditor-style.css➡子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

PC画面ではサイドバーがあっても良いが、幅が狭いスマホではこのエリアが確保できない。そこでスマホの場合は自動的にBootstrapのドロップダウンメニュに置き変えるサイドーバーの作り方を解説しています。

PHPプログラムで表示するデバイスの種類が判ればプログラミングが簡単になります。そこでここではデバイス種類を取得する関数とデバイスの画面サイズを取得する方法を併用して、実使用上問題ない方法を解説しています。

TinyMCEのスタイルは1つの段落に対する定義になります。よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。ここではその作り方を解説しています。