「おすすめ記事を、記事の下に横並びで見せたい」 「新着順ではなく、読んでほしい順番で並べたい」 「テーマの機能だと、置ける場所や記事の選び方が決まっていて使いにくい」
WordPressで記事をカルーセルやスライダー（横にスライドする一覧）で見せる方法はいくつかあります。ただ、自分で選んだ記事を、自分で決めた順番で、好きな場所に置くとなると、選べる方法はぐっと減ります。
この記事では、記事をカルーセル・スライダー表示する4つの方法を比べたうえで、コードを書かずに、好きな記事を好きな順番で並べる手順を画像つきで解説します。
この記事でわかること
- 記事をカルーセル・スライダー表示する4つの方法と、それぞれの向き不向き
- 「自動の並び」より「手で選んだ並び」が効く場面
- 無料プラグインで、好きな記事を好きな順番に並べる6つの手順
※2026年10月時点の情報です。
記事をカルーセル・スライダー表示する4つの方法
| 方法 | コード | 記事を手で選ぶ | 好きな順番 | テーマを変えても使える |
|---|---|---|---|---|
| ① テーマの機能 | 不要 | テーマ次第 | テーマ次第 | 使えない |
| ② 画像スライダー系プラグイン | 不要 | 画像を1枚ずつ登録 | できる | 使える |
| ③ コードで作る（Swiper・slickなど） | 必要 | 難しい | 難しい | 作り直しになることが多い |
| ④ 記事用のカルーセルプラグイン | 不要 | できる | できる | 使える |
① テーマの機能を使う
SWELLやCocoonなど、記事スライダーやカルーセルの機能を持つテーマがあります。設定画面から手軽に使えるのが魅力です。
一方で、置ける場所や記事の選び方はテーマが決めた範囲に限られます。たとえばSWELLの記事スライダーはトップページ専用です（詳しくは「SWELLの記事スライダーをトップページ以外に置く方法」で解説しています）。テーマを変えると、作り直しになります。
② 画像スライダー系のプラグインを使う
MetaSliderやSmart Slider 3のような、画像スライダー用のプラグインです。見た目の自由度が高く、トップページのメインビジュアルによく使われます。
ただし基本は「画像を登録してリンクを設定する」作りです。記事を並べる場合は、アイキャッチ画像・タイトル・リンク先を記事ごとに登録することになります。記事を追加したり、タイトルを変えたりするたびに、スライダー側も直す必要があります。
③ コードで作る（Swiper・slickなど）
スライダー用のJavaScriptライブラリ（Swiperやslick）と、記事を取り出すPHPを組み合わせて作る方法です。動きや見た目を細かく作り込めます。
ただし、テーマのファイル（functions.php など）の編集が必要です。記事は「このカテゴリーの新着5件」のような条件で取り出すのが一般的で、手で選んだ記事を好きな順番に並べるには、さらに作り込みが要ります。
④ 記事用のカルーセルプラグインを使う
記事を並べるために作られたプラグインです。記事を選ぶだけで、アイキャッチ画像・タイトル・日付が自動でカードになります。記事のタイトルや画像を変えれば、カルーセルにも自動で反映されます。
「コードを書かずに、好きな記事を好きな順番で、好きな場所に」なら、この方法がいちばん手間がかかりません。 以下では④の手順を紹介します。
「新着順」より「選んだ順番」が効く場面
多くのテーマやプラグインは、新着順・人気順・ランダムで記事を並べます。手間がかからない反面、サイト運営者が「いま読んでほしい記事」を出せるとは限りません。
手で選んで並べると効くのは、たとえばこんな場面です。
- 記事の下の「あわせて読みたい」：読み終えた人が次に読むべき記事を、順番どおりに並べる
- 記事の途中の「先にこちらを読むと分かりやすい」：前提になる記事を本文の流れで紹介する
- 固定ページ（サービス紹介・LP）：導入事例や比較記事など、そのページで見せたい記事だけを並べる
- 収益につながる記事への導線：レビュー記事やランキング記事を、関連する記事の下に置く
新着順のスライダーは、記事が増えるたびに中身が入れ替わります。「この記事の下には、必ずこの3本を出したい」という場面では、手で選んだ並びのほうが確実です。
無料プラグイン「Post Carousel」で記事をカルーセル・スライダー表示する手順
ここからは、筆者が作っている無料プラグイン「Post Carousel by StellaCodex」を使った手順です。もともと筆者が運営している旅行サイト（timeless-travel.jp）のために作ったものを、誰でも使えるように公開しました。今もそのサイトで使っています。
無料版でできることは次のとおりです。
- カルーセルを何個でも作れる：記事ごと・ページごとに別の内容を用意できる
- 記事を3通りの方法で追加できる：キーワード検索・カテゴリー・URL
- ドラッグ＆ドロップで並べ替えられる：読んでほしい順番をそのまま反映
- 左右の矢印ボタンつき：スマホでもPCでも操作しやすい
- 見た目を調整できる：カード数（スマホ・PC別）、枠線、角丸、画像の比率、タイトルや日付の表示
- どのテーマでも使える：ショートコードを貼るだけで、好きな場所に置ける
WordPressの管理画面で「プラグイン」→「新規追加」を開き、「Post Carousel by StellaCodex」で検索してインストールし、有効化します。
管理画面のメニューに追加された「Post Carousels」を開き、新しいカルーセルを作ります。「記事下のおすすめ」「サービスページ用」など、あとで見分けやすい名前を付けておくと便利です。
【画像2：Post Carouselsの一覧画面／ALT：Post Carousel by StellaCodexのカルーセル一覧画面】
表示したい記事を追加します。選び方は3通りあります。
- キーワードで検索：記事タイトルの一部を入れて探す
- カテゴリーから追加：カテゴリーを選んで、その中から記事を選ぶ
- URLで追加：記事のURLを貼り付ける。別サイトのページも追加できる
カテゴリーをまたいで、好きな記事を自由に混ぜられます。
【画像3：記事を検索して追加している画面／ALT：Post Carouselで記事をキーワード検索してカルーセルに追加する画面】
追加した記事は、ドラッグ＆ドロップで並び順を変えられます。いちばん読んでほしい記事を左端に置きましょう。
【画像4：記事をドラッグして並べ替えている画面／ALT：カルーセル内の記事をドラッグ＆ドロップで並べ替える画面】
カード数、枠線、角丸、画像の比率、タイトルや日付の表示などを設定します。サイトのボタンやカードの角丸・枠線に合わせると、テーマになじみます。
【画像5：デザイン設定の画面／ALT：Post Carouselのカード数や角丸などのデザイン設定画面】
作ったカルーセルのショートコードをコピーして、表示したい場所に貼ります。
[stellacodex_carousel id="s1"]※ id の部分は、カルーセルごとに違います。管理画面に表示されているショートコードをそのままコピーしてください。
置きたい場所に合わせて、貼り方を選びます。
- 特定の記事・固定ページだけに置く：ブロックエディターで「ショートコード」ブロックを追加して貼る（クラシックエディターなら本文にそのまま貼る）
- いくつかのページで使い回す：ショートコードを入れたブロックを「パターン」（同期パターン）として保存し、各ページで呼び出す。テーマに「ブログパーツ」のような機能があれば、それを使っても同じことができる
- 全記事の下やサイドバーに出す：「外観」→「ウィジェット」で、表示したいエリアにショートコードを入れたブロックを置く
同期パターンやブログパーツに入れておけば、カルーセルを置いた全ページを1か所で管理できます。
【画像6：ショートコードブロックにショートコードを貼ったところ／ALT：ブロックエディターのショートコードブロックにstellacodex_carouselを貼った画面】
見出しやタイトルの調整
ショートコードには、表示を調整する指定を付けられます。
| やりたいこと | 書き方 |
|---|---|
| カルーセルのタイトルを h3 で出す | [stellacodex_carousel id="s1" tag="h3"] |
| カルーセルのタイトルを出さない | [stellacodex_carousel id="s1" title="hide"] |
記事の中で見出しの階層が崩れないよう、置く場所に合わせて tag を指定しておくと安心です。
新着記事を自動で流したいときは（Pro版）
「新着記事やカテゴリーの記事を自動でカルーセルにしたい」「自動でスライドさせたい」場合は、Pro版の機能です。
- 自動で記事を表示：新着・カテゴリー・タグから
- 自動再生：1枚ずつ／1ページずつ、または途切れずに流れる連続スクロール
- 記事の最後に自動で差し込む：全記事にショートコードを貼る手間がいらない
- カルーセルをカテゴリーで分けて管理：数が増えても探しやすい
記事を手で選んで並べるだけなら、無料版で十分です。まず無料版で試して、自動化したくなったらPro版を検討してください。Pro版の内容は商品ページで紹介しています。
よくある質問
- どのテーマでも使えますか？
-
使えます。ショートコードで表示するので、テーマに関係なく動きます。テーマを変えても、カルーセルを作り直す必要はありません。
- 無料版で作れるカルーセルの数に上限はありますか？
-
ありません。カルーセルは何個でも作れます。記事ごと・ページごとに違う内容のカルーセルを用意できます。
- コードを書く必要はありますか？
-
ありません。プラグインを入れて、ショートコードを貼るだけです。functions.php などテーマのファイルは触らないので、テーマをアップデートしても設定は消えません。
- 記事のタイトルやアイキャッチを変えたら、カルーセルも直す必要がありますか？
-
ありません。カルーセルは記事の情報を読み込んで表示するので、記事側を変えれば自動で反映されます。
- 外部サイトのページも入れられますか？
-
入れられます。「URLで追加」から、別サイトのページも追加できます。姉妹サイトの記事を紹介したいときに便利です。
- テーマに記事スライダーがあるのですが、併用できますか？
-
できます。たとえばトップページはテーマの記事スライダー、記事の下や固定ページはPost Carousel、というように場所で使い分けられます。
テーマ別の解説
テーマの記事スライダーとの違いや使い分けは、テーマごとに解説しています。
まとめ
WordPressで記事をカルーセル・スライダー表示する方法は4つあります。
- 手軽さ重視で、テーマの決めた範囲で十分：テーマの機能
- 画像中心のメインビジュアルを作りたい：画像スライダー系プラグイン
- コードを触れて、作り込みたい：Swiper・slickなどで自作
- コードを書かずに、好きな記事を好きな順番で、好きな場所に置きたい：記事用のカルーセルプラグイン
Post Carouselは無料版でも、カルーセルを何個でも作れます。まずは、いちばん読まれている記事の下に「あわせて読みたい」を1つ置いてみてください。