こんにちは。ビースマ！タイゾーです。
今回は、AFFINGER5”EX”の機能の一つでもある「任意の記事をスライド表示」できる記事スライダーを、AFFINGER5(EXなし版)で使用する方法を紹介します。
ビースマ！のトップページに設置している、↓これです。
AFFINGER5には、「任意の記事スライダー」は用意されていないものの、「任意のカテゴリ記事スライダー」は用意されています。
この「カテゴリ記事スライダー」を活用する事で、任意の記事スライダーの設置が可能です。
この記事の内容
AFFINGER カテゴリスライダーを応用する
step
1記事スライダー用のカテゴリーをつくる
「スライダー用のカテゴリ」を作ります。
例として今回は”おすすめ記事”と名付けたカテゴリーを作成しました。
スライダーに表示したい記事を、作成したカテゴリ(おすすめ記事)に加えます。
step
2カテゴリ記事スライダーのコード作成
投稿記事内やトップページなどの固定ページに、カテゴリ記事スライダーを設置する為のコードを作成します。
ますは記事投稿画面で、カテゴリースライダータグを呼び出します。
タグ→記事一覧/カード→カテゴリ一覧(スライドショー)
そうすると以下のタグが入力されます。
表示したい記事の数・自動スライド有無・サイズなどのイメージに応じてコードを編集します。
[st-catgroup cat="ここにカテゴリidを入れる（ビースマの場合は34)" page="5(スライドする記事の数)" order="desc" orderby="id" child="on (カテゴリに子カテゴリが含まれる場合、onにすると小カテゴリも読み込む)" slide="off (自動スライドのon/off)" slides_to_show="3,3,2" slide_date="on(投稿日表示有無)" slide_more="ReadMore(続きを読む ボタン表示有無、文言記入)" slide_center="off (onの場合スマホで表示した際に両端が見切れる)"]
各項目の詳しい設定は以下タブより確認してください。
st-catgroup cat="0"…表示するカテゴリの指定をします。「0」の場合はカテゴリではなく新着記事を表示
page="5"…スライドショーの表示数を指定します。
order="desc"…並び順です。 asc=昇順（小さいもの順） desc=降順(大きいもの順）
orderby="id"…何を基準に並べ替えるかです。 デフォルトでは記事idの数字の順番です。
orderby= については様々な指定ができる為、下層↓にて記載します。
child="on"…指定カテゴリに子カテゴリが含まれる場合、それを含むかどうか
slide="on"…自動スライドショーのONOFF
slides_to_show="3,3,1"…画面のサイズに対して、スライド記事を何列表示させるか
デフォルトだと 大画面：３列、中画面：３列、小画面：１列。
ざっくり、 PC画面、タブレット画面、スマホ画面 での表示サイズ。
ブラウザによるデザインを変えたくなければ、3,3,3など値を統一する。
slide_date="on"…記事の投稿日を表示するかどうか。
slide_more="ReadMore"…「ReadMore」ボタンの表示。 「続きを読む」など任意の文字に変更可能
slide_center="on"…onの場合スマホで表示した際に両端が見切れる
fullsize_type="" デフォルトでは入っていないコード。 デフォルトのままでは、記事本文が抜粋されて表示される。
fullsize_type="card" このコードを追加することでスライドをアイキャッチのみにできる。
fullsize_type="text" このコードを追加することでスライドをアイキャッチと記事タイトルのみにできる。
orderby="" について
| パラメータ | 意味 |
| none | 順序をつけない |
| ID | 投稿 ID で並び替える |
| title | タイトルで並び替える |
| name | スラッグで並び替える |
| type | 投稿タイプで並び替える |
| date | 日付で並び替える |
| modified | 更新日で並び替える |
| parent | 投稿/固定ページの親 ID 順 |
| rand | ランダムで並び替える |
| comment_count | コメント数で並び替える |
カテゴリIDの確認は、
管理画面→投稿→カテゴリー で確認できます。
step
3TOPページや記事に設置
ステップ２で作成したタグをコピーし、
投稿記事内やTOPページなどに貼り付けると、カテゴリ一覧機能を活用した記事一覧スライダーの設置が可能です。
「タグの説明」で説明している full size type=""タグを使用すると、以下の様な見た目にもカスタマイズ可能です。
fullsize_type="card" アイキャッチ画像のみの表示
fullsize_type="text”アイキャッチと記事タイトルのみ表示
ビースマ！ではfull size=“text”を使用しています。同じデザインでも良い場合は、以下コードをコピーしてください。
更新が簡単。
一度タグを作成してしまえば、 投稿記事を「おすすめ記事」カテゴリに追加するだけで、自動的にTOPページのスライダーに追加する事ができます。
スライダーに記事を追加する手間が少なく、メンテナンスが簡単です。
その他の方法
SmartSlider3 プラグインを使用する。
元は画像スライドショープラグインの「SmartSlider3」でも記事スライドショーが作れます。
画像の準備や、細かな設定・記事追加の度に手間が生じてしまいますが、AFFINGERに限らずどのテーマでも使用できる点がメリットです。
まとめ
今回はAFFINGER5(無印）では用意されていない、「任意の記事スライダー」を、カテゴリ一覧スライダーを応用することで利用可能にする方法を紹介しました。
コードのコピペで利用可能です。 ブログの見た目改善に、興味があれば試してみてください。