どうも、スマコマのコマ太郎です。
ページをカスタマイズできるプラグインとして、以前「Page Builder by SiteOrigin」を紹介しましたね。
間が空いてしまいましたが、この記事では当サイトでもトップページで利用しているカルーセルの設定について解説してみようと思います。
カルーセルというのは、横並びの画像一覧で左右にスライドすることができるものを言います。
ブログ型のトップページをサイト型にするのにちょうど良いので、ぼくも愛用しています。この記事では、SiteOrigin Post Carousel を使ってカテゴリー単位のカルーセルを作る手順を説明しますね。
このカルーセルを使って、カテゴリー単位のほか、タグ単位や記事を指定してリスト化することも可能です。
SiteOrigin Post Carousel の設定
以下は、すでに「Page Builder by SiteOrigin」がインストールされていることを前提に話を進めます。まだ入っていないなら、こちらの記事をご覧ください。
この記事ではトップページに配置する例で話を進めますね。
ではトップページ用の固定ページの編集画面を開いてください。
右上にある [ページビルダー] をクリックします。
配置したいセルを選択し、[ウィジェットを追加] をクリックします。なお、列・行の作り方は ↓ 以下の記事を参考にしてください。
[SiteOrigin Post Carousel] をクリックします。
追加された [SiteOrigin Post Carousel] にマウスカーソルを合わせると右上にメニューが表示されます。その中にある [編集] をクリックします。
ここでカルーセルの設定を行います。
Title：タイトルを入力します。
Featured Image size：カルーセルの画像サイズを指定します。（いろいろ試してテーマにマッチしたものを選ぶといいです）
[+ Posts query] をクリックすると、さらにメニューが展開されます。
Post type：投稿タイプを選択します。投稿（記事）の一覧を作るので、[投稿]のままで OK です。
Post in：個別に記事を指定する場合は、ここで記事を選択できます。今回は入力しません。
Taxonomies：カテゴリー、タグから選択できます。今回はカテゴリーでリスト化するので、カテゴリーから選択してください。カテゴリーがたくさんある場合、すべて表示されないので Search を使って検索してください。
Date selection type：投稿日時を指定することでカルーセルに表示する記事にフィルターをかけることができます。デフォルトのままで OK です。
・Specific：特定
・Relative：相対
Dates：[Date selection type] の期間の指定。今回は未指定で OK です。
Order by：何を元に並び順を決めるかの指定です。Published date（公開日時）のままで OK です。
Order direction：並び順を指定できます。これでもそのままで OK です。
・Ascending：昇順（古い順）
・Descending：降順（新しい順）
Posts per page：１ページあたりの記事数を指定できます。未指定だとすべてロードされます。カルーセルをスライドしたとき、何記事表示させるかの指定です。10くらいが妥当でしょう。
右下にある青い[終了]ボタンをクリックして保存します。さらに固定ページの [公開]ボタンをクリックすることでページが保存され、公開されます。
SiteOrigin Post Carousel の使い方のまとめ
「Page Builder by SiteOrigin」には、さまざまなウィジェットがあり、トップページをブログ型からサイト型に変更するのに役立ちます。
中でも、このカルーセル ウィジェットは使い勝手が良いのでおすすめです。
なお、このカルーセルで追加されるスライドボタンですが、残念ながらこのサイトでは機能しませんでした。その理由は当サイトで使っているテーマ（ATLAS）との競合でした。
なのでボタンはCSSを変更して消しています。その方法は以下の記事でご紹介しています。
↓↓
