ワードプレス

カルーセルスライダーができるWP Posts Carousel|ワードプレスのプラグイン

  • このエントリーをはてなブックマークに追加
  • LINEで送る

WP Posts Carousel

WP Posts Carouselは、自動でスライドするカルーセルスライダーが簡単に設置できるワードプレスのプラグイン。

各ページへのリンクが挿入されていて、画像・タイトル・抜粋文などの項目が表示できる。

カルーセルのサンプル

compact.css

Templateはcompact.cssを使用。
表示は画像とカテゴリー名のみ。

default.css

Templateはdefault.cssを使用。
表示は画像とタイトルと日付。動くスピードは2秒に設定。

light.css

Templateはlight.cssを使用。
表示は画像とタイトルとmoreリンク。

simple.css

Templateはsimple.cssを使用。
表示はタイトルと抜粋文。

プラグインページ

プラグイン詳細およびダウンロードはこちらで確認。
Wp Post Carouselプラグインの公式ページ

プラグインのインストール

ワードプレス管理画面から
「プラグイン」→「新規追加」のページで(wp posts carousel)と検索。
インストール → 有効化をおこなう。

Wp Posts Carouselインストール

基本設定

ワードプレス管理画面のメニュー「設定」→「WP Posts Carousel」で基本設定をおこなう。

16110303

1.上段のメッセージ

「人気記事のスライダーを作るときは(WordPress Popular Posts)プラグインを使うのでいっしょにインストールしてね」
とあるので、とりあえず別プラグイン(WordPress Popular Posts)をインストールして有効化しておく。
有効化するとメッセージは消える。

2.Font Awesome

Font Awesomeというフォントイラストのサービスを使うかどうか。
必要に応じてチェック入力、通常はそのままチェックなしでOK。

Font Awesomeはこんな感じのイラストが使える。
16110304

3.Scripts include

プラグインで使うスクリプトソースをフッターに設置するときにチェックを入れる。初期はヘッダーに設置される。
script~の内容のもの。

必要に応じてチェック入力、通常はそのままチェックなしでOK。

4.Custom breakpoints

レスポンシブデザイン(幅サイズにより可変)で、可変させるポイントの幅サイズを指定する。

必要に応じて入力、通常はそのまま未入力でOK。

※レスポンシブデザインとは?

パソコン、タブレット、スマートフォンといったサイズの異なる画面の表示に、それぞれのサイズに合うように可変させるデザイン。
ひとつのHTMLソースに対して、CSSなどを駆使して作る。

16110308

カルーセルスライダーの設定

カルーセルスライダーの設定は、作成ごとにおこなう。
ページ編集画面で、リッチエディターメニューにボタンが配置されている。
※編集画面を「ビジュアル」にしておく。「テキスト」では表示されない。
16110309

設定画面

別途ウインドウが開き、設定画面があらわれる。
設定項目は多く、細かく設定ができるようになっている。
16110310

設定後の画面

入力が終わって編集画面に戻ると入力部分にショートコードが書き込まれる。

16110311

設定後の変更はできるの?

ショートコードの中を書き換えることで、各要素の編集可能。
よくわからないときは、始めからやり直しになる。

各要素について

設定の各要素について確認してみる。

まずはDisplay options(表示設定)から。

Template

あらかじめ4種類のデザインあり。オリジナルCSSを追加することも可能。
16102901

Post types

挿入するページの種類を選択。
16102902

Post limit

表示するページ数の上限
16102903

Select what you want to displayは、ページを表示させるルールの設定。

Show

どのルールをもとに表示させるか

  • By id(ID番号順)
  • By title(タイトル順)
  • Newest(新着順)
  • Popular(人気順)

16102904

exclude IDs

除外したいページをID番号で指定。複数ある場合はカンマで区切る。

by selected IDs

表示させたいページをID番号で指定。複数ある場合はカンマで区切る。
16102905

Ordering

表示する順序を選択

  • Ascending(昇順)
  • Descending(降順)
  • Random(ランダム)

16102906

Category IDs

カテゴリーごとの表示。カテゴリーページIDで指定。複数ある場合はカンマで区切る。
16102907

Relation

カテゴリーとタグを連携させる
And: カテゴリーとタグの両方
Or: カテゴリーまたはタグ

Tag names

タグごとの表示。タグ名で入力。
16102908

次はPost optionsで、表示させる要素の設定。

Show title

記事のタイトル

Show created date

記事の作成日

Show description

記事の説明(ディスクリプション)
No: 非表示
Excerpt:抜粋のみ
Full content: 全文

Allow shortcodes in full content

記事本文すべて

Show category

カテゴリー名
16102909

Show tags

タグ名

Show more button

詳細ボタン

Show featured image

画像

Image source

画像のサイズ
Thumbnail: サムネイル
Medium: 中サイズ
Large: 大サイズ
Full: 元のサイズ

Image height

画像の高さ

Image width

画像の幅

高さ、幅は表示画面に対しての割合(可変)をパーセント(%)で入力。
16102910

Post optionsではカルーセルの設定をおこなう。

Item to show

各機器の画面で一度に何個ずつ表示させるかを設定する。

on mobile: スマートフォン
on tablets: タブレット
on laptops and desktops: パソコン

16102911

Slide by

1スクロールで動くスライド数

Margin

スライドのアイテム間に余白を作る際の幅サイズ

Infinity loop

アイテムをループさせる

Pause on mouse hover

カルーセル上にマウスポインターを置いたときにスライドを停止させる
16102912

Auto play

自動でスクロールさせる

Autoplay interval timeout

スクロール間で停止する時間。
1秒=1,000ms

Autoplay speed

スクロール間で稼働する時間。
1秒=1,000ms
16102913

Show “next” and “prev” buttons

矢印で表すナビボタンの表示(< >)

Navigation speed

上記で表示したボタンをクリックしたときの稼働速度

Show dots navigation

スクロール内のページをあらわす(・・・)の表示

Dots speed

上記で表示した(・・・)ボタンをクリックしたときの稼働速度
16102914

Delays loading of images

画像読み込み時に遅延が続く場合はチェックを入れる

Mouse events

カルーセル内のマウスでの操作を可能にする

Mousewheel scrolling

マウスのスクロールで操作を可能にする

Touch events

スマートフォンやタブレット、タッチパネルでのタップ操作を可能にする
16102915

Animation

スクロールの動きを変更できる

Auto height

自動的に高さを調整する
16102916

講座実施

今回説明した内容について、実際に講座を開いておこないます。
詳しくはこちらのページで

ワードプレスの便利技その2「カルーセルスライダーを設置しよう」

  • このエントリーをはてなブックマークに追加
  • LINEで送る

【おまかせホーマン】大阪開催!

今回ご紹介した記事について、その他実際に体験していただく講座を定期開催しています。
ぜひ一緒にやってみましょう!

※開催日によってテーマは異なりますので、まずは下記ボタンをクリックしてご確認をお願いします。

詳細はこちら

広告