WordPress

【WordPress】ウェブサイトにカルーセルを追加するプラグインOwl Carousel

November 14, 2017
Owl Carousel


Owl Carouselはウェブサイトにレスポンシブ対応、カスタマイズ可能なカルーセルを追加するプラグイン。プラグインのパラメータで機能を有効することで、デフォルトのWordPressギャラリーを使用し、カルーセルとして使用することもできます。

Owl Carouselプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> Owl Carouselを検索
有効化にするとOwl Carousel、エディタにInsert Shortcode、ウィジェットにOwl Carouselが追加されます。


CarouselsにてAdd New Carouselの項目を入力します。


Add New Carousel Slideでタイトルを入力し、Carouselsを選択、アイキャッチに表示させたい画像を選択します。続いて画像をセットする場合は公開後、Add New Carousel Slideを更に増やしていきます。一覧はOwl Carouselで確認できます。


ビジュアルにし、Insert Shortcodeをクリックすると以下のようにショートコードが挿入されます。
[owl-carousel category="Uncategorized" singleItem="true" autoPlay="true"]
category=”Uncategorized”のUncategorizedをCarouselsで入力したスラッグにします。


ホバーするとタイトル表示。

ウィジェット


ウィジェットを移動させます。


Carouselsは入力したスラッグに変更します。

ギャラリーショートコードを使用して作成


Owl Carousel parametersでUse Owl Carousel with WordPress Galleryにチェックを入れます。


メディアライブラリのギャラリー作成で選択したものがカルーセル表示されます。
[gallery ids="231190,20451,133668,145344,15585,167889,188891,143264,145559,156781,165422"]