【SWELL】人気記事一覧ページをトップに表示させる方法

悩んでいる人

SWELLで人気記事一覧をトップページに表示したい！
どうすればできるんだろう？

上記のお悩みを解決します。

わくほこのSWELL歴

• 2022年3月にCocoonからSWELLに変えた
• SWELLは使いながら覚えている段階

SWELLの勉強中だよ！

本記事は以下のような方におすすめです。

あわせて読みたい

【SWELL】人気記事一覧ページにPV数を表示させない方法【コピペOK】 WELLの人気記事一覧でPV数を非表示にする方法をご紹介します。 色々試したけど、うまくいかなかったという方はぜひチェックしてみてください！

SWELLで人気記事を表示させる方法

SWELLで人気記事を表示させる方法は以下の2つです。

ウィジェット機能を使う

SWELLでは、ウィジェット機能を使って人気順に記事を表示させることができます。

詳しくは公式サイトにありますが、

という特徴があります。

SWELL

人気順に記事をリスト表示できるウィジェット機能 | WordPressテーマ SWELL このページでは、SWELLで使用できる「人気記事記事」ウィジェット機能に関しての説明をしていきます。 「外観」>「ウィジェット」からウィジェット編集ページへ移動すると…

トップページに横並びで表示させたいなあ…

フッターなら良いのですが、トップページのアイコンの下だとちょっとインパクトがありすぎますね^^;

そこで使えるのが、今回ご紹介する固定ページを作る方法です！

固定ページを作る方法なら、好きな場所に横並びで表示できるよ！

固定ページを作る

流れとしては以下になります。

まずは1から見ていきましょう！

固定ページから「新規追加」を選び、新しくページを作ります。

タイトルは何でも良いですが、分かりやすいように「人気記事一覧」にしました。

「URLスラッグ」も「popular_posts」に変更します。
本文は何も入力しなくて大丈夫です。

テンプレートを「デフォルトページ」から「人気記事一覧」にして、公開します。

フロントページ（トップに設定しているページ）に行き、新着記事を入れたい場所に左上のから「フルワイド」を挿入します。

「Settings」から「投稿の表示順序」→「人気順」にチェックを入れます。

これで好きな場所に人気記事を表示できるようになりましたね！

人気記事のボタンの作り方

今の状態だと、人気記事を全て見られないので、ボタンを追加していきます。

左上のから「swellボタン」を選びます。

テキストを変更し、href=の後ろに先ほど作った「新着記事一覧」ページのURLを入力します。

あとは色や見栄えを整えて完成です！

終わりに

今回は人気記事一覧をトップページの好きな場所に表示させる方法をご紹介しました！

SWELLには人気記事一覧を簡単に表示させる機能がついていて、すごく便利だなと思いました。

ウィジェット機能を使う場合は表示させる場所が限定される+縦並びで表示されるため、固定ページを作った方が自由度が高い印象です。

良かったらぜひお試しくださいね♩

ではでは〜