WordPressにプラグインをインストールするだけで、ECサイトの機能を追加できるWelcart。デフォルトテンプレートのCSSスタイルをカスタマイズするだけでもネットショップとしては使えるのですが、スライダーや画像の拡大機能なども追加したいことがあります。
そんなときに便利なのがBootstrap。様々なコンポーネントがまとめられていて、多くの場合class名を指定するだけで簡単に使用できます。
このページではWelcartにBootstrapを導入する方法を紹介します。
WelcartにBootstrapを導入する方法
Bootstrapのダウンロード
BootstrapはCSSフレームワークと呼ばれていて、本体はCSSファイルとjavascriptファイルになります。これらをダウンロードして、テンプレートから読み込むだけで使用できるのですごく便利。
BootstrapをWelcartに導入するために、まずは公式サイトからダウンロードしましょう。
ダウンロードすると以下のようなファイル構成になっています。
必要なファイルは以下の3つだけ。
- bootstrap.min.css : CSSファイル本体の圧縮版
- bootstrap.min.js : javascriptファイル本体の圧縮版
- fontsフォルダ : Bootstrapで使用するアイコンフォントを入れたもの
Welcartの方はすでに入っていると思いますが、まだの方は「Welcartの一番簡単なはじめ方」をご覧ください。
WelcartにBootstrapを読み込ませる方法
次にダウンロードしたBootstrapをWelcartに導入します。導入すると言ってもやることはファイルを移動して、header.phpからリンクするだけなので簡単です。
まずは先ほど書いた2つのファイルと1つのフォルダを、テンプレートフォルダ内にコピーします。
コピーできたら、読み込みの設定を行います。リンクの方法は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コンポーネントのところを表示します。
このページからコードを取得したら早速使ってみます。home.php
で画像を表示していた部分をスライダーで置き換えてみたものがこちら。
CSSとjavascriptが正しく読み込まれていれば、画像のようにスライダーが表示されます。同様にして他のコンポーネントも使用することが可能です。