wp_nav_menu (), як змінити клас <li>?

16

Я будую меню для свого веб-сайту. Статика виглядає так:

<nav>
  <ul id="menu">
        <li class="item_1"><a href="#">Item 1</a></li>
        <li class="item_2"><a href="#">Item 2</a></li>
        <li class="item_3"><a href="#">Item 3</a></li>
        <li class="item_4"><a href="#">Item 4</a></li>
        <li class="item_5"><a href="#">Item 5</a></li>
        <li class="item_6"><a href="#">Item 6</a></li>
        <li class="item_7"><a href="#">Item 7</a></li>
        <li class="item_8"><a href="#">Item 8</a></li>
    </ul>

Я зміг зрозуміти, як налаштувати <ul>тег, позбутися автоматичного <div>тегу. Але тепер я хочу налаштувати <li>тег, щоб можна було призначити інше classім’я для керування конкретною поведінкою через CSS. Коли я використовую wp_nav_menu()вихід, виглядає наступним чином:

    <ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
    </ul>

Я хочу , щоб позбутися від idв <li>тегах і змінити , classщоб відобразити назву сторінки , яку я хочу зробити посилання. В основному я хочу вивести те саме, що і перший фрагмент коду в цій публікації.

Причиною, чому я це роблю, є те, що я використовую власні зображення, якими керує мій CSS, вкладений у звичайний текст.

Чи можливо це? Яку стратегію я повинен використовувати для подолання цієї проблеми?

theme-development menus navigation

— Християнин
джерело

Тут ви можете додати інший клас у ul> li> a sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links

— Рамез SOOMRO

14

Використовуйте користувальницьку ходунку , видаліть усе, що вам не потрібно, і додайте свої заняття. Ось ходунок, який я використовую для отримання списку з чистою розміткою: T5_Nav_Menu_Walker_Simple .

Ви також можете фільтрувати 'nav_menu_css_class'або 'wp_nav_menu_items'. Але клас пішоходів простіше зрозуміти та контролювати на мою думку.

— фуксія
джерело

Дякую Тошо, я просто знаходжу, що у новій версії Wordpress (3.3) ми можемо додавати спеціальні класні ялинки до кожного пункту меню, який би вирішив мою проблему. Я спробував запропонований мені сценарій (T5_Nav_Menu_Walker_Simple), який знімає все з <li>, як ми можемо контролювати, які елементи ми хочемо зберегти?

— Крістіан

1

@Christian Ви можете змінити ходунки, як вам потрібно, це просто дуже основний приклад. Щоб побачити, яка інформація доступна, додайте print_r( $item, TRUE )до кожного li. Тоді вирішіть, що з цим робити. :)

— fuxia

Це вказувало мені в правильному напрямку, що мені потрібно було wp_nav_menu , але мені потрібно було змінити параметр 'контейнер_клас', щоб працювати в моєму конкретному випадку використання, де я за певної умови поміняв головне меню на інше, але мені було потрібно класи повинні відповідати css.

— Д. Дан

10

перейти до зовнішнього вигляду> меню - виберіть потрібне меню - перейдіть до "Параметри екрану" вгорі праворуч, виберіть "класи css" - додайте клас до кожного пункту меню ..

— Q Studio
джерело

1

Встановлення <li>класу nav-link, як його потребує завантажувальний 4.3:

function add_menu_link_class($atts, $item, $args)
{
    $atts['class'] = 'nav-link';
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);

Ви також можете скасувати idатрибут у цьому масиві.

— cweiske
джерело

0

Як згадується останній плакат, ви можете додати свої власні класи через зовнішній вигляд> меню з класами CSS, поставленими галочками на екрані. У ходунку ви можете отримати доступ до того, що ви вводите туди через:

$item_output .= '<a'. $attributes .' class="'. $item->classes[0].'">';

Я навіть використовував це, щоб додати в меню попередньо названі зображення - трохи лускав, але це працює.

<img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">

— user2080750
джерело