SiteOrigin を使ってカテゴリー単位のカルーセルを配置する

トップページにカルーセルを配置する

どうも、スマコマのコマ太郎です。

ページをカスタマイズできるプラグインとして、以前「Page Builder by SiteOrigin」を紹介しましたね。

間が空いてしまいましたが、この記事では当サイトでもトップページで利用しているカルーセルの設定について解説してみようと思います。

このサイトで利用しているカルーセルの例

カルーセルというのは、横並びの画像一覧で左右にスライドすることができるものを言います。

ブログ型のトップページをサイト型にするのにちょうど良いので、ぼくも愛用しています。この記事では、SiteOrigin Post Carousel を使ってカテゴリー単位のカルーセルを作る手順を説明しますね。

このカルーセルを使って、カテゴリー単位のほか、タグ単位や記事を指定してリスト化することも可能です。

SiteOrigin Post Carousel の設定

以下は、すでに「Page Builder by SiteOrigin」がインストールされていることを前提に話を進めます。まだ入っていないなら、こちらの記事をご覧ください。

あわせて読みたい記事
どうも、スマコマのコマ太郎です。 今日はトップページをもっとおしゃれにカスタマイズしたい、そんなあなたにピッタリのプラグインをご紹介しよう...

この記事ではトップページに配置する例で話を進めますね。

ではトップページ用の固定ページの編集画面を開いてください。

固定ページの編集画面

右上にある [ページビルダー] をクリックします。

配置したいセルを選択する

配置したいセルを選択し、[ウィジェットを追加] をクリックします。なお、列・行の作り方は ↓ 以下の記事を参考にしてください。

あわせて読みたい記事
どうも、スマコマのコマ太郎です。 今日はプラグイン「page builder by siteorigin」を使ってトップページをカスタマイ...
カルーセル ウィジェットの選択画面

[SiteOrigin Post Carousel] をクリックします。

SiteOrigin Post Carousel

追加された [SiteOrigin Post Carousel] にマウスカーソルを合わせると右上にメニューが表示されます。その中にある [編集] をクリックします。

SiteOrigin Post Carousel の設定画面

ここでカルーセルの設定を行います。

Title:タイトルを入力します。

Featured Image size:カルーセルの画像サイズを指定します。(いろいろ試してテーマにマッチしたものを選ぶといいです)

[+ Posts query] をクリックすると、さらにメニューが展開されます。

SiteOrigin Post Carousel 追加の設定画面

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:1ページあたりの記事数を指定できます。未指定だとすべてロードされます。カルーセルをスライドしたとき、何記事表示させるかの指定です。10くらいが妥当でしょう。

右下にある青い[終了]ボタンをクリックして保存します。さらに固定ページの [公開]ボタンをクリックすることでページが保存され、公開されます。

SiteOrigin Post Carousel の使い方のまとめ

「Page Builder by SiteOrigin」には、さまざまなウィジェットがあり、トップページをブログ型からサイト型に変更するのに役立ちます。

中でも、このカルーセル ウィジェットは使い勝手が良いのでおすすめです。

なお、このカルーセルで追加されるスライドボタンですが、残念ながらこのサイトでは機能しませんでした。その理由は当サイトで使っているテーマ(ATLAS)との競合でした。

なのでボタンはCSSを変更して消しています。その方法は以下の記事でご紹介しています。

あわせて読みたい記事
ボタンが機能しないのでCSSで消した
どうも、スマコマのコマ太郎です。 このサイトのトップページで活用している「Page Builder by SiteOrigin」にはカルー...

 コメント/質問、お気軽にどうぞ。

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

XMLサイトマップを作成するプラグイン

WordPressでXMLサイトマップを作成するなら、このプラグイン

WordPress を簡単にバックアップして復元できるプラグイン

HTMLサイトマップを用意してみよう

HTMLサイトマップを生成できるキャッシュ機能付きプラグイン

トップページをおしゃれに自作カスタマイズしたいなら、このプラグイン

ユーザー名を偽装する

ログイン ユーザー名をセキュリティ向上のため隠すには?

Page Builder by SiteOrigin の基本的な使い方