サイトに簡単にスライダー機能を追加できるowl.carouselプラグインの使い方
表示スペースの限られたスマホ画面でも動的に多くの記事を紹介できるため、スライダー機能を使っているサイトやブログを多く目にしますよね。
このブログにもスライダー機能を追加したいと思い、JQueryプラグインを探してみました。
スライダープラグインの中でも、より簡単で、レスポンシブ対応、スワイプにも対応しているのが「owl.carousel.js」でした。
owl.carousel.jsをWordPressに導入した手順をご紹介します。
WordPressサイトにスライダー機能を追加する方法は3つ
WordPressサイトにスライダー機能を追加するには、この3つの方法があります。
テーマに用意されているスライダー機能を使用する
高機能なテーマなら、最初からスライダーウィジットが用意されていたりします。その機能を使うだけでスライダーを好きな場所に追加することができます。
スライダー機能のある有名な日本製WordPressテーマを挙げてみると、有名なWordPressテーマは最初からテーマがスライダー機能を装備しているものが多いのがわかります。
| テーマ名 | スライダー | 価格 |
|---|---|---|
| Luxeritas | スライダーウィジット有 | 無料 |
| Lightning | トップページ キービジュアル | 無料 |
| SANGO | スライダーブロック | 11,000円 |
| JIN | トップページ ピックアップコンテンツ | 14,800円 |
| SWELL | トップページ 記事スライダー | 17,600円 |
| DIVER | ピックアップスライダー | 17,980円 |
スライダー機能を使いたいなら、最初から機能が備わっているWordPressテーマに乗り換えるのも近道かもしれません。
スライダープラグインを利用する
使用中のテーマにスライダー機能がないけれど、気に入っているからテーマを乗り換えたくないなら、WordPressプラグインで対応できます。
有名なスライダープラグインを3つご紹介します。
JQueryプラグインを利用する
スライダーのためにプラグインを増やしたくないという方なら、JQueryプラグインを自分で追加してみましょう。スライダープラグインの導入はプログラミングに自信が無くても比較的簡単なものになっています。
JQueryプラグインの導入手順は以下の通り。
- 公式サイトからプラグインファイル（jsファイル）をダウンロードする
- テーマ内にダウンロードしたプラグインをアップロードする
- functions.php等にプラグインの読み込みコードを追加する
- プラグインの取扱説明書に従ってプラグインを好きな場所に設置する
実際には、どのようにスライドショープラグインを設置していくのか具体例を紹介していきます。
owl.carouselを使ってスライダーを設置する手順
1. プラグインファイルをダウンロードする
公式サイトからプラグインファイルをダウンロードします。
＞＞＞owl.carousel
2. プラグインを実行するjsファイルを作成する
プラグインを実行するjsファイルを作成します。ファイル名は好きな名前でOKです。すでに、JavaScriptを使ってるなら今回のプラグイン用のコードを追加するだけです。
jQuery(function($){
$('.owl-carousel').owlCarousel({
items: 2,
margin: 0,
loop: true,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true,
center: true,
});
});| items | 一度に表示するスライドの数を指定します。 |
| margin | スライド間のスペースの大きさを指定します。 |
| autoplayTimeout | スライドが動く時間をミリ秒で指定します。 |
| center | trueにするとitemsが1以上の時に中央表示になります。 （中央表示＋両端スライドが半分表示） |
owlCarouselには、他にもオプションが用意されています。video:trueにすると、スライドショー内にyoutubeなどの動画も埋め込めるようになります。
どんなことができるのか、公式サイトのDemoページで確認できますよ。
3. テーマ内にプラグインファイル、作成ファイルをアップロードする
ダウンロードしたプラグインファイルの中から、必要なファイルだけをアップロードしていきます。合わせて、作成したjsファイルもアップロードします。
ダウンロードしたプラグイン内のファイル数が多いのは、サンプルコードや取扱説明書などが含まれているからです。owl.carouselを選んだ理由は、取説が丁寧でわかりやすく、そのまま使えるサンプルコードが豊富だったから。
アップロードする場所は、使用中のテーマフォルダーの下。子テーマでカスタマイズしているなら、子テーマフォルダの下に置きます。
一般的には、jsフォルダとcssフォルダを新規作成してその中にアップロードします。jsフォルダにはJavaScriptファイル（拡張子が.jsのファイル）、cssフォルダーにはスタイルシート（拡張子が.cssのファイル）だけを保存することで整理整頓できるというわけです。この方法が絶対ではなく、他にプラグイン名のフォルダを作成してまとめて保存しておく方法もあります。わかりやすい方を選んでください。
ダウンロードしたowl.carouselプラグインファイル全てをアップロードする必要はありません。サンプルソースや使い方を説明しているファイルも含まれているからです。利用するファイルだけを選んでアップロードしていきます。
シンプルなスライダー機能を使いたい場合にアップロードが必要なのは、次の3ファイルです。
- owl.carousel.min.js（プラグイン本体ファイル）
- owl.carousel.min.css（プラグイン使用CSSファイル）
- owl.theme.default.min.css（プラグイン使用CSSファイル）
この3つのファイルは、次の場所に保存されています。
OwlCarousel2-2.3.4
-dist
-owl.carousel.min.js
-assets
-owl.carousel.min.css
-owl.theme.default.min.css
4. プラグインとCSSを読み込むコードをテーマに追加する
テーマ内に必要なファイルをアップロードしたら、次はそのファイルを呼び出すプログラムを追加していきます。プログラムを追加する場所は、functions.phpファイルになります。テーマによっては、headやbodyにコードを追加する機能が用意されているなら、その部分に記述します。
functions.phpに記述するコード
function add_my_scripts() {
if(is_admin()) return; //管理画面ではスクリプトは読み込まない
wp_enqueue_style('owl-carousel-css', get_template_directory_uri() .'/css/owl.carousel.min.css', array(), '2.3.4');
wp_enqueue_script('owl-carousel-js', get_template_directory_uri() .'/js/owl.carousel.min.js', array());
wp_enqueue_script('trio-js', get_template_directory_uri() .'/js/trio.js', array(), '1.1.2'); //作成したテーマ専用のjsファイル
}
add_action('wp_enqueue_scripts', 'add_my_scripts');
作成したテーマ専用のjsファイル名は「trio」から2で作成したファイル名に変更しておきましょう。
スライダーを設置する
最後に、スライダーを表示したい部分にコードを追加していきましょう。
owl-carouselの構成は、とってもシンプル。まず、スライダー表示したい部分全体をdivタグで囲み、クラス名をowl-carousel owl-themeに指定しておきます。
そのdivタグ内に、スライダー表示したい数だけdivタグでさらに囲みます。
<div class="owl-carousel owl-theme">
<div>
<a href="#"><img src="表示したい画像ファイルのURL"></a>
<a href="#l">記事タイトル</a>
</div>
<div>
<a href="#"><img src="表示したい画像ファイルのURL"></a>
<a href="#l">記事タイトル</a>
</div>
<div>
<a href="#"><img src="表示したい画像ファイルのURL"></a>
<a href="#l">記事タイトル</a>
</div>
</div>ウィジットに追加するなら、カスタムHTMLブロックを選択してコードを書き込むだけで、好きな場所にスライダーが設置されるはず。
owl-carouselを設置する前の注意点
owl-carouselを追加するには、JavaScriptやfunctions.phpファイルを触る必要があります。
特に、functions.phpファイルに間違ったコードを記述してしまうと、画面が真っ白になってしまったり、エラーメッセージが表示されてしまいます。
必ず、バックアップをとってからカスタマイズをするようにしてくださいね。
または、カスタマイズをする頻度が多い人なら、ステージング環境やローカル環境を整えておくと、思う存分にWordPressをいじくれるようになるので楽しいですよ。
レンタルサーバー「mixhost」なら、ボタン1つでステージング環境が構築できちゃいます。
