カテゴリーをプラグインなしでかっこよく並べ替え!3パターン

2019-01-10カスタマイズプラグイン不要

 

はじめに

WordPressのカテゴリーは文字の昇順にしか表示できず、順番を変えられないので、思ったようにならないのが悩みどころです。

Category Order や jQuery Vertical Accordion Menu のようなプラグインもありますが、

出来れば必須でないプラグインはなるべく避けたい!

そこで「メニュー」を使って並べ替える方法で、更にかっこよく(?)デザインをカスタマイズしてみましたので、やり方を書いてみます。

 

デフォルト表示

 

カスタマイズ表示

 

かっこいいかどうかは主観ですが、、、

並べたい順番に出来、親子の入れ子も、カテゴリー以外の固定ページやカスタムリンクも入れられます。

 

カスタマイズ方法

メニュー作成

 まずは「外観」→「メニュー」から新しいメニューを作成します。

 

 わかりやすい名前を付けて「メニューを作成」ボタンを押します。

 

カテゴリーや、固定ページ、カスタムリンクなどから表示したいメニューを作ります。

 それぞれから選択、カスタムリンクはURLを入力して「メニューに追加」ボタン

 

 

 

 主項目、副項目を使って表示したい順番や入れ子にして並べ、それぞれの「ラベル(表示文字)」を入力します。

 

 

メニューが完成したらサイドバーなどのウィジェットに追加します。

 「ナビゲーションメニュー」を表示させたいウィジェットに追加

 ウィジェットを追加し、作成したメニューを選択します。

 

ここまで完了で表示すると以下のように表示され

並べ替えは出来ていますが、もう一工夫したい!

 

デザインカスタム

パターン1

 (子テーマの)スタイルシートにカスタマイズCSSを追記します。
【style.css】
/******************************/
/* ナビゲーションサブメニュ- */
/******************************/
ul.menu a {
padding: 0;
color: #404040;
border-left: solid 6px #2c1814;/*左線(付箋のような)*/
line-height: 2.8;/*高さ*/
padding: 0.5em;
font-size:16px; /* 文字の大きさ */
font-weight: bold; /* 文字を太字に */
}
ul.sub-menu li a{
color:#fff !important; /* サブメニュー文字色 */
background-color:#2c1814; /* サブメニューの背景色 */
font-size:14px !important; /* 文字の大きさ */
font-weight:bold !important; /* 文字を太字に */
}

 

フォントの色やサイズに関する装飾は、 !important をつけないと反映されませんでした。

オンマウスで色を変える場合

ul.sub-menu li a:hover{
color:#fff !important; /* サブメニュー文字色 */
background-color:#2c1814; /* サブメニューの背景色 */
}

 

パターン2

ul.menu a {
padding: 0;
color: #fff;
line-height: 2.8;/*高さ*/
padding: 0.5em;
background: #a65555; /*背景色*/
border-top: solid 5px #e0c2c2; /*上線の色*/
border-bottom: solid 5px #e0c2c2; /*下線の色*/
font-size:16px; /* 文字の大きさ */
font-weight: bold; /* 文字を太字に */
}
ul.sub-menu li a{
color:#fff !important; /* サブメニュー文字色 */
background-color:#f1e4e4; /* サブメニューの背景色 */
font-size:14px !important; /* 文字の大きさ */
font-weight:bold !important; /* 文字を太字に */
border: none;
border-radius:8px; /*角の丸み*/
color: #404040 !important;
}
ul.sub-menu li a:hover{ /*マウスが乗った時の色*/
color:#fff !important; /* サブメニュー文字色 */
background-color:#a65555; /* サブメニューの背景色 */
}
デザインを整える(パターン1,2共通)

これだけでは、文字の長さによってガタガタで、なんかみっともないので・・・

 

もうひと手間! 力技で・・・

 メニューの「ナビゲーションラベル」に空白を入れて長さを調整します。
「副項目」と書かれているところが揃うのを目安にスペースを挿入

 

 以上で完成!!

 

パターン3(シンプル)

1995_05

見た目はシンプルに☆控え目なアイコンフォントだけ追加した例

/* サイドバーメニューアイコンフォント */
.menu li:before {
font-family: "Font Awesome 5 Free";
content: "\f152";
font-weight: 900;
margin-right: 5px;
display: inline-block;
color: #9d9d9d;
}
.menu li li:before {
font-family: "Font Awesome 5 Free";
content: "\f105";
margin-right: 5px;
display: inline-block;
color: #9d9d9d;
}
ul.sub-menu li a:hover{ /*マウスが乗った時の色*/
color:#fff !important; /* サブメニュー文字色 */
background-color:#a65555; /* サブメニューの背景色 */
}

CSSのデザイン内容はいろいろ変えてみるといろんなデザインが可能です。

 

独自のかっこいいデザインを作ってみてはいかがでしょうか★

 

注意点

メニューを使った方法は、カテゴリーごとの記事数は出ません。

メニューで使っている「menu」「sub-menu」をカスタマイズする為、テーマによってクラス名に気を付けなければグローバルメニューやフッターメニューなど、他のメニューにも影響します。

ルクセリタスの場合は、対象CSSに「#side」を付けて下さい。

【例】 #side .menu li:before

 

サイドバーでのメニュー限定のCSSを書かない場合、たとえば高さを変えるとグローバルメニューのプルダウンで1行の高さも変わります。

 line-height: 2.8;/*高さ*/

 

 line-height: 1.5;/*高さ*/

 

色のカスタマイズには以下もご利用下さい。

SNS等地下鉄JRセーフ色名