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

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

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

ケケンタ

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

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

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

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

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

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

このようなボタン

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

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

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

ケケンタ

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

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

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

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

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

目次

Web制作を仕事にしたいなら

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

 ̄ ̄ ̄

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス

 Amazon Prime 

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る 
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法

  • Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
  • 会員の自動更新を解除しておく=期限が来たら自動解約
  • 1~3ヶ月ぐらいするとAmazonのカート画面再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも3回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

【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記事一覧

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

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

コメント

コメントする

CAPTCHA


目次