おとなんつづり

ほっと一息、大人世代あれこれ。心豊かな暮らしを目指しています。

CSS不要!WordPressサイドバーに特定のカテゴリだけをアイコン付きで表示させる方法


 

Wordpressでサイドに、好きなカテゴリだけを並び替えて表示する方法です。

テーマにウィジェットがある方限定です。

アイコン付きにするには「Font Awesome 4 Menus」プラグインを使います。

 

 

f:id:otonann:20170109003953j:plain

 

 

 

 

私はSimplicityというテーマを使っています。

テーマによっては、以下の方法が使えない方もいらっしゃるかもしれません。

せっかく訪問下さって申し訳ないんですが、その時はお許しください。

 

 

訪問者に分かりやすいカテゴリ表示

 

私は訪問サイトで、どんなサイトなのか分からない事があります。

訪問者が迷わないサイトにするって難しいですよね。

私はまだ最終イメージになっていないです。

 

迷わないようにする1つの方法として・・・

サイドバーにカテゴリを表示するのも良いんじゃないかなと思います。

 

 

サイドバーに特定のカテゴリだけを表示する

 

サイドバーにカテゴリを表示するだけなら簡単。

「外観>ウィジェット」ですぐ設置できますよね。

でも、メインではない記事のカテゴリまで全部サイドバーに表示されてしまいます。

 

カテゴリを選びたい!

そして、親子の階層を分かりやすくするために親にアイコンも付けたい!

 

 

 

▼以下は手を加える前。外観-ウィジェットでカテゴリを設置したイメージです。

 

  <手直し前・イメージ>

 

f:id:otonann:20170108234810j:plain

 

 

 

▼最終イメージはこちら。

 

 

少しの手間でこんな風に表示できます。

カテゴリの並び変えも出来るようになります。

 

 

  <手直し後・イメージ>

 

f:id:otonann:20170108234839j:plain

 

 

 

▼こちらのイメージは私の運営している別サイトGrimo[ぐりも]でご覧になれます。

(仕様変更する場合があります)

 

 

 

Font Awesome 4 Menus利用のアイコンメニュー

 

親カテゴリの前にアイコンがあると分かりやすいですよね。

「Font Awesome 4 Menus」というプラグインを使うと簡単なんです。

 

大雑把にお話しすると・・・

サイドバー表示用のメニューを新たに作り、ウィジェットで設定するだけです。

以下の順に進めていきます。

 

 

Font Awesome 4 Menusプラグイン

 

①「Font Awesome 4 Menus」プラグインをインストールして有効化。

② アイコンにしたいCSSクラスを選ぶ。 上記イメージの場合は「fa-chevron-circle-right」になります。 CSSクラスの選び方は以下をどうぞ。

 

Simplicityを運営なさっている寝ログさんです。

グローバルナビメニューにアイコンを付ける方法が分かりやすく説明されています。

 

nelog.jp

 

 

外観-メニューで新規メニュー作成

① 外観ーメニューの「新規メニュー追加」で適当なメニュー名を付けて追加作成

② 使いたいカテゴリだけに「レ」を入れ「メニューに追加」

③ メニュー構造のカテゴリの並びをドラッグで整理

④ メニュートップの「表示オプション▼」を選び、CSSクラスに「レ」を付ける

⑤ ④を実行するとメニュー構造の各カテゴリに「CSS class (オプション)」欄が表示されるので、親カテゴリだけにCSSクラスを入力 イメージ画面では「fa-chevron-circle-right」と入力

⑥ メニュー保存

 

f:id:otonann:20170108235210j:plain

 

 

外観-ウィジェットでサイドバー設置

 

① 外観ーウィジェットでカスタムメニューをサイドバーウィジェットにドラッグかクリックで追加

② サイドバーに表示させたいタイトル入力

③ 新規作成したメニューをプルダウン選択

④ 保存

 

f:id:otonann:20170108235248j:plain

 

最後に

 

カテゴリの表示方法は色々ですよね。

モバイル側の表示も考えないといけませんから、ちょっと大変です。

 

実は私、お洒落なサイトに訪問すると記事にたどり着かない時があります。

私のようにまだ慣れていない人は迷うんだと思います。  

訪問してくださった方にストレスが無いサイトが良いですよね。

 

だからクリック回数は最小限に。

 

 

カテゴリが視界に入れば、サイト説明を読まなくても何となく理解されますよね。

記事の雰囲気が分かる大事なカテゴリ。

分かりやすく出来たらいいですね。

 

 

 

CSSを使えばもっと簡単なのかもしれません。

そしてこの方法は当たり前すぎるのかもしれません。

だけど、私のようにまだ分からない方の為に記事に残しました。

どなたかのお役に立てるといいなと思います。

 

▼こちらでイメージをご覧になれます。

 

 

読んでくださってありがとう。

オトナンでした~。

ではまた (╭ರᴥ•́)☆ 

 

 

 <関連記事>