MENU
初心者の私が、WordPress・写真整理・ミシン刺繍データ作りを、初心者の私ができる範囲で学びながら記録しています。

記事スライダーのピックアップ方法 SWELLのデモサイト「DEMO02」|カテゴリーとタグを試した記録

  • URLをコピーしました!
sucre

記事スライダーは、トップページで「このサイトの入口」を作れる便利な機能です。
私は、サイトの3本柱(ホームページ作り/ミシン刺繍データ作り/写真と保存)を入口として見せたくて、記事スライダーの設定をいろいろ試してきました。
最終的には、専用タグ(top-slider)で管理する方法に落ち着きました。
理由は、スライダーに出したい記事だけをピンポイントで選べて、入れ替えもタグの付け替えだけで済むからです。
ただ、途中でカテゴリー指定も試したので、この記事ではその過程も含めて、
「ピックアップ対象の選び方(カテゴリー/タグ)」に絞って作業メモとして整理します。

なおこの記事は、前回の記事の補足として、
「ピックアップ対象の選び方(カテゴリー/タグ)」だけを詳しくまとめています。

記事スライダーとは|SWELL(DEMO 02)でサイトの入口を整える方法

目次

私が目指す記事スライダーの形:入口になる3記事を並べる

私が記事スライダーでやりたかったのは、サイトの3本柱(ホームページ作り/ミシン刺繍データ作り/写真と保存)を、トップページの入口として見せることです。

そのため、スライダーに並べる記事は3つだけにしました。
3つに絞ると、トップで常に「この3つがこのサイトの入口です」と見せられて、スライドしても迷いにくいと感じたからです。
(記事が増えても、入口はこの3つに固定する、という運用にしました。)

  • ホームページ作り
  • ミシン刺繍データ作り
  • 写真と保存

この3つのカテゴリーにそれぞれ対応する「入口になる記事」を用意して、記事スライダーに並べる形にしました。

あえて 3つだけ にしたのは、サイトの軸をハッキリ見せたかったからです。
記事スライダーは表示される枚数が増えると、見ている人が「どれを押せばいいか」迷いやすくなります。

その点、入口を 3記事にしぼる と、トップページを開いたときに
「このサイトはこの3つの内容が中心なんだな」
と一目で伝わり、スライドして動いていても常にこの3つが目に入る状態になります。

まずはこの3記事を“入口”として整えておき、必要に応じて入れ替えたり追加したりするのは、記事が増えてから考えることにしました。

記事スライダーのピックアップ方法(共通)

設定場所(SWELL / DEMO 02)

🛠️ WordPress管理画面<外観<カスタマイズ<トップページ<記事スライダー

✅ まず共通の手順(カテゴリーでもタグでも同じ)

  1. 「記事スライダー」 を開く
  2. 「記事スライダーを設置するかどうか」→「設置する」 を選ぶ
  3. 下へスクロールして 「記事のピックアップ方法」 を開く
  4. 「ピックアップ対象」
    • カテゴリー で選ぶ
    • タグ で選ぶ
      のどちらかを選択する(※表示の形はどちらでも同じ)
  5. 選んだ方法に合わせて、表示したい対象(カテゴリー名/タグ名) を指定する
  6. 右上の 「公開」 を押して反映する
  • 見た目(スライダー表示)は同じでも、違うのは「どの記事を表示対象にするか」の決め方です。
  • 私はトップページを「入口」にしたかったので、入口にしたい記事(3本柱)をスライダーに出すことを前提に、カテゴリーとタグの両方を試しました。

カテゴリーでピックアップする方法(私のやり方)

記事スライダーのピックアップ対象を「カテゴリー」にした場合、選べるのは 1つだけ という仕様でした。
でも、私がスライダーに表示したかったのは、サイトの3本柱である

  • ホームページ作り
  • ミシン刺繍データ作り
  • 写真と保存

この 3つのカテゴリーの入口です。

そこで私は、スライダーに出したい記事をまとめるために、スライダー専用のカテゴリーを作る方法を取りました。

① スライダー専用のカテゴリーを新しく作成

新たに、
「0000 トップページスライダー設定カテゴリー」
というカテゴリーを作成しました。

このカテゴリーは、記事の内容を分類するためのものではなく、

  • トップページ用
  • 記事スライダー専用
  • 実際の分類目的ではない(表示制御のため)

という、**「スライダーに出す記事をまとめるための箱」**として使います。

(私はあとから見返したときに分かりやすいように、名前の先頭に 0000 を付けて、カテゴリー一覧の上の方に表示されるようにしました。)

② スライダーに出したい“入口記事”に、このカテゴリーを付ける

この「0000〜」カテゴリーを、入口にしたい記事(3本柱の入口記事)に付けていきます。
こうすることで、記事スライダー側では 1つのカテゴリー指定でも、実質的には **3記事(3本柱)**をまとめて表示できるようになりました。


③ 記事スライダー側で「カテゴリーID」を指定する

作成したカテゴリーの ID を確認し、
外観 → カスタマイズ → トップページ → 記事スライダー

「ピックアップ対象のカテゴリーID」に入力します。
(※IDはカテゴリ一覧の画面で確認できます)

スライダー専用カテゴリ(0000)を付けた場合、カード上にそのカテゴリ名が表示されることがある

スライダー専用カテゴリでまとめると便利なのですが、カード上のカテゴリ表示が「0000〜」になることがありました。

スライダー用カテゴリ(0000)と、表示されるカテゴリ名が違った話

スライダーの表示を見直していたとき、カード上部に表示されるカテゴリ名が
「0000 トップページ スライダー設定」 になっているのが気になりました。

そこで試しに、入口記事に 2つのカテゴリを付けてみました。

  • 「0000 トップページ スライダー設定(スライダー抽出用)」
  • 実際の内容のカテゴリ(例:写真と保存/ホームページ作り など)

その状態で確認すると、スライダー自体は問題なく表示され、
カード上部に表示されるカテゴリ名は 「0000」ではなく、内容のカテゴリの方が表示されました。

この挙動を見る限り、私の環境では

  • 0000カテゴリ:スライダーに出すかどうかを決めるための「抽出用(裏方)」
  • 内容カテゴリ:カード上部に表示される「見せるカテゴリ」

のように、役割が分かれているように見えました。

少しふしぎに感じましたが、
**「抽出は0000、表示は内容カテゴリ」**という使い分けなら、見た目も分かりやすく運用できそうです。

※表示のされ方はテーマや設定、記事に付けたカテゴリの状態で変わる可能性があるので、私は実際の表示を見ながら調整しました。

0000カテゴリだけだとカード上部が「0000」表示 → 内容カテゴリも付けると内容カテゴリが表示された

ただ、運用していくうちに「スライダーに出す記事を入れ替える」ことを考えると、
カテゴリーよりも タグで管理した方がシンプルだと感じました。

そこで私は、後からピックアップ対象を タグに変更し、
スライダーに出したい記事だけに「専用タグ」を付けて管理する形に落ち着きました。

タグでピックアップする方法(私のやり方)

私は最終的に、記事スライダーのピックアップ対象を 「タグ」 で管理する方法にしました。
タグで管理すると、スライダーに出したい記事だけをピンポイントで選べるので、あとから入れ替えるのも簡単です。

記事スライダー側で「タグ」を指定する

  • 🛠️ 外観 → カスタマイズ → トップページ → 記事スライダー
  • ピックアップ対象:タグ
  • ピックアップ対象のタグ名:top-slider
  • 公開

この時点では、まだタグ付き記事が無いので、表示が変わらなくてもOKです。

記事スライダーを「タグ」でピックアップする設定(タグ名:top-slider)
「ピックアップ対象」で タグ を選び、タグ名に top-slider を入力します。
※日付表示は今回はオフ(チェックなし)にしています。

この設定で、top-slider タグが付いた投稿だけが記事スライダーに表示されます。
入口にしたい記事を入れ替えるときも、タグの付け替えだけで調整できます。

✅ ピックアップ対象のタグ名(私の場合)

  • タグ名:top-slider

このタグを、記事スライダーに表示したい記事(入口の3記事)だけに付けていきます。

※記事スライダーの対象は、基本的に 投稿(投稿記事) が中心になります。
(固定ページを出したい場合は、別の方法を検討する必要があります)

スライダーに出したい「投稿記事」に同じタグを付ける

  • 入口にしたい 3つの投稿記事だけに
    タグ:top-slider を付ける(私の場合は3記事)

これで、top-slider タグが付いた投稿だけが、記事スライダーの対象になります😊

私は作業の順番として先に記事スライダー側で「top-slider」を指定し、あとから表示したい投稿(3つ)に同じタグを付けていきました。
同じタグを付けた投稿だけがスライダーに表示されるので、入れ替えも簡単です。

※タグ名は 完全一致 なので、top-slider の表記ゆれ(大文字/小文字、スペース)には注意します。


投稿にタグをつける方法

投稿編集画面で、右側の設定(投稿)にある 「タグ」
top-slider と入力して追加します。
(ブロックエディターの場合は、右サイドバーから設定できます)

「専用タグ」を使う方法 がわかりやすい

スライダー用に

  • タグ名:top-sliderを設定
  • 表示する3つの記事にのみtop-sliderのタグをつける

sucre

SWELLの記事スライダーは、
仕組みを理解すると、意外と柔軟に使える機能だと感じました。
ただ、SWELLの標準の使い方では 固定ページは対象にできない ので、
(方法はあるようですが、初心者の私には少し難しそう…)
私は 投稿記事の中に「入口(目次のようなページ)」を作る 方向で進めることにしました。
正解はひとつではないけれど、
自分が納得できる形を、試しながら作っていくこと
それ自体が、私にとって大切な学びの記録になっています。なればうれしいです。

この記事が気に入ったら
いいねしてね!

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