Добавление текущего класса пункта меню в шаблон меню WordPress
Поэтому я пытался использовать свои собственные шаблоны меню для использования таких вещей, как начальная загрузка в пунктах меню для масштабирования. До сих пор это работает невероятно хорошо, но я наткнулся на проблему.
Добавляя и удаляя некоторые классы, я, по моей ошибке, удалил некоторые стандартные классы, такие как .current-menu-item class для активного оформления пунктов меню. Я пробовал некоторые ответы на Google и Stack, но, к сожалению, не смог найти хорошего решения. Итак, вот что я имею сейчас:
/**
* Class walker_home_menu
* Menu for the home page
*/
class walker_home_menu extends Walker_Nav_Menu
{
// Displays start of an element. E.g '<li> Item Name'
// @see Walker::start_el()
// In your functions.php
function start_lvl(&$output, $depth = 0, $args = array())
{
$indent = str_repeat("\t", $depth);
$output .= "\n$indent\n";
}
function end_lvl(&$output, $depth = 0, $args = array())
{
$indent = str_repeat("\t", $depth);
$output .= "$indent\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
{
$indent = ($depth) ? str_repeat("\t", $depth) : '';
$class_names = $value = '';
$classes = empty($item->classes) ? array() : (array)$item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
$class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
$id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);
$id = $id ? ' id="' . esc_attr($id) . '"' : '';
$output .= $indent . '';
$attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
$attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
$attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
$attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
$item_output = '<li class="col-lg-2 col-md-2 col-sm-3 col-xs-6 home-menu-item text-center">';
$item_output .= $args->before;
$item_output .= '<a' . $attributes . '>';
$item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$item_output .= "</li>";
$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}
function end_el(&$output, $item, $depth = 0, $args = array())
{
$output .= "\n";
}
}
Цель, которую я хотел бы достичь, это добавить active класс для активных пунктов меню, так что я могу дать активному пункту меню другой цвет фона CSS,
Спасибо за помощь в продвижении!
Удачного кодирования!
Решение
Так что я нашел решение своего вопроса. Так как я думаю, что многие будут создавать или создавать собственные меню, я отвечаю на свой вопрос.
Перед публикацией кода я попытался добавить переменную $class_items к <li class=".."> раздел. Но у меня не было никаких успехов. По крайней мере, до сих пор.
Таким образом, ответ состоит в том, чтобы добавить классы пунктов меню WordPress правильным способом. Смотрите код ниже.
$item_output = '<li class="col-lg-2 col-md-2 col-sm-3 col-xs-6 home-menu-item text-center' . $class_names . '">';
Имена классов WordPress, такие как .current-menu-item за .active стиль будет добавлен после того, как я создал новый макет.
Надеюсь, что это помогает всем, кто имеет эту проблему.
Простое решение для тех, кто хотел бы скопировать мой код в качестве основы. Вот последний рабочий фрагмент.
/**
* Class walker_home_menu
* Menu for the home page
*/
class walker_home_menu extends Walker_Nav_Menu
{
// Displays start of an element. E.g '<li> Item Name'
// @see Walker::start_el()
// In your functions.php
function start_lvl(&$output, $depth = 0, $args = array())
{
$indent = str_repeat("\t", $depth);
$output .= "\n$indent\n";
}
function end_lvl(&$output, $depth = 0, $args = array())
{
$indent = str_repeat("\t", $depth);
$output .= "$indent\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
{
$indent = ($depth) ? str_repeat("\t", $depth) : '';
$class_names = $value = '';
$classes = empty($item->classes) ? array() : (array)$item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
$class_names = $class_names ? ' ' . esc_attr($class_names) . '"' : '';
$id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);
$id = $id ? ' id="' . esc_attr($id) . '"' : '';
$output .= $indent . '';
$attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
$attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
$attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
$attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
$item_output = '<li class="col-lg-2 col-md-2 col-sm-3 col-xs-6 home-menu-item text-center' . $class_names . '">';
$item_output .= $args->before;
$item_output .= '<a' . $attributes . '>';
$item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$item_output .= "</li>";
$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}
function end_el(&$output, $item, $depth = 0, $args = array())
{
$output .= "\n";
}
}
Ура и счастливого кодирования!
Другие решения
Других решений пока нет …