SWELLの投稿リストブロックで新着記事ウィジェットを作ろう!

SWELL 投稿リストブロック活用事例 新着記事ウィジェット

今回は「投稿リストブロック」を使って新着記事ウィジェットを作る方法をご紹介します。

「投稿リストブロック」はレイアウトと表示条件の絞り込み機能が強力なSWELLオリジナルブロックです。

この記事のSWELL公式マニュアルはこちら

【SWELLブロック】投稿リストブロックの使い方 | 【公式サイト】WordPressテーマ SWELL

この記事の目次

[SWELL]新着記事ウィジェットとの違い

実のところSWELLのウィジェット設定画面にはデフォルトで新着記事ウィジェットが用意されています。

SWELL ウィジェット一覧 新着記事
ウィジェット一覧 [SWELL]新着記事
[SWELL]新着記事 設定項目
[SWELL]新着記事 設定項目

「[SWELL]新着記事」ウィジェットでは、特定の記事の除外やカテゴリーによる絞り込みができません。

「投稿リストブロック」で新着記事ウィジェットを作る方法

「投稿リストブロック」で新着記事ウィジェットを作る方法はとても簡単です。

手順は大きく分けると2つです。

STEP
「ブログパーツ」で新着記事の「投稿リストブロック」を作成
STEP
ウィジェットエリアに作成した「ブログパーツ」のショートコードを登録

「ブログパーツ」で新着記事の「投稿リストブロック」を作成

ブログパーツの新規作成

管理画面の「ブログパーツ」から、通常の投稿と同じように、「投稿リストブロック」をエディターで作成します

SWELL ブログパーツ管理画面
ブログパーツ管理画面
「ブログパーツ」とは

「ブログパーツ」とはあらかじめ作成したコンテンツを登録しておく機能で、登録したコンテンツはショートコードで簡単に呼び出すことができます。

繰り返し使うコンテンツを作成するときに非常に便利な機能です。

さらにブログパーツのショートコードは、ウィジェットエリアでも呼び出すことができます!

投稿リストブロックの作成

通常のエディターと同じような画面が表示されるので、「投稿リストブロック」を作成します。

SWELL 投稿リストブロック
投稿リストブロックを作成

投稿リストブロックを設置するとエディターの右サイドバーで「投稿リストブロック」の設定ができるようになります。

SWELL 投稿リストブロック 設定
右サイドバーで設定

投稿リストブロックを新着順に表示

「投稿の表示順序」で「新着順」を選択します。

SWELL 投稿リストブロック 新着順に表示
新着順を選択

抽出条件を絞り込む場合は「Pickup」タブを選択してください。
特定の記事の除外やカテゴリー・タグによる絞り込みができます。

SWELL 投稿リストブロック Pickupタブ
Pickupタブ

投稿IDで絞り込む

SWELL 投稿リストブロック 投稿IDで絞り込む
投稿IDで絞り込む

表示したい記事、表示したくない記事の投稿IDを登録します。

カテゴリー・タグによる絞り込み

SWELL 投稿リストブロック タクソノミー
カテゴリーやタグで絞り込み

カテゴリーやタグを選択すると「含む」「含まない」で表示条件を設定できます。

レイアウトもお好みで調整可能

「[SWELL]新着記事」ウィジェットのレイアウトパターンはカード型とリスト型の2つですが、「投稿リストブロック」で新着記事ウィジェットを作れば、5つのレイアウトを選択できます。

カード型

SWELL 投稿リストブロック 人気記事 カード型

リスト型

SWELL 投稿リストブロック 人気記事 リスト型

リスト型(相互左右)

SWELL 投稿リストブロック 人気記事 リスト型(相互左右)

サムネイル型

SWELL 投稿リストブロック 人気記事 サムネイル型
サムネイル型

テキスト型

SWELL 投稿リストブロック 人気記事 テキスト型
テキスト型

その他にもカラム数の調整や抜粋文字数の指定など細かなカスタマイズが可能です。

投稿リストブロックの設定項目の詳しい解説は別記事をご覧ください。

ブログパーツを公開します

投稿リストブロックの設定が完了したら「公開」します。

SWELL ブログパーツ 公開
「公開」を押す

これで新着順の投稿リストブロックがブログパーツとして登録されました。

SWELL ブログパーツ管理画面 新着記事ブログパーツ
新着記事ブログパーツが登録される

ここでひと段落完了。
次はブログパーツをウィジェットエリアに呼び出す手順です。

ウィジェットエリアに作成した「ブログパーツ」のショートコードを登録

ブログパーツ一覧画面に先ほど登録したブログパーツの呼び出しコード(ショートコード)が表示されているのでコピーしてください。

SWELL 新着記事ブログパーツ ショートコード
新着記事ブログパーツ ショートコード

新着記事を表示したいウィジェットエリアに「テキスト」ウィジェットを設置します。
(「カスタムHTML」ウィジェットでもOKです。)

SWELL 「テキスト」ウィジェット
「テキスト」ウィジェット

コピーした呼び出しコード(ショートコード)を「テキスト」ウィジェットに貼り付けて保存します。

SWELL 新着記事ブログパーツ ショートコード貼り付け
ショートコード貼り付け

これで先ほどブログパーツに登録した新着記事ブログパーツが表示されるようになります!

右側のサイドバーウィジェットがブログパーツです!

SWELL 新着記事ブログパーツ 設置
サイドバーに新着記事ブログパーツが設置される

まとめ ブログパーツで自由にウィジェットを作成しよう!

「[SWELL]新着記事」ウィジェットには表示条件の絞り込み機能がありませんが、「投稿リストブロック」と「ブログパーツ」の合わせ技で、絞り込み機能付き新着記事ウィジェットを作成することができます!

レイアウトも「[SWELL]新着記事」ウィジェットよりも自由にカスタマイズ可能です。

今回は新着記事のウィジェットのケースで紹介をしましたが、人気記事やおすすめ記事(記事指定)といったウィジェットも同じ手順で作成できます。

「投稿リストブロック」は本当にいろいろできますよ!

ブログパーツを使いこなせれば、ウィジェットを自由自在に作成できるようになるので、ぜひブログパーツ機能をマスターしてください!

もっと気軽に、楽しく記事を書こう。

SWELL 投稿リストブロック活用事例 新着記事ウィジェット

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

satouのアバター satou 金融系Web広告担当

ブログ未経験でいきなりワードプレスからはじめました!金融業界で働くただのWeb広告担当者です。Web広告のことや生活を豊かにする情報をシェアしていきます。
最近はワードプレステーマ『SWELL』にどっぷりハマってます。しばらく『SWELL』についてばかり書くことになりそう。

この記事の目次