swellのサイドバーをカスタマイズする方法をわかりやすく紹介!

swellのサイドバーをカスタマイズする方法をわかりやすく紹介!

takato(@n8takato)です!

swellでサイドバーをカスタマイズしたい

この記事では上記の課題を解決します。

swellを導入したら、サイドバーをカスタマイズしたいですよね。

swellはサイドバーのカスタマイズを簡単に行うことが出来ます。

この記事ではswellでサイドバーをカスタマイズする方法を紹介します。

この記事でわかること

  • swellでサイドバーをカスタマイズする方法

その他swellのカスタマイズについて

あわせて読みたい
【簡単】swellでフッターをカスタマイズする方法を紹介します! swellでフッターをカスタマイズする方法を知りたい。 この記事は上記の課題に向けて作成しています。 swellのフッターは簡単にカスタマイズすることが出来ます。 フッタ...
あわせて読みたい
swellでサイトマップを作成する方法を説明します!【簡単です】 swellでサイトマップを作成する方法を知りたい。 この記事では上記の課題を解決します。 サイトマップはブログを行う上で必要なページです。 swellではサイトマップを簡...
あわせて読みたい
swellでお問い合わせフォームを作成する方法を紹介!【簡単です】 swellで問い合わせフォームを作成する方法を知りたい この記事は上記の課題に向けて作成しています。 swellを導入したら問い合わせフォームを作成したいですよね。 swel...
目次

swellのサイドバーの基本的な設定

早速、swellでサイドバーをカスタマイズする方法を紹介します。

今回紹介するサイドバーのカスタマイズ内容は下記の通りです。

swellのカスタマイズ内容

  1. 新着記事を表示させる方法
  2. アーカイブを表示させる方法
  3. カテゴリーを表示させる方法
  4. プロフィールを表示させる方法
  5. 検索ボックスを表示させる方法

新着記事を表示させる方法

サイドバーに新着記事を表示させることが出来ます。

新着記事とは?

  • 最近投稿した記事のこと

サイドバーに最近投稿した記事をいくつか表示することが出来ます。

作業の流れ

swellでサイドバーに新着記事を表示させる手順は下記の通りです。

新着記事を表示する手順

  • WordPressの管理画面に入る
  • 外観
  • ウィジェット
  • 「[swell]新着記事」を選択
  • 「共通サイドバー」を選択する

上記の作業を行うことで、サイドバーに新着記事を表示させることが出来ます。

サイドバー 新着記事
サイドバー 新着記事

表示する投稿数表示方法などの設定を行うことも出来ます。

アーカイブを表示させる方法

サイドバーにアーカイブを表示させることが出来ます。

アーカイブとは?

  • 月ごとの投稿を表示することが出来る機能

アーカイブを作成することで、1ヶ月ごとの投稿記事を表示するページに移動することが出来るようになります。

また、月ごとに投稿している記事数を表示することも出来ます。

作業の流れ

swellでサイドバーにアーカイブを表示する手順は下記の通りです。

アーカイブを表示する手順

  • WordPressの管理画面に入る
  • 外観
  • ウィジェット
  • 「アーカイブ」を選択
  • 「共通サイドバー」を選択する

上記の手順を行うことで、サイドバーにアーカイブを表示することが出来ます。

サイドバー アーカイブ
サイドバー アーカイブ

カテゴリーを表示させる方法

サイドバーにカテゴリーを表示させることが出来ます。

カテゴリーとは?

  • 記事のジャンルを分けたもの

カテゴリーを作成することで、そのブログがどのようなジャンルの記事を作成しているのかわかりやすくなります。

作業の流れ

swellでサイドバーにカテゴリーを表示する手順は下記の通りになります。

カテゴリーを表示する手順

  • WordPressの管理画面に入る
  • 外観
  • ウィジェット
  • 「カテゴリー」を選択
  • 「共通サイドバー」を選択する

上記の手順を行うことで、サイドバーにカテゴリーを表示させることが出来ます。

サイドバー カテゴリー
サイドバー カテゴリー

プロフィールを表示させる方法

サイドバーにプロフィールを表示させることが出来ます。

作業の流れ

swellのサイドバーにプロフィールを表示させる方法は下記の通りです。

プロフィールを表示させる手順

  • WordPressの管理画面に入る
  • 外観
  • ウィジェット
  • 「[swell]プロフィール」を選択
  • 「共通サイドバー」を選択する

上記の手順を行うことで、サイドバーにプロフィールを表示することが出来ます。

プロフィール情報の入力

swellのプロフィールでは、下記の情報を追加することが出来ます。

追加できる情報

  • 名前
  • 肩書き
  • プロフィール文
  • アイコン画像
  • SNSアイコンリスト

どれも追加した方が良い情報なので、追加しておきましょう。

サイドバー プロフィール
サイドバー プロフィール

検索ボックスを表示させる方法

サイドバーに検索ボックスを表示させることが出来ます。

検索ボックスとは?

  • サイト内にある記事を見つけるための検索ボックス

検索ボックスを設けることで、読者の読みたい記事が見つかりやすくなります。

作業の流れ

swellのサイドバーに検索ボックスを表示させる手順は下記の通りです。

検索ボックスを表示させる手順

  • WordPressの管理画面に入る
  • 外観
  • ウィジェット
  • 「検索」を選択
  • 「共通サイドバー」を選択する

上記の手順を行うことで、swellのサイドバーに検索ボックスを表示させることが出来ます。

サイドバー 検索ボックス
サイドバー 検索ボックス

swellのサイドバーの応用的な設定

続いてサイドバーの応用的な設定を紹介します。

サイドバーの応用的な設定

  • 追尾サイドバー

追尾サイドバーとは何か?

  • ページを下にスクロールすると、設定した項目が固定された状態で表示される

スクロールすると、追尾サイドバーに設定した項目がずっと表示されるようになります。

作業の流れ

swellに追尾サイドバーを設定する手順は下記の通りです。

追尾サイドバーを設定する手順

  • WordPressの管理画面に入る
  • 外観
  • ウィジェット
  • 追尾サイドバーに設定したい項目を選択
  • 「追尾サイドバー」を選択する

上記の作業を行うことで、swellに追尾サイドバーを表示することが出来ます。

swell 追尾サイドバー
swell 追尾サイドバー

【最後に】サイドバーをカスタマイズしよう

この記事では、swellのサイドバーをカスタマイズする方法を紹介しました。

swellはサイドバーのカスタマイズも簡単に行うことが出来ます。

サイドバーのカスタマイズがまだという方は、是非行ってみてください。

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