WelcartにBootstrapを導入する方法

Pocket

welcartのカスタマイズ方法
Wordpressにプラグインをインストールするだけで、ECサイトの機能を追加できるWelcart。デフォルトテンプレートのCSSスタイルをカスタマイズするだけでもネットショップとしては使えるのですが、スライダーや画像の拡大機能なども追加したいことがあります。

そんなときに便利なのがBootstrap。様々なコンポーネントがまとめられていて、多くの場合class名を指定するだけで簡単に使用できます。

このページではWelcartにBootstrapを導入する方法を紹介します。

WelcartにBootstrapを導入する方法

Bootstrapのダウンロード

BootstrapはCSSフレームワークと呼ばれていて、本体はCSSファイルとjavascriptファイルになります。これらをダウンロードして、テンプレートから読み込むだけで使用できるのですごく便利。

BootstrapをWelcartに導入するために、まずは公式サイトからダウンロードしましょう。
WelcartにBootstrapを導入、まずはダウンロード
ダウンロードすると以下のようなファイル構成になっています。
Bootstrapの中身

必要なファイルは以下の3つだけ。

  • bootstrap.min.css : CSSファイル本体の圧縮版
  • bootstrap.min.js : javascriptファイル本体の圧縮版
  • fontsフォルダ : Bootstrapで使用するアイコンフォントを入れたもの

Welcartの方はすでに入っていると思いますが、まだの方は「Welcartの一番簡単なはじめ方」をご覧ください。

WelcartにBootstrapを読み込ませる方法

次にダウンロードしたBootstrapをWelcartに導入します。導入すると言ってもやることはファイルを移動して、header.phpからリンクするだけなので簡単です。

まずは先ほど書いた2つのファイルと1つのフォルダを、テンプレートフォルダ内にコピーします。
WelcartにBootstrapをコピーする

コピーできたら、読み込みの設定を行います。リンクの方法はBootstrapのサイトにあるベーシックテンプレートを参考にします。

テンプレートフォルダのheader.phpを開いて<head>内に以下のようなコードを記述します。

<!-- Bootstrap -->
<link href="<?php bloginfo('template_url'); ?>/bootstrap.min.css" rel="stylesheet">

<!--[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]-->

最初の部分はBootstrapの読み込み。その下にあるのはIE対策用のコードになります。次はfooter.phpを開き、<?php wp_footer(); ?>の手前でjavascriptを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/bootstrap.min.js"></script>
<?php wp_footer(); ?>

BootstrapにはjQueryが必要なため、Bootstrap用のjavascriptを読み込む前にjQueryを読み込んでおきます。

以上でWelcartにBootstrapの導入が完了しました。

WelcartでBootstrapを使う方法

では実際にWelcartでBootstrapを使ってみましょう。まずはECサイトによくあるスライダーから。

スライダーなどのコンポーネントのコードはBootstrapからコピペするのが手っ取り早いです。スライダーを作るにはBootstrapのcarouselが必要なので、公式サイトのヘッダーメニューからjavascriptを選択し、そのページ内にあるcarouselコンポーネントのところを表示します。
JavaScript_Bootstrap

このページからコードを取得したら早速使ってみます。home.phpで画像を表示していた部分をスライダーで置き換えてみたものがこちら。
welcartにBootstrapのcarouselを入れる

CSSとjavascriptが正しく読み込まれていれば、画像のようにスライダーが表示されます。同様にして他のコンポーネントも使用することが可能です。