Luxeritas メニューの作り方プチ応用編(メニューを使ってカテゴリーを一覧表示)

Beginners, メニュー

2回にわたってメニューの作り方について図解入りで解説してまいりました。
「な~~んだメニューって簡単じゃん」と思っていただけたでしょうか?

そこで今日は、プチ応用編として「メニューを使ったカテゴリー一覧表示の方法」について解説したいと思います。

サイドバーにカテゴリー一覧のように表示する

メニューの新規作成

開く「外観」「メニュー」
capture_17395_01(WordPressメニュー)

  1. 新規メニューを作成します。
  2. メニュー名に「カテゴリー」などと入力します。
  3. メニューを作成」ボタンをクリックします。

capture_17620_01(メニューの新規作成)

メニューにカテゴリーを追加する

  1. 左側の一覧から「カテゴリー」を選択する
  2. 「すべて表示」を選択する
  3. 追加したいカテゴリーにチェックを入れる
  4. 「メニューに追加」をクリックする
    ドラッグして順番を入れ替えたり階層表示にすることも可能
  5. 「メニューを保存」をクリックする

capture_17620_02(メニューにカテゴリーを追加)

サイドバーにメニュー(カテゴリー)を表示する

開く「外観」「ウィジェット」
capture_17563_05(ウィジェットの追加)

  1. 「ナビゲーションメニュー」をクリック
  2. 追加したいサイドバーを選択し「ウィジェットを追加」をクリック

capture_17563_06(ナビゲーションメニューの追加)

  1. タイトルを入力する:「カテゴリー」
  2. メニューを選択する:「カテゴリー」
  3. 保存する

capture_17620_03(ナビゲーションメニューの追加)

サイドバーに追加したメニュー(カテゴリー)が表示されました!

capture_17620_04(サイドバーのカテゴリーメニュー)

見た目をカスタマイズする

上のままでは飾り気がないので、スタイルを追加して下のようにカスタマイズしてみました。

子テーマのスタイルシートに以下のコードを追記します。

capture_17620_05(カテゴリーメニューカスタマイズ後)

Font Awesome 4 の場合
/* サイドバー見出し */
#side h3, #col3 h3, #side h4, #col3 h4{
	border-left: solid 10px #4184bf;
	border-bottom: solid 1px #4184bf;
	font-weight: 700;
	color: #444;
	margin: 4px 0 10px;/* 上 左右 下*/
	padding: 4px 0 4px 8px; /* 上下 左右*/
}
/* サイドバーメニューfaアイコン表示 */
#side .menu li:before {
    font-family: FontAwesome;
    content: "\f07c";
    margin-right: 5px;
    display: inline-block;
    color: #E44D26; /* アイコンの色 */
}
/* サイドバーメニューfaアイコン表示 */
#side .menu li li:before {
    font-family: FontAwesome;
    content: "\f141";
    margin-right: 5px;
    display: inline-block;
    color: #E44D26; /* アイコンの色 */
}
/* サイドバーリスト下線 */
#side ul li{
	border-bottom: 1px solid #e9e9e9;
	list-style: none outside;
}
#side ul li:last-child {
	border-bottom: none; /* 最後だけ下線なし */
}
/* サイドバーサブメニュー下線 */
#side .menu li li {
	border-top: 1px solid #e9e9e9;
	border-bottom: 0;
}

capture_17620_06(Font Awesome 5 Free)

Font Awesome 5 の場合
/* サイドバー見出し */
#side h3, #col3 h3, #side h4, #col3 h4{
	border-left: solid 10px #4184bf;
	border-bottom: solid 1px #4184bf;
	font-weight: 700;
	color: #444;
	margin: 4px 0 10px;/* 上 左右 下*/
	padding: 4px 0 4px 8px; /* 上下 左右*/
}
/* サイドバーメニューfaアイコン表示 */
#side .menu li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f07c";
	font-weight: 900;
    margin-right: 5px;
    display: inline-block;
    color: #E44D26; /* アイコンの色 */
}
/* サイドバーメニューfaアイコン表示 */
#side .menu li li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f141";
    margin-right: 5px;
    display: inline-block;
    color: #E44D26; /* アイコンの色 */
}
/* サイドバーリスト下線 */
#side ul li{
	border-bottom: 1px solid #e9e9e9;
	list-style: none outside;
}
#side ul li:last-child {
	border-bottom: none; /* 最後だけ下線なし */
}
/* サイドバーサブメニュー下線 */
#side .menu li li {
	border-top: 1px solid #e9e9e9;
	border-bottom: 0;
}

あとがき

メニューを使用したカテゴリー一覧表示では、カテゴリーに属する記事の数は表示できませんし、あらたなカテゴリーを作成した時は手動でメニューに追加する必要があります。

しかし、カテゴリーだけではなく、カスタムリンクも同様に追加できるので、通常のカテゴリーでは表示できない一覧(サブディレクトリに作成したサイトなど)も追加することが可能です。

また、ドラッグで表示順を並べ替えることができますので、ABC順ではなく優先順にカテゴリーを表示することも可能です。

タグの一覧もカスタムリンクを使用すれば、簡単にサイドバーに表示することが出来ます。
その際、URLのドメイン部分は省略して入力可能です。
capture_17620_07(カスタムリンクをメニューに追加)

いろいろ使い道のある「メニュー」を活用して、見やすいサイトを目指してくださいね☆

4

各種設定

Posted by どらみ