サイトに簡単にスライダー機能を追加できるowl.carouselプラグインの使い方

2021/8/19(木) 2024/3/20(水) きむおば

このブログではアフィリエイト・アドセンス広告を利用しています

当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。

表示スペースの限られたスマホ画面でも動的に多くの記事を紹介できるため、スライダー機能を使っているサイトやブログを多く目にしますよね。

このブログにもスライダー機能を追加したいと思い、JQueryプラグインを探してみました。

スライダープラグインの中でも、より簡単で、レスポンシブ対応、スワイプにも対応しているのが「owl.carousel.js」でした。

owl.carousel.jsをWordPressに導入した手順をご紹介します。

目次（読みたいところへジャンプ！）

WordPressサイトにスライダー機能を追加する方法は3つ

WordPressサイトにスライダー機能を追加するには、この3つの方法があります。

テーマに用意されているスライダー機能を使用する
スライダープラグインを利用する
JQueryプラグインを利用する

テーマに用意されているスライダー機能を使用する

高機能なテーマなら、最初からスライダーウィジットが用意されていたりします。その機能を使うだけでスライダーを好きな場所に追加することができます。

スライダー機能のある有名な日本製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ページで確認できますよ。

＞＞＞owlCarousel 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ブロックを選択してコードを書き込むだけで、好きな場所にスライダーが設置されるはず。