カルーセルスライダーができるWP Posts Carousel|ワードプレスのプラグイン
![WP Posts Carousel](https://lecture.ho-man.net/wp-content/uploads/2016/11/16110302.png)
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インストール](https://lecture.ho-man.net/wp-content/uploads/2016/11/16110301.png)
基本設定
ワードプレス管理画面のメニュー「設定」→「WP Posts Carousel」で基本設定をおこなう。
![16110303](https://lecture.ho-man.net/wp-content/uploads/2016/11/16110303.png)
1.上段のメッセージ
「人気記事のスライダーを作るときは(WordPress Popular Posts)プラグインを使うのでいっしょにインストールしてね」
とあるので、とりあえず別プラグイン(WordPress Popular Posts)をインストールして有効化しておく。
有効化するとメッセージは消える。
2.Font Awesome
Font Awesomeというフォントイラストのサービスを使うかどうか。
必要に応じてチェック入力、通常はそのままチェックなしでOK。
![16110304](https://lecture.ho-man.net/wp-content/uploads/2016/11/16110304.png)
Font Awesomeはこんな感じのイラストが使える。
3.Scripts include
プラグインで使うスクリプトソースをフッターに設置するときにチェックを入れる。初期はヘッダーに設置される。
script~の内容のもの。
必要に応じてチェック入力、通常はそのままチェックなしでOK。
4.Custom breakpoints
レスポンシブデザイン(幅サイズにより可変)で、可変させるポイントの幅サイズを指定する。
必要に応じて入力、通常はそのまま未入力でOK。
※レスポンシブデザインとは?
パソコン、タブレット、スマートフォンといったサイズの異なる画面の表示に、それぞれのサイズに合うように可変させるデザイン。
ひとつのHTMLソースに対して、CSSなどを駆使して作る。
![16110308](https://lecture.ho-man.net/wp-content/uploads/2016/11/16110308.png)
カルーセルスライダーの設定
![16110309](https://lecture.ho-man.net/wp-content/uploads/2016/11/16110309.png)
カルーセルスライダーの設定は、作成ごとにおこなう。
ページ編集画面で、リッチエディターメニューにボタンが配置されている。
※編集画面を「ビジュアル」にしておく。「テキスト」では表示されない。
設定画面
![16110310](https://lecture.ho-man.net/wp-content/uploads/2016/11/16110310.png)
別途ウインドウが開き、設定画面があらわれる。
設定項目は多く、細かく設定ができるようになっている。
設定後の画面
入力が終わって編集画面に戻ると入力部分にショートコードが書き込まれる。
![16110311](https://lecture.ho-man.net/wp-content/uploads/2016/11/16110311.png)
設定後の変更はできるの?
ショートコードの中を書き換えることで、各要素の編集可能。
よくわからないときは、始めからやり直しになる。
各要素について
設定の各要素について確認してみる。
まずはDisplay options(表示設定)から。
Template
![16102901](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102901.png)
あらかじめ4種類のデザインあり。オリジナルCSSを追加することも可能。
Post types
![16102902](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102902.png)
挿入するページの種類を選択。
Post limit
![16102903](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102903.png)
表示するページ数の上限
Select what you want to displayは、ページを表示させるルールの設定。
Show
どのルールをもとに表示させるか
- By id(ID番号順)
- By title(タイトル順)
- Newest(新着順)
- Popular(人気順)
![16102904](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102904.png)
exclude IDs
除外したいページをID番号で指定。複数ある場合はカンマで区切る。
by selected IDs
![16102905](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102905.png)
表示させたいページをID番号で指定。複数ある場合はカンマで区切る。
Ordering
表示する順序を選択
- Ascending(昇順)
- Descending(降順)
- Random(ランダム)
![16102906](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102906.png)
Category IDs
![16102907](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102907.png)
カテゴリーごとの表示。カテゴリーページIDで指定。複数ある場合はカンマで区切る。
Relation
カテゴリーとタグを連携させる
And: カテゴリーとタグの両方
Or: カテゴリーまたはタグ
Tag names
![16102908](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102908.png)
タグごとの表示。タグ名で入力。
次はPost optionsで、表示させる要素の設定。
Show title
記事のタイトル
Show created date
記事の作成日
Show description
記事の説明(ディスクリプション)
No: 非表示
Excerpt:抜粋のみ
Full content: 全文
Allow shortcodes in full content
記事本文すべて
Show category
![16102909](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102909.png)
カテゴリー名
Show tags
タグ名
Show more button
詳細ボタン
Show featured image
画像
Image source
画像のサイズ
Thumbnail: サムネイル
Medium: 中サイズ
Large: 大サイズ
Full: 元のサイズ
Image height
画像の高さ
Image width
画像の幅
![16102910](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102910.png)
高さ、幅は表示画面に対しての割合(可変)をパーセント(%)で入力。
Post optionsではカルーセルの設定をおこなう。
Item to show
各機器の画面で一度に何個ずつ表示させるかを設定する。
on mobile: スマートフォン
on tablets: タブレット
on laptops and desktops: パソコン
![16102911](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102911.png)
Slide by
1スクロールで動くスライド数
Margin
スライドのアイテム間に余白を作る際の幅サイズ
Infinity loop
アイテムをループさせる
Pause on mouse hover
![16102912](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102912.png)
カルーセル上にマウスポインターを置いたときにスライドを停止させる
Auto play
自動でスクロールさせる
Autoplay interval timeout
スクロール間で停止する時間。
1秒=1,000ms
Autoplay speed
![16102913](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102913.png)
スクロール間で稼働する時間。
1秒=1,000ms
Show “next” and “prev” buttons
矢印で表すナビボタンの表示(< >)
Navigation speed
上記で表示したボタンをクリックしたときの稼働速度
Show dots navigation
スクロール内のページをあらわす(・・・)の表示
Dots speed
![16102914](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102914.png)
上記で表示した(・・・)ボタンをクリックしたときの稼働速度
Delays loading of images
画像読み込み時に遅延が続く場合はチェックを入れる
Mouse events
カルーセル内のマウスでの操作を可能にする
Mousewheel scrolling
マウスのスクロールで操作を可能にする
Touch events
![16102915](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102915.png)
スマートフォンやタブレット、タッチパネルでのタップ操作を可能にする
Animation
スクロールの動きを変更できる
Auto height
![16102916](https://lecture.ho-man.net/wp-content/uploads/2016/11/16102916.png)
自動的に高さを調整する
講座実施
今回説明した内容について、実際に講座を開いておこないます。
詳しくはこちらのページで
↓
ワードプレスの便利技その2「カルーセルスライダーを設置しよう」