サイトにBootstrap3を利用する | ホームNW研究所ホームNW研究所

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

このサイトでは、Bootostrapをビジュアルエディタ内でも使える様な設定にしています。

尚、Bootostrapにどの様な機能があるか？は下記のURLを参照してください。
Bootstrap3日本語リファレンス

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

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

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

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

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

➡

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

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

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

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

　メモ

minの名前がついているファイルはデータ量を少なく為に各種設定を改行なしで並べているファイルです。
必要なファイルは上記だけなので、これだけをコピーするので良いのですが、私はテーマフォルダの中にlibフォルダを作成し、ここにCSSフォルダ、fontsフォルダ、jsフォルダの全部をコピーしています。

理由はminファイルを見てもBootstrapの設定は判らないので、その場合は圧縮をしてないCSSファイルを見ています。

＜子テーマのフォルダの内容＞

➡

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>部に記述します。この辺は他のドキュメントで詳しく解説していきます。

　ご参考知識

「header.php」の様なphpプログラムはサーバ側のプログラムで、サーバ側で画面を生成しデバイス側に送ります。

一方「Jqueryプログラム」はHTTP表示が終わった後で起動するデバイス側のプログラムで、ビジュアルエディタで色々な操作を行った時に画面の変更処理を行います。

また「Jqueryプログラム」は「Jqueryライブラリ」を使って記述されます。

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

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

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

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

本テーマのビジュアルエディタのCSSは「editor-style.css」から「my-editor-style.css」に変更しています。

理由は下記ドキュメントを参照してください。

ブロックエディタ時代にビジュアルエディタを使う方法

親テーマが「editor-style.css」の時のスタイル機能の使い方

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

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

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

※1.赤字の所がBootstrapのCSSの設置場所です。
この設定はビジュアルエディタのCSSの先頭に記述する必要があります。

※2.このサイトのビジュアルエディタのCSSは「my-editor.style.css」を使っています。

　ご参考知識

HTTP表示にはBootstrapのCSSに加えてJqueryライブラリを読み込みました。

しかしビジュアルエディタの操作にBootstarpのプログラムは不要なので読み込めません。

ビジュアルエディタにはTinyMCEやTinyMCE AdvansedのJqueryプログラムが動きます。