WelcartにBootstrapを導入する方法

2014-09-22

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

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

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

WelcartにBootstrapを導入する方法

Bootstrapのダウンロード

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

BootstrapをWelcartに導入するために、まずは公式サイトからダウンロードしましょう。

ダウンロードすると以下のようなファイル構成になっています。

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

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

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

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

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

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

コピーできたら、読み込みの設定を行います。リンクの方法は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コンポーネントのところを表示します。