今回の記事は、ショートコードを使ったスライドショーの設置と細かな設定方法を紹介しています。
- 記事内のショートコードをコピペするだけで設置が可能です
- 設定はショートコードを直接書き換えるだけです。難しそうに感じますが、この記事を読めば簡単に理解できるはずです
僕のウェブマガジン「GOKUI」はトップページにスライドショーを設置しています。
個人的な好みからすると動きのあるページはあまり好みではないのですが、技術的な興味があって設置してみました。
技術的に...といっても難しいことは何もなくて、ショートコードを埋め込むだけでこのような感じで動いてくれます。
今回はこのようにショートコードを使ったスライドショーの設置と細かな設定方法を解説していきます。
スライドショーの設置方法
今回は固定ページにスライドショーを設置する方法で解説していきますが、投稿ページでも作業は同じです。
１）まずは下に記載してあるショートコードをそのままコピーして下さい。
[st-catgroup cat="" page="" order="" orderby="id" child="on" slide="on" slides_to_show="on" slide_date="off" slide_more="ReadMore"]
２）ワードプレスの管理画面から、固定ページ＞新規作成に進みます。
３）固定ページの作成画面が表示されたので、先ほどコピーしたショートコードを貼り付けます。
４）これでスライドショーが設置されているはずなので、プレビュー画面で確認してみて下さい。
スライドショーの設定方法
次に作成したスライドショーの詳細設定をします。
設定方法はとても単純で、ショートコードをそのまま書き換えるだけの作業になります。
例えばショートコード内に【 st-catgroup cat="" 】と書かれた部分がありますが、 ここはスライドショーに表示させたいカテゴリーを設定する場所です。
【 st-catgroup cat="ここの部分" 】 にカテゴリーIDを入力することで、スライドショーに表示させたい記事をカテゴリーで絞り込むことが出来るのです。
このようにショートコードにはそれぞれ意味があり、 "" の間に数字や文字列等を入れることで、そのショートコードの設定ができるようになっています。
一つ一つ見ていきましょう。
① 【 st-catgroup cat="" 】 の部分
上にも書きましたが、ここは表示させたいカテゴリーを絞り込むところです。
カテゴリーを絞り込まないのであれば何も入力しなくても構いませんが、カテゴリーを絞り込む場合には表示させたいカテゴリーIDを入力してください。
カテゴリーを指定しない場合は何も入力しなくても良い
【 st-catgroup cat="" 】
カテゴリーを指定する場合はIDを入力する
例えば表示させたいカテゴリーのIDが2の場合
【 st-catgroup cat="2" 】
表示させたいカテゴリーが複数の場合は【,】で区切る必要がある
例えば表示させたいカテゴリーIDが2と3と4の場合
【 st-catgroup cat="2,3,4" 】
逆に表示させたくないカテゴリーがある場合は、-（マイナス）で除外する
例えば表示させたいカテゴリーIDが7の場合
【 st-catgroup cat="-7" 】
こんな感じです。
ちなみにカテゴリーIDは、ワードプレスの管理画面から、投稿＞カテゴリーと進むと確認できます。
② 【page=""】 の部分
ここはスライドショーに表示させる記事のページ数を指定するところです。
記事数を５つにする場合
【page="5"】
記事数を８つにする場合
【page="8"】
例えば【page="8"】と入力した場合、8つの記事を使ってぐるぐるとスライドショーが開始されます。
③【 order="" 】の部分
ここはスライドショーに表示させる記事の順序をDESC（降順）ASC（昇順）で指定するところです。
スライドショーの記事を新しい順に並べる場合
【 order="desc" 】
スライドショーの記事を古い順に並べる場合
【 order="asc" 】
通常は新しい順に並べると思うので 【 order="desc" 】 で良いと思います。
④ 【 orderby="" 】の部分
ここはスライドショーに表示させる記事の順序を決める際のキーとなる項目を指定するところです。
デフォルトは【id】となっていて、投稿記事のIDによって表示順序が決められますが、その他にも色々な設定ができます。
記事のIDをキーにする場合 ★デフォルト
【 orderby="id" 】
記事のタイトルをキーにする場合
【 orderby="title" 】
記事の日付・時刻をキーにする場合
【 orderby="post_date" 】
ランダムに表示させたい場合
【 orderby="rand" 】
こだわらなければデフォルトで良いと思います。
⑤ child="" の部分
ここはスライドショーに子カテゴリーの表示を指定するところです。
ワードプレスではカテゴリーに階層構造を持たせることができますが、その辺りを使いこなしている方であれば、ここの設定で表示方法をコントロールすることができます。
子カテゴリーを表示させたい場合
child="on"
子カテゴリーを表示させたくない場合
child="off"
⑥【 slide="" 】の部分
ここはスライドショーのオンオフを切り替えるところです。
スライドショー化させたい場合
【 slide="on" 】
スライドショー化させたくない場合
★ただの一覧表示になります
【 slide="off" 】
今回はスライドショー化が目的なので【 slide="on" 】でOKです。
⑦ slides_to_show="" の部分
ここはスライドショー画面の列数（一度に表示させる記事数）を指定できます。
【slides_to_show="3,3,2"】といった感じに３つの数字を並べて指定しますが、これは左から順に「PCのような大画面，タブレットのような中画面，スマホのような小画面」を意味しています。
例えは、PCのような大画面=３列、タブレットのような中画面＝３列、スマホのような小画面＝２列にしたい場合には
【slides_to_show="3,3,2"】
例えは、PCのような大画面=４列、タブレットのような中画面＝４列、スマホのような小画面＝３列にしたい場合には
【slides_to_show="4,4,3"】
といった感じに設定します。
⑧ slide_date="" の部分
ここはスライドショーに表示される記事に日付を表示させるかどうかを指定するところです。
日付を表示させたい場合
【 slide_date="on" 】
日付を表示させたくない場合
【 slide_date="off" 】
⑨ slide_more="" の部分
ここはスライドショー内に表示される「ボタンの表示名」を指定するところです。
このボタンをクリックすると記事ページに飛ぶので、「続きを読む」とか「ReadMore」とかで良いと思います。
何も表示させない場合
【 slide_date="" 】
「続きを読む」と表示させたい場合
【 slide_date="続きを読む" 】
「ReadMore」と表示させたい場合
【 slide_date=" ReadMore " 】
まとめ
今回はスライドショーの設置と設定の方法を記事にしてみました。
細かな設定で自分好みのスライドショーを作成し、ホームページに彩りを与えてみて下さい。