おとなんつづり

オトナになっても純粋に、硬い心を柔らかく

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[ぐりも]でご覧になれます。

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

grimo-with.com

 

 

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

 

最後に

 

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

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

 

実は私、お洒落なサイトやブログに訪問すると、記事にたどり着かない時があります。私のようにまだ慣れていない人は特に迷うのではないかと思います。  

訪問してくださった方にストレスが無い構造に出来たら良いですね。

 

そしてクリック回数は最小限に。

 

 

カテゴリが視界に入れば、何となく理解できますよね。記事の雰囲気が分かる大事なカテゴリ。分かりやすく出来たらいいですね。

 

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

grimo-with.com

 

当サイトに掲載されている情報についての著作権は放棄しておりません。サイトポリシーや転載につきましてはこちら