【SANGO 記事一覧ブロック】の使い方

この記事では、SANGO Gutenberg プラグインのオリジナルブロックである【SANGO 記事一覧ブロック】について解説していきます。

例えば以下のような記事一覧表示を【SANGO 記事一覧ブロック】で作ることができます。

サンプル例

SANGO 3.0が目指すテーマ観とこれからのサイトカスタマイズ方法について 【SANGO ABテストブロック】の使い方 【SANGO ABテストブロック】の使い方

以下のような記事スライダーも実装できます。

まずは、使い方をざっくりと掴んでいただけるように動画を用意しましたのでご覧ください。

SANGO記事一覧ブロックの呼び出し方

まずはエディターを開き、ブロック追加ボタンをクリックします。

クリックすると、ブロック一覧が表示されるのでその中から「SANGO記事一覧」と書かれたブロックを選択します。

各種設定項目

次に、SANGO記事一覧ブロックの設定項目についてご紹介します。

スタイル

6種類の中からお好きなスタイルを選択してください。

ただし、下の段の真ん中のスタイルはトップページ向きスライダー形式で記事が表示され、右下のスタイルはサイドメニュー向きのスタイルで以下のように表示されます。

サイドメニューでの詳しい設定方法はこちらの記事をご覧ください。

サイドバーをブロックエディターだけで作る方法サイドバーをブロックエディターだけで作る方法

記事数

ページ上に表示される記事数を1〜20記事まで選択できます。レンジスライダーのつまみを左右に移動させるか、入力欄に記事数を入力してください。

表示順

記事一覧の表示をお好みで並べ替えることができます。

  • 日付順(昇順)
  • 日付順(降順)
  • 人気順(昇順)
  • 人気順(降順)

セレクトボックスをクリックすると候補が出てくるので、お好みに合わせて選択してください。

カテゴリー選択

入力欄にカテゴリーのキーワードを入力すると候補が出てくるので選択してください。子カテゴリーも含める場合は、トグルをオンにしてください。

タグを選択

入力欄にタグのキーワードを入力すると候補が出てくるので、選択してください。

25 COMMENTS

アバター
はしるな 2022/04/20

記事一覧のタイトル文字列の下にタブを表示させたい

いつもお世話になっております。 SANGO Childのバージョン3.0を使用させていただいております。 記事一覧のタイトルの下側に関連するタブを表示させたいのですが、 可能でしょうか? 横長を利用しているためタブの内容をカテゴリーラベルに差し替えての表示もできません。 よろしくお願いいたします。

回答を見る
アバター
pero 2022/04/08

カテゴリーラベルの出現条件について

連投で失礼いたします。 トップページのブロック内に設定した「SANGO 記事一覧」パーツで、カテゴリーラベルを表示したいのですが、SANGOの設定を間違えているのか?、独自で実装する必要があるのか?分からず、サルワカなどで間接的なヒントがあるものの、分からなかったので質問させていただきました。表示の条件は、以下で正しいでしょうか? 【記事一覧 カテゴリーラベル出現条件】 ・[wordpress管理…

回答を見る
アバター
きこ 2022/03/31

記事一覧ページを作成したい

ブロックエディタを使用し、固定ページをトップページに表示しました。 記事一覧ブロックの下部にボタンを挿入し、記事一覧ページに飛べるようにしたいのですが、記事一覧ページの作成が出来ません。 (過去記事の方法も試してみましたが、出来ませんでした……) そのため、カテゴリ別の記事一覧は確認できますが、新着記事一覧が見れずにいるのでどうにか対策がないかと思いコメントさせていただきました。 お忙しいところ恐…

回答を見る
アバター
pero 2022/03/22

記事一覧スライダーのカルーセルで1枚表示にしたい

記事一覧のカルーセルタイプで、[同時に表示するスライド数]が、最小2枚となっていますが、1枚のパターンは実装の予定はありますでしょうか。 目指したいのは、DUB DWSiGN様(https://dubdesign.net/)のヒーローエリアでして、cssの装飾は自分でするのですが、表示するスライド数とカテゴリーはSANGOの機能でないとJSかテンプレートの編集でないと実装できなそうでしたので、こち…

回答を見る
アバター
まーじ 2022/03/03

記事一覧ブロックでカスタムタクソノミーで記事を絞り込みできるようにしたい

SANGOを利用させていただいております。 いつも更新していただきありがとうございます。 記事一覧ブロックに関して、「カテゴリー」や「タグ」を選択して記事を絞り込みできる仕様になっているかと思いますが、追加で「カスタムタクソノミー」「ターム」で記事を絞り込みできるようにしていただきたいと感じたため、コメントさせていただきました。 現在、「カテゴリー」とは別の軸である「カスタムタクソノミー」で記事一…

回答を見る
アバター
轟元気 2022/02/25

記事一覧ブロックでidで記事を検出する方法

SANGOの更新いつもありがとうございます。 表題の件ですが、記事一覧ブロックや関連記事ブロックにて記事を抽出する際にidを使用することはできるのでしょうか? というのも当方、カスタム投稿を使用している部分がありまして、そちらの投稿を記事に呼び出す際にショートコードを利用しているのですが([card id="1111,2222"]みたいなやつです)どうせなら、ブロックでもできるようにならないかと思…

回答を見る
アバター
くく 2022/02/20

記事一覧の表示アイキャッチを真四角ではなく、横いっぱいで使用したい

いつもこちらのサイトを参考に、少しづつデザインや表示したい方法が形にできています。 ありがとうございます。 【質問】 SANGO記事一覧を使用して、表示設定を小さめの表示にしようとすると、 アイキャッチが真四角にしか表示されません。 できれば横いっぱいに表示したいのですが、可能でしょうか?

回答を見る
アバター
kura-kura 2022/02/08

追加CSSクラスが設定できない

記事一覧ブロックの設定の[高度な設定] > [追加CSSクラス]に入力したクラスが適用されません。ブラウザのインスペクタでソースコードを確認しても入力したクラスがコードに反映されていないようです。 元々記事一覧ブロックは、配下に様々なタグが含まれるため、追加CSSを使えない仕様になっているでしょうか? お手数をかけますが、教えていただけると助かります。

回答を見る
アバター
ちひろ 2022/02/02

記事一覧の画像に余白をつけたい

いつもお世話になっております! 固定ページで作成しているホーム画面に、SANGO記事一覧で記事が反映されるようにしました。 そこで記事一覧のアイキャッチ画像に余白をつけたいのですが、 /*-------------------------------------- 記事カードに余白を追加 --------------------------------------*/ .cardtype__img…

回答を見る
アバター
轟元気 2022/01/09

記事一覧ブロックで固定ページも表示したい

SANGOの更新、いつもありがとうございます。 表題の件ですが、記事一覧ブロック「記事をピックアップする」にて固定ページを指定することはできるのでしょうか? もし可能であれば方法をお教えいただけると幸いです。 お忙しいところ恐縮ではございますが、よろしくお願いいたします。

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。