wordpress

【AFFINGER】記事一覧スライダーをAFFINGER5で使用する【EXじゃなくてもOK】

2020年6月23日

ヘッダー画像

こんにちは。ビースマ!タイゾーです。

今回は、AFFINGER5”EX”の機能の一つでもある「任意の記事をスライド表示」できる記事スライダーを、AFFINGER5(EXなし版)で使用する方法を紹介します。

ビースマ!のトップページに設置している、↓これです。

AFFINGER5には、「任意の記事スライダー」は用意されていないものの、「任意のカテゴリ記事スライダー」は用意されています。
この「カテゴリ記事スライダー」を活用する事で、任意の記事スライダーの設置が可能です。

 

AFFINGER カテゴリスライダーを応用する

step
1
記事スライダー用のカテゴリーをつくる

「スライダー用のカテゴリ」を作ります。
例として今回は”おすすめ記事”と名付けたカテゴリーを作成しました。

スライダーに表示したい記事を、作成したカテゴリ(おすすめ記事)に加えます。

wordpressの設定画面

step
2
カテゴリ記事スライダーのコード作成

投稿記事内やトップページなどの固定ページに、カテゴリ記事スライダーを設置する為のコードを作成します。

ますは記事投稿画面で、カテゴリースライダータグを呼び出します。

タグ→記事一覧/カード→カテゴリ一覧(スライドショー)

wordpressの記事投稿画面
そうすると以下のタグが入力されます。

wordpressの記事投稿画面

表示したい記事の数・自動スライド有無・サイズなどのイメージに応じてコードを編集します。

[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"…画面のサイズに対して、スライド記事を何列表示させるか
 デフォルトだと 大画面: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の確認は、

管理画面→投稿→カテゴリー で確認できます。

wordpressの設定画面ーカテゴリ

 

step
3
TOPページや記事に設置

ステップ2で作成したタグをコピーし、
投稿記事内やTOPページなどに貼り付けると、カテゴリ一覧機能を活用した記事一覧スライダーの設置が可能です。

「タグの説明」で説明している  full size type=""タグを使用すると、以下の様な見た目にもカスタマイズ可能です。

fullsize_type="card" アイキャッチ画像のみの表示

風呂収納ヘッダ画像

2020/8/12

start-touch-pay

2020/7/30

make-time

2020/7/20

ドラム式洗濯機

2020/7/20

sesame-set

2020/7/20

2020/7/20

 

fullsize_type="text”アイキャッチと記事タイトルのみ表示

ビースマ!ではfull size=“text”を使用しています。同じデザインでも良い場合は、以下コードをコピーしてください。

[st-catgroup cat="記事ID記入" page="6" order="desc" orderby="modified" child="on" slide="on" slides_to_show="3,3,2" slide_center="off" fullsize_type="text"]

 

更新が簡単。

一度タグを作成してしまえば、 投稿記事を「おすすめ記事」カテゴリに追加するだけで、自動的にTOPページのスライダーに追加する事ができます。

スライダーに記事を追加する手間が少なく、メンテナンスが簡単です。

wordpressの設定画面ーカテゴリ

その他の方法

SmartSlider3 プラグインを使用する。

smartsliderプラグイン画像

元は画像スライドショープラグインの「SmartSlider3」でも記事スライドショーが作れます。

画像の準備や、細かな設定・記事追加の度に手間が生じてしまいますが、AFFINGERに限らずどのテーマでも使用できる点がメリットです。

まとめ

今回はAFFINGER5(無印)では用意されていない、「任意の記事スライダー」を、カテゴリ一覧スライダーを応用することで利用可能にする方法を紹介しました。

コードのコピペで利用可能です。 ブログの見た目改善に、興味があれば試してみてください。

 

-wordpress
-, , , , ,

© 2021 ビースマ!