この記事にはプロモーションが含まれています。

【SWELL】トップページにカテゴリ一覧ページへのボタンを設置する

【SWELL】トップページにカテゴリ一覧ページへのボタンを設置する

ケケンタ

こんにちは! ケケンタです。

SWELLでは固定ページを利用してトップページをカスタマイズすることが可能です。

参考:当ブログのトップページ

トップページをカスタマイズする際に以下のようなセクションを配置しているブログサイトをよく見かけます。

  • 新着記事一覧
  • 人気記事一覧
  • カテゴリ別記事一覧

それに加えて、各一覧セクションの下に「記事一覧ページへ飛べるボタン」をするという構成が一般的です。

このようなボタン

SWELLで記事一覧ページへ飛べるボタンを設置した様子
記事一覧ページへ飛べるボタンを配置した様子

ただ、新着記事一覧ページや人気記事一覧ページへのボタンは設置方法が比較的分かりやすいのに対し、カテゴリ別記事一覧ページへのボタンの配置方法が少し分かりづらいです。

この記事ではSWELLでカテゴリ記事一覧ページへ飛ぶボタンの配置方法をご紹介します。

ケケンタ

僕自身、カテゴリ記事一覧ページへのボタン配置のために少々手間取ったため、この記事がお役に立てば幸いです!

なお、SWELLでカテゴリ記事一覧ページへ飛ぶボタンを配置する方法は2つあります。

SWELLでカテゴリ記事一覧ページへ飛ぶボタンを配置する方法
  • SWELLボタンを使用する
  • 投稿リストのボタンを使用する

この記事ではそれぞれについて手順を解説していきます。

タイトルには「トップページに」と記載していますが、いずれの方法もトップページに限らず好きなページで汎用的に使用することが可能です。




ケケンタ

ケケンタのITブログでは、WebアプリPHPLaravel)やWeb制作WordPressコーディング)について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください!


運動不足、気になっていませんか?

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです!

ボタンにカーソルを合わせるだけ
カウントダウンが始まるタイマーをご用意してみました!

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい!

タイマースタート

3:00

※運動不足だと連続3分で取り組んでもかなり息が切れます
(僕は加えて気分もちょっと悪くなりました……)
絶対にご無理の無い範囲でお取り組みください!


目次

【SWELLボタン使用】カテゴリ記事ページへ飛ぶボタンを配置する方法

STEP
ボタンに設定したいカテゴリのスラッグを確認する

まずは飛べるようにしたいカテゴリのスラッグを確認します。

スラッグの確認方法

カテゴリスラッグを確認する方法
カテゴリスラッグの確認方法
STEP
「SWELLボタン」を設置する

続いて、カテゴリページへ飛べるボタンとして、目的の箇所に「SWELLボタン」を設置します。

SWELLボタンを設置した様子
SWELLボタンを設置した様子
STEP
「SWELLボタン」にボタンテキストとリンク先を設定する

最後に、STEP2で設置した「SWELLボタン」のリンク先に以下を記述します。

https://サイトのドメイン名/category/カテゴリのスラッグ

設定例

SWELLボタンにテキストとリンク先を設定する手順

②でリンクを入力したら必ずEnterキーを押しましょう。
押し忘れると設定が正しく確定されません。

ケケンタ

以上がSWELLボタンを使用してカテゴリ記事一覧ページへ飛ぶためのボタンを配置する手順です!

【投稿リストのボタン使用】カテゴリ記事ページへ飛ぶボタンを設置する方法

上記ではSWELLボタンを使用する前提でのお話でしたが、トップページをカスタマイズしている場合、「投稿リスト」のボタンをそのまま使用している方も多いかと思います。

その場合はリンク先に以下を記述することで、同じくカテゴリ記事一覧ページへ飛べるボタンが用意できます。

category/カテゴリのスラッグ

STEP
ボタンに設定したいカテゴリのスラッグを確認する

スラッグの確認方法

カテゴリスラッグを確認する方法
カテゴリスラッグの確認方法
STEP
「投稿リスト」を設置する
投稿リストを配置した様子
投稿リストを配置した様子
STEP
「投稿リストのボタン」にボタンテキストとリンク先を設定する

リンク先の入力形式

category/カテゴリのスラッグ

設定例

投稿リストのボタンに表示テキストとリンクを設定した様子
投稿リストのボタンに表示テキストとリンクを設定した様子

②のリンクのcategoryの前に「/」は不要です。

ケケンタ

以上で「投稿リストのボタン」を使用してカテゴリ記事一覧ページへ飛べるボタンの配置が完了です。

まとめ

WordPressのカテゴリ記事一覧ページ=アーカイブページのURLの形式は以下の通りです。

https://サイトのドメイン名/category/カテゴリのスラッグ

こちらはSWELLボタンに設定したリンク先とまったく同じ形式です。

つまり今回ぼくがご紹介した内容は、WordPressのカテゴリ記事一覧ページのURLのルールに基づき、以下の流れを説明用にまとめ直しただけなのでした。

  • カテゴリ記事一覧ページへのボタンの設置方法が不明……
  • WordPress本来のカテゴリ記事一覧ページ=アーカイブページのURLを確認してみる
  • ②の内容に基づき、SWELLボタンや投稿リストのボタンのリンクを設定

知っている方からすれば当たり前すぎる内容かもしれませんが、WordPressに慣れていない方にとっては「アーカイブページのURLを確認する」ということも思いつきづらいかと思います。

僕はたまたま「カテゴリ記事一覧ページには特定のURLパターンがあったはず」ということを知っていたため、あたりを付けてカテゴリ記事一覧ページへのボタンを設置する方法にたどり着けました。

WordPressの知識が少しでもあると、困ったことがあった際に応用が効きやすくなります。

ケケンタ

この記事がお役に立ったなら大変嬉しいです!
最後までご覧いただきありがとうございました!

SWELLのその他の記事はこちら

SWELL記事一覧

今回ご紹介した内容のテーマ

【SWELL】トップページにカテゴリ一覧ページへのボタンを設置する記事のアイキャッチ

この記事が気に入ったら
フォローしてね!

この記事が良いと思ったらシェアしてね!

コメント

コメントする

CAPTCHA


目次