wordpressにてサイトを構築中なるべくスマートフォンの状態では、スッキリ見せたい。

記事はリスト表示ではなく、フリックして表示できるようにしたいという素人ではなく、ちょっとウェブのことに詳しいクライアントの担当者がいました。

時間のない中そういった要望を叶えるために、一からコードを組んでたんじゃ、スキルアップにはなるんだけど間に合わない…

ってことでwordpressのプラグインにお世話になることにしました。

 

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

wordpressにはスライダー系のプラグインがたくさんあります。ちょっとググれば

などの様々なスライダーがあります。

今回はレスポンシブルWEBデザインに対応した記事を表示するカルーセルであったため上記のスライダーとはちょっと希望の見た目にはなりませんでした。

そこで見つけたのが「WP Posts Carousel」です。

デモページはこちら

プラグインの詳細ページはこちら

使い方

プラグインのインストール方法は省きます。

インストールすると、投稿編集画面のクイックタグに下記のボタンが追加されます。

WP-Posts-Carousel1

 

WP-Posts-Carousel2

 

編集項目

Display options

1.Template……cssを設定します。予め用意された4つより選択します。

2.Post type……投稿、固定ページ、カスタム投稿(設定した場合)から任意のポストタイプを選択します。

3.Posts limit……カルーセルの表示記事数を設定します。

4.Select what you want to display……表示させたい記事を選びます。記事IDで任意の記事を表示することも可能です。

5.Ordering……記事の表示順序を昇順・降順・ランダムから選択します。

6.Category IDs……カテゴリー毎に表示したい場合はカテゴリーIDを入力します。複数も可能です。

7.Tag names……タグ毎に表示したい場合はタグIDを入力します。複数も可能です。

Post options

8.Show title……記事タイトルの表示・非表示

9.Show created date……公開日時の表示・非表示

10.Show description……本文または抜粋の表示・非表示

11.Allow shortcodes in full content……本文を全文表示させたい場合のみチェックします

12.Show category……カテゴリーの表示・非表示

13.Show tags……タグの表示・非表示

14.Show more button……詳細ボタンの表示・非表示

15.Show featured image……サムネイル画像の表示・非表示

16.Image source……サムネイル画像のサイズ設定

17.Image height……サムネイル画像の縦サイズ(%で)

18.Image width……サムネイル画像の横サイズ(%で)

Carousel options

19.Items to show……一度に表示させる記事数

20.Slide by……1スクロールで送る記事数

21.Inifnity loop……記事の繰り返しループ設定

22.Auto play……自動スクロールの設定

23.Pause on mouse hover……マウスホバー時にスクロールを停止

24.Autoplay interval timeout……自動スクロールの時間設定

25.Show “next” and “prev” buttons:……次へと前への矢印ボタンの表示・非表示

26.Navigation speed……記事スクロール時のスピード設定

27.Show dots navigation……ドットナビゲーションの表示・非表示

28.Dots speed……ドットナビゲーションのスピード設定

29.Delays loading of images……画像の遅延読込の設定。読込速度が遅い場合チェックするといい

30.Mouse events……マウスアクションのオン・オフ

31.Mousewheel scrolling……マウスホイールスクロールのオン・オフ

32.Touch events……スマートフォンなどのタッチアクションのオン・オフ

33.Animation……スライドアニメーションの設定

上記の設定が終わったら、「Insert Shortcode」で記事へ挿入します。

ショートコードの紹介

設定後、はき出されたショートコードのサンプルがこちら。

[wp_posts_carousel template=”compact.css” post_type=”post” all_items=”10″ show_only=”id” posts=”” ordering=”asc” categories=”” tags=”” show_title=”true” show_created_date=”true” show_description=”false” allow_shortcodes=”false” show_category=”true” show_tags=”false” show_more_button=”true” show_featured_image=”true” image_source=”thumbnail” image_height=”100″ image_width=”100″ items_to_show=”4″ slide_by=”1″ margin=”5″ loop=”true” auto_play=”true” stop_on_hover=”true” auto_play_timeout=”1200″ nav=”true” nav_speed=”800″ dots=”true” dots_speed=”800″ lazy_load=”false” mouse_drag=”true” mouse_wheel=”true” touch_drag=”true” easing=”linear”]

下記のphpでショートコードを呼び出す方法を使用すれば、テーマ中でも使えますね。

<?php echo do_shortcode('[ショートコードの文字列]'); ?>