WORDPRESS

【AFFINGER5】ブログのサイドバーに、「カテゴリー一覧」を設置する方法【WordPressウィジェット】

【AFFINGER5】ブログのサイドバーに、「カテゴリー一覧」を設置する方法 アイキャッチ



あずきです🐥

このブログでも愛用中のWordPressテーマ「WING(AFFINGER5)」における…

サイドバーエリアに「カテゴリー一覧」を設置する方法

について、ブログ初心者さん向けに1から解説していきます

まず、サイドバーに設置する「カテゴリー一覧」とは…

WordPress AFFINGERにおける、サイドバーにカテゴリー一覧を設置する手順 top-01

↑ TOPページのなかの…

WordPress AFFINGERにおける、サイドバーにカテゴリー一覧を設置する手順 top-02

↑ この部分

で、方法としては、 外観 > ウィジェット のなかの…

  • カテゴリー

というウィジェットを使います

この「カテゴリー」ウィジェット自体は、WordPressデフォルトの無料テーマでも備わってる機能です

ただ「WING(AFFINGER5)」の場合、その設置先となるエリアに「サイドバー」エリアなどの選択肢が加えられてるんですね

やり方も超簡単!

さっそく見ていきましょー🐥

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

AFFINGER5における、ブログのサイドバーに「カテゴリー一覧」を入れる方法【WordPressウィジェット】

WordPress ヘッダー a-01

 

まずはWordPress管理画面から…

WordPress AFFINGERにおける、サイドバーにカテゴリー一覧を設置する手順 1-01

↑ 外観 > ウィジェット をクリックします

ウィジェットの設定画面が開いたら、左側の…

WordPress AFFINGERにおける、サイドバーにカテゴリー一覧を設置する手順 1-02

↑「カテゴリー」というタブをクリックして開きます

WordPress AFFINGERにおける、サイドバーにカテゴリー一覧を設置する手順 1-03

↑ このように設置エリアの選択肢が表示されるので、「サイドバーウィジェット」を選択し、「ウィジェットを追加」をクリックします

すると、画面右上の…

WordPress AFFINGERにおける、サイドバーにカテゴリー一覧を設置する手順 1-04

↑「サイドバーウィジェット」というタブが開いて、そのなかに今回追加した「カテゴリー」というボックスが追加されます

ここから、この「カテゴリー」の表示内容を設定していきます(下記手順です)

まずは、1番上の…

WordPress AFFINGERにおける、サイドバーにカテゴリー一覧を設置する手順 1-05

↑「タイトル」を任意の名称で入れましょう

例:カテゴリー / カテゴリー一覧 / Category / Categories など

空欄のままにすると、「カテゴリー」という名称が自動で反映されるよ!

この「タイトル」というのは、実際の画面上における…

WordPress AFFINGERにおける、サイドバーにカテゴリー一覧を設置する手順 1-06

↑ こちらの「見出し」部分にあたります

ちなみに

この「見出し」のデザインは、 外観 > カスタマイズ から任意のデザインに変更できます

WING AFFINGER5で「ウィジェットの色設定」をカスタマイズする手順 アイキャッチ
WING AFFINGER5で「ウィジェットの色設定」をカスタマイズする手順【WordPressブログ】

続きを見る

ということで「タイトル」が入力できたら、その下の…

WordPress AFFINGERにおける、サイドバーにカテゴリー一覧を設置する手順 1-07

↑ 各種チェック項目で、表示パターンを決めていきます

  • 「ドロップダウンで表示」 → ボックスをクリックで一覧が表示されるスタイル
  • 「投稿数を表示」 → カテゴリーごとの記事数が右側に表示されるスタイル
  • 「階層を表示」 → 下層カテゴリーも最初から表示されるスタイル

ということで、各種チェック項目が設定できたら…

WordPress AFFINGERにおける、サイドバーにカテゴリー一覧を設置する手順 1-08

↑ 右下の「保存」をクリックして完了です

実際の画面上で見てみると…

WordPress AFFINGERにおける、サイドバーにカテゴリー一覧を設置する手順 1-09

↑ こんな感じのカテゴリー一覧ができました

補足

【1】WordPressの各種設定が反映されない場合、ブラウザキャッシュ(=ブラウザ側に一時保存される、以前の読み込み情報)が影響している可能性があります

 

ブラウザキャッシュの干渉を受けずに最新のページを表示させるには、「スーパーリロード」という方法がおすすめです

  • Windows → 「Ctrl+Shift+R」 ※もしくは「Shift+F5」
  • Mac → 「Command+Shift+R」

【2】上記の方法でも反映されない場合、ページキャッシュ(=サーバー側に保存される、以前の読み込み情報)が影響している可能性があります

 

ページキャッシュを自動生成するプラグイン(例 WP Fastest Cache / Autoptimize )を導入している場合、そのなかの「キャッシュ削除」ボタンを試してみてください

 
「Autoptimize」の設定方法と使い方
【2021年】「Autoptimize」の設定方法と使い方を初心者向けに解説【WordPressプラグイン/コードの最適化でサイトスピードを高速化】

続きを見る

おしまい♪

あずき🐥

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

 

 ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

 ✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現!

 ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

※新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

 

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

今回の記事はこちらの章に属しています

 第6章 デザイン 編          

全9章のTOPです

あずきのワードプレスブログ「完全初心者」ガイド

 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

-WORDPRESS