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

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

SWELLで使える専用ブロック「投稿リストブロック」の活用事例を紹介します。

今回は「投稿リストブロック」を使って人気記事ウィジェットを作ります。

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

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

この記事の目次

[SWELL]人気記事ウィジェットとの違い

実のところSWELLのウィジェット設定画面にはデフォルトで人気記事(PV数順)ウィジェットが用意されています。

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をコピーする
URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

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

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

この記事の目次
閉じる