【SWELL】専用ブロック「投稿リスト」のカスタマイズ方法を解説

こういった悩みにお答えします。

SWELL専用ブロック「投稿リスト」の使い方を解説

投稿リストを挿入

管理画面メニューから、「固定ページ」＞「新規固定ページを追加」を選択します。

（ブロック挿入ツールを切り替え）から、「ブロック」＞「SWELLブロック」＞「投稿リスト」を選択すると挿入されます。

固定ページを選択した理由は、投稿リストはサイト型トップページで使う場面が多いかなぁ？と思ったからです。

投稿リストのSettingsの使い方を解説

解説するにあたり以下を用意しました。

こちらをもとに解説していきます。

表示する投稿数

デフォルトは3記事表示です。１〜24記事の間で設定できます。

先頭固定記事を追加する

先頭に固定表示させたい投稿を開き「先頭固定記事表示」をオンにします。

投稿リストに戻り「先頭固定記事を追加する」をオンにすると、先ほど「先頭固定表示」をオンにした記事が先頭に固定されます。

レイアウトを選択

以下の選択肢が用意されています。

投稿の表示順序

以下の選択肢が用意されています。

例えば、「ランダム」を選択すると画像のように記事がランダムで表示されます。

また、降順では「新着記事順」に、昇順では「古い記事順」に表示されます。

各種表示設定

以下の選択肢が用意されています。

画像はサムネイル型で全て表示させています。

カテゴリー表示位置

以下の選択肢が用意されています。

画像はデフォルトです。

タイトルのHTMLタグ

以下の選択肢が用意されています。

例えば、投稿リスト上に「新着記事（h2）」がある場合、タイトルのHTMLタグは「h3」にします。　

いくつかサイトを調べてみましたが、投稿リスト上に「新着記事（h2）」がある場合、タイトルのHTMLタグに「h2」や「div」を使っているサイトもありました。

最大カラム数

以下の選択肢が用意されています。

画像は「2列」を選択しています。

抜粋文の文字数

以下の選択肢が用意されています。

画像は「120」を選択しています。

「MOREリンクの表示テキスト」と「MOREリンクのURL」

投稿リストのPickupの使い方を解説

解説するにあたり投稿一覧を一部変更（赤枠）しています。

こちらをもとに解説していきます。

「投稿IDを直接指定」と「除外する投稿ID」

除外する投稿IDに「lorem ipsum 10〜12」のIDを入力すると画像のように非表示となります。「投稿IDを直接指定」も方法は同じです。

投稿タイプで絞り込む

デフォルトでは投稿が表示されています。

以下の固定ページを表示させたいと思います。

固定ページを選択すると表示されます。

タクソノミーの条件設定

選択したタームの論理関係

カテゴリーを例に解説していますが使い方はタグも同じです。

カテゴリーがエディターまたは親カテゴリーがエディターのClassic EditorとGutenbergの記事を表にしました。

タイトル	カテゴリー	タグ	ID
lorem ipsum 10	エディター（親）  Classic Editor（子）	ウィジェット	22
lorem ipsum 08	エディター（親）  Gutenberg（子）	ウィジェット	20
lorem ipsum 06	エディター	ウィジェット	18
lorem ipsum 01	エディター	ウィジェット	10

「タクソノミー」の使い方

まず、カスタム投稿タイプ（制作実績）とカスタムタクソノミー（業種）を用意します。

以下の表をご覧ください。カスタム投稿タイプ（制作実績）では業種がタクソノミーで、デフォルト投稿タイプ（投稿）で言うところのカテゴリー（タクソノミー）に該当します。

そして以下の設定を行うとカスタム投稿タイプ（制作実績）で作成した記事が表示されます。

各タクソノミー条件の関係

以下を設定しました。

その後、各タクソノミー条件の関係を設定した結果が以下になります。

著者で絞り込む

lorem ipsum 13を追加しました。

注目してほしいのは投稿者です。以下の表にまとめています。

タイトル	投稿者
lorem ipsum 13	ハラユウ
lorem ipsum 01〜12	オトイチ

投稿者で絞り込むから「ハラユウ」を選択するとハラユウの記事のみ表示されます。

今回は以上です。