この記事は、AFFINGER5を購入して最短でブログページのデザインを仕上げるロードマップです。
購入検討されていた方は、WordPressテーマ 「WING（AFFINGER5）」より、購入可能です。
AFFINGER5って何？って思った方は、こちらの記事をご覧ください。
今回は、ブログのホーム画面のデザインを変更する内容の記事です。
【AFFINGER５】最短でブログのデザインを整える【１回目】から読まれる方はこちら
AFFINGER5の管理画面より、自分のお気に入りのデザインに編集していきましょう。
ホーム画面の作成は、固定ページを新規作成して作成します。
①ヘッダーにスライドショーを設定する
今回のスライドショーは、新着記事の一覧として作成します。
前提として、プラグイン「Classic Editor」を利用した方法で解説しますので、
Gutenbergでご利用の方は、プラグイン「Classic Editor」インストールしてもらうか、
後述のショートコードをコピペして作成してください。
スライドショーのショートコードを作成する
AFFINGER5管理→「ヘッダー」→「ヘッダーコンテンツ設定」へ移動する。
続いて、ヘッダーコンテンツ設定より、
「タグ」→「記事一覧」→「カテゴリ一覧」という流れで、ショートコードを挿入します。
私の場合は下記のショートコードを記載しています。（下記は、コピペOKですが、括弧[]を除外してますのでご注意ください）
st-catgroup cat="0" page="8" order="desc" orderby="id" child="on" slide="on" slides_to_show="8,3,1" slide_date="" slide_more="ReadMore" slide_center="off" fullsize_type=""
それぞれの意味を記載しておきます。
- st-catgroup cat="カテゴリID指定" （”０”はカテゴリ指定なし）
- page="読み込み数"
- orderby="id"
- child="子カテゴリーの読み込み"
- slide="スライドショーのオンオフ"
- slides_to_show="列数表示"＝私の場合、大画面で8枚表示,中画面で3枚表示,小画面で1枚表示
- slide_more="続きを読む"
- slide_center="off"
off" fullsize_type="" (アイキャッチのみは"card" アイキャッチ+タイトルは"text")
ちなみに、別テーマでスライドショーを作成される場合は、下記のような流れで進めるとOKです。
テーマごとに使い勝手が違うのでご参考までに記載しときます。
①固定ページを新規作成する
管理画面より、固定ページ→新規追加をクリックする。
タイトルに名前を付けてひとまず、非公開で保存しましょう。これで、下準備完了です。
では、スライドショーの設定について説明をします。(スライドショー設定自体は、AFFINGER5以外のテーマでも同じ設定です。)
スライドショーで最新記事を表示すると動きもあって注目されやすいですし、スマートな印象に仕上ります。
ではさっそく手順説明に入りますね。
下記のプラグインが簡単にスライドショー表示できましたので方法で解説します。
プラグイン『WP Responsive Recent Post Slider』をインストールする
プラグインの『WP Responsive Recent Post Slider』をインストールし有効化させましょう。
インストール方法はこちらの記事でも解説しています。
『WP Responsive Recent Post Slider』の使い方
管理画面より、Recento Post Slider → Recento Post Slider をクリックする。
下記の赤枠のショートコードのいづれかをコピーする。
①で作成した、固定ページへショートコードを貼り付ける。
※グーテンベルクの場合、『＋』をクリック→『ショートコード』をクリックする。
下記は、見出しで新着記事と記載し、パターン①とパターン②を貼りた場合となります。
プレビュー画面↓↓です。
パターン①
[recent_post_slider design="design-1"]
パターン②
[recent_post_carousel design="design-1"]
ショートコードの補足
WP Responsive Recent Post Slider には、パターン①と②があります。
さらに、パターン①にはデザインが4種類用意されています。
- パターン① recent_post_slider design=”design-〇″ ☜この〇部分を１~４で任意で変更する。
- パターン② recent_post_carousel design="design-1" ☜で１スライドで複数表示に変更する。
デザインはこちらでご確認可能です。
また、下記のコードを付け足し”〇”の値を変えれば、表示方法をカスタマイズも可能。
- recent_post_slider limit=”4″ ※投稿最大数 ”-1”ですべて表示
- design=”design-4″ ※デザインを選択１~４
- show_category_name=”true” ※カテゴリー名表示の有無
- show_content=”true” ※内容表示の有無
- show_date=”true” ※投稿日表示の有無
- dots=”true” ※ページネーション表示の有無
- arrows=”true” ※矢印表示の有無
- autoplay=”true” ※スライダーオート表示の有無
- autoplay_interval=”5000″ ※スライド待機時間（秒）表示の有無
- speed=”1000″ ※スライド移動速度（秒）表示の有無
- content_words_limit=”20″ ※表示可能単語数の指定
- show_read_more ※Read more ボタン表示有無
- show_author ※投稿者名の表示有無
- [recent_post_carousel slides_to_show="3"
まとめ
今回は、新着記事のスライドショー表示について解説しました。
スライドショー表示の方法は、複数ありますが、AFFINGER5だと設定が簡単です。
スライドショー表示でブログの印象をワンランクアップさせましょう。
次回は、おすすめヘッダーカード型の記事紹介について解説します。