SWELLブロック「投稿リスト」のカスタマイズ方法が分からないので教えてほしいです。
こういった悩みにお答えします。
投稿リストのSettingsの使い方が分かる
投稿リストのPickupの使い方が分かる
本記事の内容
SWELL専用ブロック「投稿リスト」の使い方を解説
投稿リストを挿入
管理画面メニューから、「固定ページ」>「新規固定ページを追加」を選択します。
(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「投稿リスト」を選択すると挿入されます。
固定ページを選択した理由は、投稿リストはサイト型トップページで使う場面が多いかなぁ?と思ったからです。
あわせて読みたい
【SWELL】ブログ型からサイト型トップページへの変更方法を解説
SWELLでサイト型トップページを作る方法を知りたいですか?本記事では、ブログ型からサイト型への変更方法、新着記事一覧ページやトップページの中身の作り方を解説しています。SWELLで自分好みのサイトにしたい・実装の幅を広げたい方は是非ご覧ください。
投稿リストのSettingsの使い方を解説
解説するにあたり以下を用意しました。
記事数:12記事
カテゴリー:エディター, その他, デザイン
タグ:ウィジェット, トップページ, 収益化
こちらをもとに解説していきます。
表示する投稿数
デフォルトは3記事表示です。1〜24記事の間で設定できます。
先頭固定記事を追加する
先頭に固定表示させたい投稿を開き「先頭固定記事表示」をオンにします。
投稿リストに戻り「先頭固定記事を追加する」をオンにすると、先ほど「先頭固定表示」をオンにした記事が先頭に固定されます。
レイアウトを選択
以下の選択肢が用意されています。
投稿の表示順序
以下の選択肢が用意されています。
例えば、「ランダム」を選択すると画像のように記事がランダムで表示されます。
また、降順では「新着記事順」に、昇順では「古い記事順」に表示されます。
各種表示設定
以下の選択肢が用意されています。
公開日を表示する ※ デフォルトは公開日のみオン
更新日を表示する
著者を表示する
PV数を表示する
タイトルを表示する ※ サムネイル型でのみ有効です
画像はサムネイル型で全て表示させています。
カテゴリー表示位置
以下の選択肢が用意されています。
表示しない
サムネイル画像の上 ※ デフォルト
日付の横
画像はデフォルトです。
タイトルのHTMLタグ
以下の選択肢が用意されています。
例えば、投稿リスト上に「新着記事(h2)」がある場合、タイトルのHTMLタグは「h3」にします。
いくつかサイトを調べてみましたが、投稿リスト上に「新着記事(h2)」がある場合、タイトルのHTMLタグに「h2」や「div」を使っているサイトもありました。
最大カラム数
以下の選択肢が用意されています。
画像は「2列」を選択しています。
抜粋文の文字数
以下の選択肢が用意されています。
画像は「120」を選択しています。
「MOREリンクの表示テキスト」と「MOREリンクのURL」
MOREリンクの表示テキスト: 例)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
以下を選択した状態で「選択したタームの論理関係」のみ変えていきます。
タクソノミーの条件設定から、「カテゴリー」>「エディター」と「Classic Editor」と「Gutenberg」を選択します。 ※ Macならcommandキー、Windowsならctrlキーを押しながらクリックすると複数選択できます。
「IN(一つでも該当する)」を選択すると、該当するカテゴリーがあるため4記事全てが表示されます。
「AND(全てに該当する)」を選択すると、全てに該当したカテゴリーはないため記事は表示されません。 ※ 表にしたエディター(親)とClassic Editor(子)の両方にチェックが入っている場合はその記事が表示されます。
「NOT IN(該当しない)」を選択すると、選択したカテゴリー以外の記事が表示されます。
「タクソノミー」の使い方
まず、カスタム投稿タイプ(制作実績)とカスタムタクソノミー(業種)を用意します。
あわせて読みたい
Custom Post Type UIの使い方
CPT UIの使い方を知りたいですか?本記事では、デフォルト投稿タイプやカテゴリー・タグ(タクソノミー)と同じ機能を持ったカスタム投稿タイプとカスタムタクソノミーの説明から用意する方法までを解説しています。CPT UIの使い方を知りたい方は是非ご覧ください。
以下の表をご覧ください。カスタム投稿タイプ(制作実績)では業種がタクソノミー で、デフォルト投稿タイプ(投稿)で言うところのカテゴリー(タクソノミー) に該当します。
カスタム投稿タイプ(制作実績)
※ デフォルト投稿タイプ(投稿)で言うところのタグ(タクソノミー)は用意していません。カテゴリーとタグの違いは親要素を指定できるかできないかです。
デフォルト投稿タイプ(投稿)
タクソノミー ターム カテゴリー ・エディター ・その他 ・デザイン タグ ・ウィジェット ・トップページ ・収益化
そして以下の設定を行うとカスタム投稿タイプ(制作実績)で作成した記事が表示されます。
投稿タイプで絞り込む:制作実績
タクソノミーを選択:業種
ターム:医療
各タクソノミー条件の関係
以下を設定しました。
その後、各タクソノミー条件の関係を設定した結果が以下になります。
全ての条件に合うかどうか どれか1つでも条件に合うかどうか
著者で絞り込む
lorem ipsum 13を追加しました。
注目してほしいのは投稿者 です。以下の表にまとめています。
タイトル 投稿者 lorem ipsum 13 ハラユウ lorem ipsum 01〜12 オトイチ
投稿者で絞り込むから「ハラユウ」を選択するとハラユウの記事のみ表示されます。
今回は以上です。