Home/ Questions/Q 84642
Next
Answered
user
  • 0
Гуру
Asked: 2022-03-20T22:24:10+03:00 In:

Небольшие изменения CSS на основе топменю — как?

  • 0

Хочу внести небольшие css-правки на основе выбора верхнего (корневого) меню.

Как правильно это сделать в WP?

//редактировать// Это веб-сайт (страницы), а не блог, и в основном цвета некоторых ссылок и некоторых изображений должны зависеть от выбранного элемента верхнего меню.

Пример, структура страницы:

* Начинать
* Продукты
  * Категория товаров.
    * Продукт
* Услуги
  * Список услуг
    * Вложенный
* Контакт
  * Главный офис
    * Список сотрудников
  * За рубежом
    * Другой список

Верхний уровень находится в верхнем меню, одноуровневый, а уровни 2 и 3 — во вложенном левом меню. Теперь второстепенные цветные элементы бокового меню меняются в зависимости от выбранного элемента верхнего меню.

//конец редактирования//

С уважением, / т

cmsmenustemplate-tags
Share

    9 ответов

    1. Эксперт

      Можете ли вы уточнить, какого изменения вы пытаетесь достичь… перейти в меню навигации, перейти на отображаемую страницу и т. д.?

      • 0
    2. Лучший ответ
      Гуру

      Мой ответ добавляет класс к <body> элементу через body_class фильтр. Вероятно, это самый простой способ применить дополнительное форматирование к любому элементу на странице. Добавлены классы wpse14430_products или wpse14430_services ( wpse14430_contact на основе слагов верхних страниц в вашем примере).

      С использованиемwp_nav_menu()

      Если вы используете wp_nav_menu() для отображения меню, WordPress строит дерево пунктов меню. Мы можем использовать эту информацию, чтобы получить верхнюю страницу текущего элемента. Единственная проблема: нам нужно это в <body> теге, то есть до отображения меню. Решение состоит в том, чтобы сохранить меню в переменной, которую мы позже повторим сами.

      Взяв в качестве примера тему Twenty Ten, я перемещаю wp_nav_menu() вызов в первый <?php блок:

      $wpse14430_menu = wp_nav_menu( array(
    'container_class' => 'menu-header',
    'theme_location' => 'primary',
    'echo' => false,
) );

      И там, где мы раньше это вызывали, теперь мы повторяем наш сохраненный вывод:

      echo $wpse14430_menu;

      wp_nav_menu() имеет интересный фильтр, вызываемый после того, как пункты меню упорядочены и имеют свои классы. Классы уже содержат информацию о предках. Мы подключаемся к этому фильтру и находим первый элемент, который является текущим элементом или его предком:

      add_filter( 'wp_nav_menu_objects', 'wpse14430_wp_nav_menu_objects' );
function wpse14430_wp_nav_menu_objects( $sorted_menu_items )
{
    // The items are in menu order, so the first match is the top item
    foreach ( $sorted_menu_items as $menu_item ) {
        if ( $menu_item->current || $menu_item->current_item_ancestor ) {
            $GLOBALS['wpse14430_top_page'] = get_post( $menu_item->object_id );
            break;
        }
    }
    return $sorted_menu_items;
}

      Теперь у нас есть верхняя страница, и нам нужно только добавить ее в класс body:

      add_filter( 'body_class', 'wpse14430_body_class_menu' );
function wpse14430_body_class_menu( $body_class )
{
    if ( isset( $GLOBALS['wpse14430_top_page'] ) ) {
        $body_class[] = 'wpse14430_' . $GLOBALS['wpse14430_top_page']->post_name;
    }
    return $body_class;
}

      Использование страниц в качестве структуры меню

      Если вы не используете, wp_nav_menu() а вместо этого используете прямой порядок страниц, вы также можете проверить предков. Помните, что если вы не определяете меню с помощью новой системы меню, но по-прежнему отображаете список страниц с помощью wp_nav_menu() (резервной функции), описанная выше система будет работать для вас.

      add_filter( 'body_class', 'wpse14430_body_class_pages' );
function wpse14430_body_class_pages( $body_class )
{
    if ( is_page() ) {
        $null = null;
        $top_page = get_post( $null );
        $ancestors = get_post_ancestors( $top_page );
        if ( $ancestors ) {
            $top_page = get_post( array_pop( $ancestors ) );
        }
        $body_class[] = 'wpse14430_' . $top_page->post_name;
    }
    return $body_class;
}
      • 0
    3. Учитель

      Если вы выводите меню с помощью wp_list_pages/category или встроенного конструктора меню, то каждой ссылке на страницу или категорию назначается класс, который вы можете стилизовать. Это означает, что текущая страница или раздел, на котором находится пользователь, будет иметь класс, который затем можно будет стилизовать так, чтобы он выглядел «активным».

      Ссылки на родительскую страницу будут отображаться:

      current_page_item или current-menu-item (когда активен верхний уровень) current_page_ancestor или current-menu-ancestor (когда активен первый дочерний элемент)

      Ссылки на категории будут отображаться:

      current-cat (когда активен верхний уровень) current-cat-parent (когда активен первый дочерний элемент)

      Существуют и другие классы, которые WP будет автоматически вставлять в тег li пунктов меню, в зависимости от глубины.

      Я предполагаю, что это то, что вы хотели сделать, поэтому я надеюсь, что это поможет.

      • 0

    Оставить ответ

    You must login to add an answer.

    Need An Account,