web-dev-qa-db-ja.com

Wordpressのカスタムメニューウィジェットスタイル

私のサイトのフッターにある1つのカスタムメニューウィジェットを2つの列に分割するための最良の方法を誰かが知っているかどうか私は思っています。合計8つのリンクがあるので、4つのリンクの2つの列に分割したいと思います。これのための機能があるかどうかわからないか、またはこれを達成するためのCSSがありますか？ウィジェットからのHTMLマークアップは次のようになります。

<ul>
    <li id="menu-item-133" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-133">
        <a href="#">Link</a>
    </li>
</ul>

明細コードについて、この構造をさらに7回繰り返します。

menuswidgetscolumns
2
Danny

純粋にCSSでは、メニュー項目の幅を設定し、それらをフロートさせてからULをその2倍に設定することができます。

footer ul {
    width: 200px;
}
footer .menu-item {
    float: left;
    width: 100px
}

（フッターを指定するために使用している要素がわかりません。構造に合わせて更新する必要があります。）

2
totels

http://example.com/wp-admin/nav-menus.phpで、カスタムナビゲーションメニューから個々のCSSクラスをメニュー項目に割り当てることができます。

そのため、最初の4つのリンクにはwidget-left-columnクラス、それ以外にはwidget-right-columnクラスがあります。
したがって、ウィジェットを2列に分割するためにCSSの処理を実行できます。 （厳密なCSSの質問はWordPress StackExchangeではトピック外です）。

個々のカスタムナビゲーションメニュー項目へのCSSクラスの割り当て

同じスクリーンショットを繰り返すのではなく、ここで @ JeremyJaredの答え /と同じ質問を再現します。

まず、画面オプションに行き、cssチェックボックスを選択してください：

enable navigation menu classes

次に、メニュー項目を開き、それにクラスを付けます。私の例では、クラスは.home-page：になります。

navigation menu class

複数のクラスを割り当てるには、それらを区切るために空白を使用する必要があります。
navigation menus multiple classes
結果は次のHTMLになります。
enter image description here

1
brasofilo