AFFINGER5で記事一覧をスライドショー表示する方法|中級者向けマニュアル
AFFINGER5で記事一覧をスライドショー表示する方法|中級者向けマニュアル
AFFINGER5では、専用のショートコードを使うことで、記事中やサイドバーなどサイト内の様々な箇所にスライドショー形式の記事一覧を表示することができます。

今回は、この記事一覧をスライドショー表示する方法について解説します。

記事中にカテゴリ一覧をスライドショー表示する方法

WordPressで記事編集画面を開きます。

WordPressの記事編集画面を開く

WordPressの記事編集画面を開く

 エディターは「ビジュアルエディタ」を選択しておきましょう。

ツールバーの『タグ ▼』をクリックします。

メニューが表示されるので、『記事一覧』を選択し、さらに開いたメニューの中にある『カテゴリ一覧(スライドショー)』をクリックします。

『カテゴリ一覧(スライドショー)』をクリック

『カテゴリ一覧(スライドショー)』をクリック

すると、下記のようにショートコードが表示されます。

スライドショー用のショートコードが表示される

スライドショー用のショートコードが表示される

ショートコードの主な設定部分

このショートコードの主な設定部分を見ていきます。

cat="〇〇"

表示させたいカテゴリーのIDを設定します。

カテゴリーIDの確認方法は、WordPressの管理画面左メニューから『投稿カテゴリー』という順にクリックして進みます。

『投稿→カテゴリー』という順にクリックして進む

『投稿→カテゴリー』という順にクリックして進む

カテゴリー名の右にある数字が、カテゴリーのIDです。

WordPress カテゴリーID

WordPress カテゴリーID

この場合、カテゴリーIDは「1」になります。

表示させたいカテゴリーのIDをcat="〇〇"の「〇〇」のところに入力します。

page="〇〇"

表示数を設定します。

5件表示させたい場合は、「page="5"」と記述します。

order="〇〇"

記事の並び順を、降順にするか昇順にするか設定します。

「〇〇」のところに入力する値が「desc」なら降順(新しい順)、
「asc」で昇順(古い順)で表示されます。

orderby="〇〇"

何順で並べるかを設定します。
使いそうなものを紹介しておきます。

  • none:順序をつけない
  • id:投稿IDで並び替える
  • title:タイトルで並び替える
  • name:スラッグで並び替える
  • type:投稿タイプで並び替える
  • date:日付で並び替える
  • modified:更新日で並び替える
  • parent:投稿/固定ページの親ID順
  • rand:ランダムで並び替える
  • comment_count:コメント数で並び替える

child="〇〇"

子カテゴリーも表示させるかどうかを設定します。

「〇〇」のところに入力する値を「on」にすると、子カテゴリーも表示されるようになります。

slide="〇〇"

スライドさせるかどうかを設定します。
「〇〇」のところに入力する値を「on」にするとスライド表示し、「off」にするとスライド表示しません。

slides_to_show="〇〇,△△,□□"

表示させる列数を設定します。

例えば「slides_to_show="3,3,1"」と入力した場合、

960px以上で3列、
600px~959pxで3列、
599px以下で1列

で表示します。

slide_date="〇〇"

投稿日を表示させるかを設定します。

「〇〇」のところに入力する値を「on」にすると表示され、何も入力しないと非表示になります。

slide_more="ReadMore"

続きを読むボタンに表示する文字を設定します。

デフォルトでは「ReadMore」になっていますが、「もっと詳しく」などに変更できます。

ひと通り設定したら『プレビュー』ボタンをクリックして投稿をプレビュー表示し、確認してみましょう。

スライドショーの表示を確認

スライドショーの表示を確認

記事以外の部分にカテゴリ一覧をスライド表示させる方法

上記の、記事内にカテゴリ一覧をスライド表示させるショートコードを、メモ帳などにコピーしておきます。

WordPressの管理画面左メニューから『外観ウィジェット』という順にクリックして進みます。

『外観→ウィジェット』という順にクリックして進む

『外観→ウィジェット』という順にクリックして進む

ヘッダー画像の下にカテゴリ一覧をスライド表示させる方法

左の「利用できるウィジェット」欄に「テキスト」というのがあるので、これを「ヘッダー画像エリア下のウィジェット」欄にドラッグ&ドロップします。

「テキスト」を「ヘッダー画像エリア下のウィジェット」欄にドラッグ&ドロップ

「テキスト」を「ヘッダー画像エリア下のウィジェット」欄にドラッグ&ドロップ

 「カスタムHTML」でも設定可能です。

すると、下記のような表示になります。

コピーしておいたショートコードを貼り付け

コピーしておいたショートコードを貼り付け

ここに先ほどコピーしておいたショートコードを貼り付けます。

投稿時と同じようにショートコードを設定します。

保存』ボタンをクリックすれば設置は完了です。

サイドバーにカテゴリ一覧を表示させる方法

左の「利用できるウィジェット」欄に「テキスト」というのがあるので、これを「サイドバーウィジェット」欄にドラッグ&ドロップします。

ショートコードを張り付けて、投稿時と同じように設定します。

コピーしておいたショートコードを貼り付け

コピーしておいたショートコードを貼り付け

保存』ボタンをクリックすれば設置は完了です。

まとめ

AFFINGER5の専用ショートコードを使えば、今回のように簡単に記事一覧をスライドショー表示することができます。

オプションで細かい表示設定もできるので、おすすめの記事一覧を表示させたいときは、積極的に活用していきましょう。

スポンサーリンク

スポンサーリンク

おすすめの記事