賢威サイドバーのカテゴリーを並び替える方法

この記事は約6分で読めます。

  • LINEで送る

賢威サイドバーのカテゴリーを並び替える方法

賢威6.1初期状態のサイドバーは、カテゴリーが文字でソートされ表示されます。
さらに、カテゴリーの階層も関係なく表示されてしまうため、見た目が綺麗ではありません。

カテゴリー初期状態

このような感じで縦一列に階層関係なく表示してしまいます。

カスタマイズ後のカテゴリー

最低限、階層化したカテゴリーはこのように階層化をしっかりと明確にして表示したいです。
これは、カスタムメニューとウィジェットで実現可能です。

カスタムメニューでカテゴリーの階層化と順序を指定

まずは、「外観 > メニュー」からカスタムメニューでカテゴリーを作成します。

カスタムメニューでカテゴリーを作成

以下の順序でカテゴリーのカスタムメニューを作成します。

  1. 「新規メニュー」をクリックし、メニューの名前を入力する(画像ではCategory)
  2. カテゴリーメニューの中から、必要なカテゴリーにチェックを入れ「メニューに追加」をクリックする
  3. カテゴリーの順序と階層を決める
  4. 「メニューを保存」をクリックし、メニューの作成を完了する

この4手順で、好きなカテゴリー順序と階層化が作成できます。
今回はサイドバーへの追加を例として説明していますが、フッターなど好きな位置に使用できます。

ウィジェットでサイドバーにカテゴリーを追加する

次に、「外観 > メニュー」からウィジェットで先ほどのカスタムメニューをサイドバーに追加します。

ウィジェットでカテゴリーを追加

以下の順序でウィジェットにカテゴリーを追加します。

  1. 利用できるウィジェットから「カスタムメニュー」を選択し、右のサイドバーへドラックアンドドロップする
  2. サイドバーの見出しを入力する(画像ではカテゴリー)
  3. メニューを選択から、先ほど作成したカスタムメニューを選択する(画像ではCategory)
  4. 「保存」をクリックし、ウィジェットへの追加を完了する

カスタマイズ後のカテゴリー

これだけで、サイドバーにカスタムメニューのカテゴリーが追加されます。

サイドバーカテゴリーに出力されるHTML

今回の方法で追加したカテゴリーのHTMLは以下のとおり出力されます。

<div class="contents widget-conts widget_nav_menu">
<h3>カテゴリー</h3>
<div class="menu-category-container">
<ul id="menu-category" class="menu">
	<li id="menu-item-678" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-678"><a href="http://www.keni-customize.net/category/startup/">スタートアップ</a>
	<ul class="sub-menu">
		<li id="menu-item-679" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-679">
			<a href="http://www.keni-customize.net/category/startup/wordpress/">WordPress</a>
		</li>
	</ul>
	</li>
	<li id="menu-item-672" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-has-children menu-item-672">
		<a href="http://www.keni-customize.net/category/customize/">カスタマイズ</a>
	<ul class="sub-menu">
		<li id="menu-item-676" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-676">
			<a href="http://www.keni-customize.net/category/customize/all/">全体</a>
		</li>
		<li id="menu-item-674" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-674">
			<a href="http://www.keni-customize.net/category/customize/top/">トップページ</a>
		</li>
		<li id="menu-item-677" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-677">
			<a href="http://www.keni-customize.net/category/customize/toukou/">投稿(記事ページ)</a>
		</li>
		<li id="menu-item-675" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-675">
			<a href="http://www.keni-customize.net/category/customize/footer/">フッター</a>
		</li>
		<li id="menu-item-673" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-673">
			<a href="http://www.keni-customize.net/category/customize/design/">デザイン</a>
		</li>
	</ul>
	</li>
</ul>
</div>
</div>

CSSでデザインを変更する場合は、「menu-category-container」のスタイルや
「menu-category」のスタイルを修正してください。

1番外側のdivタグである「widget_nav_menu」でもスタイルを変更できますが、
他のカスタムメニューを作成した場合に影響がでます。

  • LINEで送る

コメントを残す

このページの先頭へ