loading_logo

【Post Carousel】WordPressプラグイン ちょうどいいカルーセルスライダー

スポンサーリンク

wordpressで投稿した記事をカルーセルスライダーで表示させたい。

その要望をかなえるプラグインはないかと探したところちょうどいいのがありました。
Post Carousel」というプラグイン。

自前で組んで、軽量のswiper.jsslick.jsを使い慣れてるならそれでもいいんだけど、まだあんまり慣れていないそんな方のためにwordpressのプラグインPost Carouselのご紹介します。

Post Carousel – Getting Started

プロ版も用意されていて、さらに色々とできるようですが今回はカルーセルの機能さえあればいいので無料版でも充分に使えます

ちなみに、
プラグインなしでの投稿記事をカルーセルスライダーで実装する方法も考慮してはいかがでしょうか。プラグインはなるべく入れたくないって人にはオススメですよ。

Post Carouselの特徴

このプラグインは残念ながら日本語化はされていませんが、それほど複雑なUIではないのでサクサク設定できると思います。

  1. 100%レスポンシブ対応
  2. 軽量&高速
  3. 自動再生のオン/オフ
  4. 自動再生速度を制御
  5. ホバーカルーセルで停止
  6. カルーセルのタイトルを表示/非表示
  7. 投稿のタイトル、コンテンツ、投稿のメタを表示/非表示
  8. カルーセルのナビゲーション矢印を表示/非表示
  9. カルーセルのページ付け速度を制御します。
  10. 複数のスライドショー(1ページに複数のカルーセル設置可能)
  11. さまざまなデバイスの記事列の数を制御
  12. タッチスワイプのオン/オフ。
  13. マウスドラッグ可能
  14. カスタマイズとスタイル設定が簡単
  15. Firefox、Chrome、IE、Edge、Safariなどのブラウザをサポート

※任意のカスタム投稿をカルーセルで表示することは、無料版ではできません。

スポンサーリンク

Post Carouselの使い方

プラグインのインストール方法は、いつも通りですので省きます。「Post Carousel」で検索でヒットしますので、有効化してください。

1.サイドメニューから「Add New」で追加

有効化すると左サイドメニューに「投稿」の次に「Post Carousel」が追加されます。
さらにその中に「Add New」で新規にカルーセルスライダーを作成しましょう。タイトルは任意のものを入れます。

2.基本設定(GENERAL SETTINGS)

Layout(レイアウト)

無料版はカルーセルのみしか選択できません。が、今回の目的はカルーセルなのでOK。

Select Theme(テーマスタイル)

2つのテーマから好みのものを選択しましょう。ちなみにテーマスタイルは下記のようなイメージです。

Theme Style One

Theme Style Two

Display Posts From(記事の表示方法)

月に記事の表示方法を選択。といってもこちらも無料版は「最新」の記事のみ。人気記事なんかも選べたらもう少しよかったですね。。。

Total Posts(全記事数)

カルーセルスライダー全体で何記事表示するのか。まぁ10〜12記事と言ったところでしょうか。

Post Column(s)(カラム数)

ここから下は、レスポンシブで各デバイスごとのカラム数を決めます。デバイス幅と各記事の幅に応じて数を決めましょう。

Order By

タイトル順、投稿日時順、更新日時順の中から選択します。

Order

昇順、降順を選択します。

3.カルーセル設定(CAROUSEL SETTINGS)

続いてカルーセルの動きやナビゲーションの色などを設定していきます。

AutoPlay(自動再生)

チェックすると自動再生カルーセルをオンにします。

AutoPlay Speed(自動再生速度)

自動再生速度を設定します。

Pause on Hover(ホバーで一時停止)

ホバー時に一時停止を有効にする場合はチェックします。

Navigation(ナビゲーション)

ナビゲーションアローを表示する場合はチェックします。

Navigation Color(ナビゲーションカラー)

ナビゲーション矢印の色を選びます。

Navigation Background(ナビゲーションの背景)

ナビゲーション矢印の背景色を選びます。

Pagination Dots(ページネーションドット)

ページネーションドットを表示する場合はチェックをします。

Pagination Color(ページネーションカラー)

ページネーションドットの色を選択します。

Pagination Active Color(ページネーションアクティブカラー)

ページネーションドットのアクティブの色を選びます。

Pagination Speed

スライドスクロールの速度を設定します。

Touch Swipe(タッチスワイプ)

タッチスワイプをしたい場合はチェックします。

Mouse Draggable(マウスドラッグ)

マウスドラッグをしたい場合はチェックします。

RTL Mode

これは特に無視して大丈夫です。

「STYLIZATION」「TYPOGRAPHY」に関しては、デザイン的な設定なので省略しますね。
お使いのテーマのデザインに合わせて設定してください。

その他のカルーセルに特化したプラグイン

wordpressにはスライダーのプラグインがたくさんあります。

  1. Meta Slider
  2. Slider by 10Web
  3. Smart Slider 3
  4. Slide Anything
  5. Slider Carousel
  6. Smooth Slider
  7. Easing Slider
  8. Easing Slider “Lite”
  9. Master Slider – Responsive Touch Slider
  10. Meteor Slides
  11. Crelly Slider
  12. Skitter Slideshow
  13. Advanced post slider
  14. Instagram Slider Widget

まとめ

今回は、あくまで短時間でかつ初心者向けにこのプラグインを紹介しましたが、スキルがあればこの辺のコンテンツもプラグインなしで自分で作れるようになれるといいですね。
プラグインに頼ってばかりではどんどんサイト速度遅くなっちゃいますからね。

COMMENT