タグ選択の図

AFFINGER5 副業

【AFFINGER5】最短でブログのデザインを整える【2回目】

この記事は、AFFINGER5を購入して最短でブログページのデザインを仕上げるロードマップです。

購入検討されていた方は、WordPressテーマ 「WING(AFFINGER5)」より、購入可能です。

AFFINGER5って何?って思った方は、こちらの記事をご覧ください。

AFFINGER5

今回は、ブログのホーム画面のデザインを変更する内容の記事です。

【AFFINGER5】最短でブログのデザインを整える【1回目】から読まれる方はこちら

AFFINGER5の管理画面より、自分のお気に入りのデザインに編集していきましょう。

ホーム画面の作成は、固定ページを新規作成して作成します。

①ヘッダーにスライドショーを設定する

今回のスライドショーは、新着記事の一覧として作成します。

前提として、プラグイン「Classic Editor」を利用した方法で解説しますので、

Gutenbergでご利用の方は、プラグイン「Classic Editor」インストールしてもらうか、

後述のショートコードをコピペして作成してください。

スライドショーのショートコードを作成する

AFFINGER5管理→「ヘッダー」→「ヘッダーコンテンツ設定」へ移動する。

AFFIN

続いて、ヘッダーコンテンツ設定より、

「タグ」→「記事一覧」→「カテゴリ一覧」という流れで、ショートコードを挿入します。

私の場合は下記のショートコードを記載しています。(下記は、コピペ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指定" (”0”はカテゴリ指定なし)
  • 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-〇″ ☜この〇部分を1~4で任意で変更する。
  • パターン② recent_post_carousel design="design-1" ☜で1スライドで複数表示に変更する。

デザインはこちらでご確認可能です。

また、下記のコードを付け足し”〇”の値を変えれば、表示方法をカスタマイズも可能。

  • recent_post_slider limit=”4″  ※投稿最大数 ”-1”ですべて表示
  • design=”design-4″  ※デザインを選択1~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だと設定が簡単です。

スライドショー表示でブログの印象をワンランクアップさせましょう。

次回は、おすすめヘッダーカード型の記事紹介について解説します。

 

 

 

 

-AFFINGER5, 副業

© 2020 ディープのログ Powered by AFFINGER5