ブログで記事スライドショーが設置されていることで，ブログのデザインがおしゃれになるだくでなく，気になる記事があるとクリックしてもらえて，回遊率が上がります。
今回は，WordPressテーマWING(AFFINGER5)で，記事スライドショー(スライダー)を設置する方法を解説します。
- ブログの各ページで記事スライドショーの設置
- 記事スライドショーの表示のカスタマイズ
この記事はこんな方におすすめ
- 記事スライドショーの設置方法が知りたい
- ブログをおしゃれにしたい
- ブログの回遊率を上げたい
参考
「WING（AFFINGER5）」は，SEOに強く収益が発生しやすいと評価されていて，稼ぐことに特化した人気のあるWordPress有料テーマです。
WING（AFFINGER5）に興味のある人は，
WING（AFFINGER5）【メリットとデメリットは？】購入とインストールの手順
詳しく解説していますので，参考にしてください。
-
-
WING（AFFINGER5）【メリットとデメリットは？】購入とインストールの手順
続きを見る
それでは，順に解説していきます。
記事スライドショーのパターン
今回解説する記事の完成のイメージとして，下の画像のような記事スライドショーを設置しています。
今回解説する「記事スライドショー」のパターンは，4つになります。
- ヘッダーに表示
- ヘッダーに複数表示
- トップページ上に表示
- ウィジェトで任意の場所に設置
それでは順に解説していきます。
ヘッダーに表示
ヘッダー画像のエリアに大きく表示させる方法です。
管理画面から，「AFFINGER5管理」をクリックします。
「ヘッダー」をクリックします。
ここで記事スライドショーの設定ができますので，好みで設定してください。
記事スライドショーの表示に最低限必要な設定は，
- 「ヘッダーに記事をスライドショーで表示する(※画像スライドショーより優先されます)」にチェックを入れる
- 「表示するカテゴリID :」にカテゴリーIDを入力する(ここでは，カテゴリーのIDが11(WordPress)と8(プログラミング)にしています。)
「save」をクリックします。
ヘッダー画像エリアに大きく表示されています。(大きすぎるので，ここにうまく表示させるには画像サイズを調整する必要があります。)
ヘッダーに複数表示
次に，ヘッダーに複数表示させる方法です。
管理画面から，「AFFINGER5管理」をクリックします。
「ヘッダー」をクリックします。
「ヘッダーコンテンツ設定」の編集画面で，
- 「タグ」
- 「記事一覧 / カード」
- カテゴリ一覧(スライドショー)
の順に選択します。
上のようなスライドショーのコードが表示されます。
ここでは，
- page="7"(表示する記事の総数を7)
- slides_to_show="5,3,1"(表示数を5)
- fullsize_type="text"(画像とテキストを表示)
にしています。
「save」をクリックします。
ヘッダーに記事スライドショーが複数(ここでは7つ)表示されています。
トップページ上
トップページにスライドショーを設置する方法です。
管理画面から，
「AFFINGER5管理」をクリックします。
「トップページ」をクリックします。
「挿入コンテンツ」の編集画面で，
- 「タグ」
- 「記事一覧 / カード」
- カテゴリ一覧(スライドショー)
の順に選択します。
上のようなスライドショーのコードが表示されます。
ここでは，
- fullsize_type="text"(画像とテキストを表示)
のみ変更しています。
「save」をクリックします。
トップページの上に記事スライドショーが表示されています。
ウィジェットで任意の箇所に設置
ウィジェットで任意の箇所に設置する方法です。
- トップページ
- 記事ページ
- サイドバー
などに設置する場合が多いです。
ここでは，投稿記事の上に表示する方法を解説します。
管理画面から，「ウィジェット」をクリックします。
「STINGERカスタムHTML」をドラッグ・アンド・ドロップで「投稿記事の上に一括表示」まで移動します。(または，「STINGERカスタムHTML」をクリック→「投稿記事の上に一括表示」をクリック→「ウィジェットを追加」をクリック)
- 「タイトル」を入力します。(ここでは「PickUp!」)
- 記事スライドショーのコードを入力します。(ここでは画像とテキストを表示のみ変更)
- 「保存」をクリックします。
投稿記事ページの上に表示されています。
このように，任意の箇所にスライドショーを設置することが出来ますので，気に入った場所に設置してください。
「STINGERカスタムHTML」を「トップページ上部ウィジェット」に追加します。
- タイトル
- 記事スライドショーのコード(ここでは画像とテキストを表示のみ変更)
- 「保存」
の順番になります。
設定どおりに表示されています。
記事スライドショーの表示設定
記事スライドショーの表示をカスタマイズする方法を解説します。
スライドショーのコードの""の中に任意の値を入力します。
| st-catgroup cat="" | カテゴリーID(デフォルトは0の新着記事) |
| page="" | 表示する記事の総数 |
| order="" | 日付の順番の設定(新しい記事から="desc" 古い記事から="asc") |
| orderby="" | 並び方法(id, date, modified, ranのいずれかを指定) |
| child="" | 子カテゴリーID |
| slide="" | スライドショーの[on, off]の指定 |
| slides_to_show="" | 表示数(デフォルトは"3,3,1")先頭の数字のみ変更する |
| slide_date="" | 日付の表示の[on, off]の指定 |
| slide_more="" | スライドショーの下に表示するテキスト(デフォルトは"ReadMore") |
| slide_center="" | モバイルで表示(両端の表示[on, off]) |
| full_size_type="" | [画像のみを表示"card"][画像とテキストを表示"text"][すべてを表示""] |
まとめ
今回は以上になります。
それではまた！
