様々な人がトップページなどに最新記事やカテゴリーのスライドショーの設定していると思います！
スライドショーはヘッダーに大きく設定する方法と記事内にコードを入力して設定する2つの方法があります！
どちらもAFFINGER5ではスライドショーの設定が1クリックでできます！
そこで今回は両方の最新記事とカテゴリーのそれぞれのスライドショーの設定方法を紹介します！
他のカスタマイズ方法はこちらの記事で紹介しています！
こんな方におすすめ
- トップページのヘッダーにスライドショーを表示したい
- トップページのヘッダー以外の場所にスライドショーを表示したい
- 記事中にスライドショーを表示したい
もくじ
ヘッダーにスライドショーを表示する方法
ヘッダーに設定できるスライドショーとはこのようなトップページに表示されるスライドショーのことをさします！
大きく表示されるのでとてもインパクトがありますよね！
では、この表示の設定方法について説明していきます！
- AFFINGER5管理をクリックします。
- 「ヘッダー」をクリックして記事スライドショー設定を見てください。
- 一番上にあるヘッダーに記事をスライドショーで表示するにチェックを入れます。
これで設定完了です！
設定を変えなければ新着記事がスライドショーで表示されます。
もし一定のカテゴリーを表示させたい場合は表示するカテゴリIDという欄に表示させたいカテゴリのIDを入力しましょう！
カテゴリIDは「投稿」→「カテゴリ」で確認することが出来ます！
カテゴリリンクを非表示や投稿日を非表示にするなど細かいカスタマイズも同じページで出来るので是非いじってみてください！
コートを使用してスライドショーを表示する方法
記事中、トップページどちらでもやり方は同じです。
まず、編集画面を開いたら「タグ」→「記事一覧」→「カテゴリ一覧(スライドショー)」をクリックします。
すると、このようなコードが表示されます。
初めてこれを見たときはよくわからず困惑したため、この後はこのコードについて紹介します。
注意ポイント
WordPressのエディターがGutenbergになっている場合は、Classic Editorというプラグインを有効化しておきましょう。
スライドショーのコードの意味
まずはスライドショーのコードの意味を紹介していきます。
これが良くわからず設定を諦めてしまう方がいると思うので簡単に解説していきます。
st-catgroup cat=""
表示させたいカテゴリIDを設定します。
最新記事
最新記事を表示させたい場合は
st-catgroup cat="0"のままで大丈夫です。
カテゴリ一覧
カテゴリ一覧を表示させたい場合はまずカテゴリIDを確認します。
カテゴリーの設定方法はこちらの記事に書いてあります！
-
-
【AFFINGER5】ヘッダーメニュー（グローバルメニュー）の設置方法を紹介！
続きを見る
「投稿」→「カテゴリー」をクリックします。
すると、このようなページがでてくるため、表示したいカテゴリーのIDをst-catgroup cat=""に入力します。
例
AFFINGER5のカテゴリーをスライドショーにしたい場合はst-catgroup cat="21"
page=""
表示させたい記事数を設定します。
5記事表示したい場合はpage="5"とします。
order=""
記事の並び順を降順（新しい順）か昇順（古い順）にするかを設定します。
- 降順→desc
- 昇順→asc
と入力します。
orderby=""
何順で記事を並べるかを紹介します。
- none：順序をつけない
- id：投稿IDで並び替える
- title：タイトルで並び替える
- date：日付で並び替える
- modified：更新日で並び替える
- rand：ランダムで並び替える
基本的には設定を変えずに"id"にままでいいと思います！
child=""
子カテゴリーも表示させるかを"ON"か"OFF"で設定します。
基本的には"ON"のままで大丈夫です。
slide=""
スライドにするかしないかを選択します。
この記事を見に来た人はスライドショーにしたいと思うので"on"でいいと思います。
下にONとOFFの違いを表示しておきます。
slide="on"
slide="off"
slides_to_show=""
ここでは、画面の横幅に応じて表示させる列数を設定することが出来ます。
初期状態では「slides_to_show="3,3,1"」となっていますがこの意味は
- 960px以上（主にPC）で3列
- 600px～959px（主にタブレット）で3列
- 599px以下（主にスマホ）で1列
です。
slide_date=""
投稿日や更新日を表示させるか設定できます。
slide_date="on"
ONにするとアイキャッチ画像の右下に投稿日や更新日が表示されます。
slide_date="off"
OFFにするとONであった日付が消えます。
slide_more=""
続きを読むボタンに表示する文字を設定します。
初期状態では「ReadMore」となっていますが、「続きを読む」などに変更してもいいと思います。
slide_center=""
画面の幅が599px以下（主にスマホ）で見たときの表示方法を設定します。
599px以下（主にスマホ）を1列で設定したときは以下のようになります。
slide_center="on"
slide_center="off"
- ON→左右に前後の記事が少し写る
- OFF→1つの記事が画面いっぱいの写る
fullsize_type=""
スライドの表示方法を設定します。
fullsize_type=""
""になにも入力しないと、アイキャッチ画像+記事タイトル+記事が表示されます。
fullsize_type="text"
""にtextと入力すると、アイキャッチ画像+記事タイトルが表示されます。
fullsize_type="card"
""にcardと入力するとアイキャッチ画像のみが表示されます。
ポイント
textとcardでは自動的にslide_date（日付）とslide_moreの表示はなくなります。
注意ポイント
原則として同じサイズのアイキャッチ画像による使用をおすすめします。
横幅100％で合わせているため、上下が見切れてしまったり空白ができたりしてしまします。
【AFFINGER5】スライドショーの設定方法を紹介のまとめ
AFFINGER5では、このように1クリックで記事のスライドショーの表示をすることが出来ます。
スライドショーは訪問者の気を引くこともできるので積極的に使用していきましょう！
では、また次の記事で会いましょう！！