【SWELL】サイドバーに特定カテゴリーの新着記事・ランキング記事を表示するカスタマイズ方法!

【サンプルあり】WPテーマ「Katawara」の感想レビュー|デメリット・メリットを紹介します。
初心者

サイドバーに「カテゴリーの人気記事ランキング」とか「カテゴリーの新着記事一覧」を表示したい!
初心者向けの簡単な方法ないかな…

その悩み解決します。

SWELLの基本機能だけでサイドバーに「特定カテゴリーの新着情報」「特定のカテゴリーの人気記事ランキング」を表示する方法を紹介します。

プラグイン不要。テーマの基本機能だけで設定できます

作業時間はおよそ10分。SWELLに慣れていない初心者での人でも簡単にできるカスタマイズです。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

サイドバーに特定カテゴリーの新着情報を表示する手順

サイドバーに特定カテゴリーの新着記事一覧を表示する手順

作業全体の流れ

  1. ブログパーツを新規作成する
  2. 投稿リストブロックを作る
  3. ウィジェットにブログパーツを設置する

手順①ブログパーツを新規作成する

新規にブログパーツを作成するステップです。

操作内容

ブログパーツ」→「新規追加」をクリック。

ブログパーツを作成

ブロックエディターが開いたらタイトルに覚えやすい適当な名前を入力してください。

操作内容

タイトル」を入力。

カテゴリーの新着記事

ブログパーツがダッシュボードに表示されない場合

ダッシュボードのメニュー一覧から「SWELL設定」→「機能停止」をクリック。カスタム投稿タイプの「ブログパーツを停止」のチェックを外しましょう。このオプションにチェックが入っているとブログパーツが表示されません。


手順②投稿リストブロックを作る

投稿リストブロックを追加します。

操作内容

+アイコン」→「投稿リスト」の順にクリック。

投稿リストボックスが表示されたらエディター上の投稿リストボックスをクリックします。投稿リストボックスが選択されていると、画面の右側に投稿リストボックスの詳細オプションが表示されます。

操作内容

投稿リストボックス」をクリック。

操作内容

レイアウト選択で「リスト型」をクリック。

リストを選択
操作内容

投稿リストブロックのオプションから「Pickup」をクリック。

Pickpを選択
操作内容

オプションを下にスクロールし、カテゴリーから表示したいカテゴリーを選択。

カテゴリーを選択
操作内容

作成したブログパーツを保存します。

公開」をクリック。

ブログパーツを公開

ブログパーツの一覧ページへ移動します。

操作内容

ブログパーツ」をクリック。

ブログパーツ一覧ページ

作成したブログコーツの呼び出しコードをコピーします。

操作内容

呼び出しコード」を選択してコピー。

「呼び出しコード」を選択してコピー。

手順③ウィジェットにブログパーツを設置する

作成したブログパーツをウィジェットに設置する作業です。

操作内容

外観」→「ウィジェット」をクリック

ウィジェットに移動
操作内容

カスタムHTML」を「共通サイドバー」にドラッグアンドドロップ。

共通サイドバー

ウィジェットの設置場所は「共通サイドバー」以外でもOKです。例えば追尾サイドバーなんかでも構いません。

操作内容

タイトル」に任意のタイトルを入力。

内容」にコピーしたブログパーツのショートコードをそのまま貼り付ける。

保存」をクリック。

ブログパーツのコードを設定
かんた

以上で作業は完了です。

サイドバーにカテゴリー人気記事ランキングを表示する手順

サイドバーにカテゴリー人気記事ランキングを表示する手順

全体の流れ

  1. ブログパーツを新規作成する
  2. 投稿リストブロックを作る
  3. ウィジェットにブログパーツを設置する
かんた

各作業をステップごとに解説していきます。

手順①ブログパーツを新規作成する

新規にブログパーツを作成するステップです。

操作内容

ブログパーツ」→「新規追加」をクリック。

ブログパーツを作成

ブロックエディターが開いたらタイトルに覚えやすい適当な名前を入力してください。

操作内容

タイトル」を入力。

ブログパーツに名前を入れる

ブログパーツがダッシュボードに表示されない場合

ダッシュボードのメニュー一覧から「SWELL設定」→「機能停止」をクリック。カスタム投稿タイプの「ブログパーツを停止」のチェックを外しましょう。このオプションにチェックが入っているとブログパーツが表示されません。


手順②投稿リストブロックを作る

投稿リストブロックを追加します。

操作内容

+アイコン」→「投稿リスト」の順にクリック。

投稿リストボックス

投稿リストボックスが表示されたらエディター上の投稿リストボックスをクリックします。投稿リストボックスが選択されていると、画面の右側に投稿リストボックスの詳細オプションが表示されます。

操作内容

投稿リストボックス」をクリック。

かんた

投稿リストボックスは全ての投稿記事の最新が表示されます。
これからの作業で「特定のカテゴリーの中から人気記事ベスト3」を表示するカスタマイズを行います。

操作内容

レイアウト選択で「リスト型」をクリック。

投稿の表示順序で「人気順」をクリック。

オプション設定

公開日の表示、PV数の表示といったオプションがあります。その他の設定は好みに合わせて行ってください。

次にカテゴリーを選択します。

操作内容

Pickup」をクリック。

Pcikupを選択
操作内容

Pickupのオプションを下にスクロールします。

ランキング表示したいカテゴリー名をクリック。

カテゴリーを選択

設定が完了したら保存します。

操作内容

公開」をクリック。

ブログパーツの一覧ページへ移動します。

操作内容

ブログパーツ」をクリック。

ブログパーツ一覧ページ

作成したブログコーツの呼び出しコードをコピーします。

操作内容

呼び出しコード」を選択してコピー。

「呼び出しコード」を選択してコピー。

手順③ウィジェットにブログパーツを設置する

ブログパーツをウィジェットに設置する作業です。

操作内容

外観」→「ウィジェット」をクリック

ウィジェットに移動
操作内容

カスタムHTML」を「共通サイドバー」にドラッグアンドドロップ。

共通サイドバー

ウィジェットの設置場所は「共通サイドバー」以外でもOKです。例えば追尾サイドバーなんかでもランキングを表示可能です。

操作内容

タイトル」に任意のタイトルを入力。

内容」にコピーしたブログパーツのショートコードをそのまま貼り付ける。

保存」をクリック。

ブログパーツのコードを設定
かんた

以上で作業は完了です。ページ上にカテゴリーのランキング記事が表示されるか確認しましょう!

カテゴリーランキング表示カスタマイズに関するFAQ

カテゴリーランキング表示カスタマイズに関するFAQ

カテゴリーのランキング記事数を「5記事」に変更したい

ブログパーツで投稿リストボックスを作る際のオプション「表示する投稿数」から任意の投稿数に指定できます。

ランキングの投稿数を指定

設定できる投稿数は1~24記事です。

SWELLバージョン:: 2.3.7.1での上限です。

ランキングから特定の記事を削除したい

ブログパーツの投稿リストボックスで除外したい記事を指定するオプションがあります。

Pickup」→「除外する投稿ID」に任意の投稿を指定してください。

除外する投稿は複数指定できます。

特定のカテゴリーかつ特定のタグに属する記事でランキング作れるの?

作れます。

例えば「お知らせカテゴリー」の記事で「おすすめ」タグの記事といった条件をさらに絞込んでランキングを作ることができます。

操作内容

投稿リストボックスで「Pickup」をクリック。

カテゴリー」をクリック。

タグ」をクリック。

複雑な条件で絞り込み

投稿者ごとの人気記事ランキングを作れる?

複数のアカウントでサイトを運営している場合、投稿者(アカウント)ごとにランキングを作ることができます。

ブログパーツの投稿リストボックスの「著者で絞り込む」から任意の投稿者を指定すればOKです!

投稿者ごとにランキングを作る

投稿一覧に関する関連カスタマイズ

投稿に関する関連カスタマイズ

ブログパーツを使ったカスタマイズは、色んな形式の記事一覧をアレンジできます。

投稿一覧を自由にアレンジ!

  • 特定カテゴリーの新着一覧
  • 特定カテゴリーのランダム表示
  • 特定タグの新着一覧
  • 特定タグのランダム表示
  • 特定の投稿者の新着一覧
  • 特定の投稿者のランダム表示

やり方は今回解説した投稿リストブロックを使えばOK。

かんた

投稿リストボックスのオプションを組み替えるだけで、かなり自由度の高い自分だけの記事一覧を表示できます!

アフィリエイターならこう使え!

アフィリエイトブログを運営している人なら収益記事への導線となるよう工夫するのがおすすめです。

ランダムな記事一覧や人気カテゴリー記事を出しても収益につながらなければ全く意味はありません。自分のブログの収益記事が優先的に表示され、ブログ読者にクリックしてもらうよう工夫しましょう。

まとめ

人気テーマSWELLのサイドバーに人気記事を表示するカスタマイズを紹介しました。今回のカスタマイズ方法はプラグインを使っていません。

SWELLの基本機能だけでカスタマイズできるのでぜひチャレンジしてください!

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