Destaque wp_nav_menu () Classe Ancestor w / o Crianças na Estrutura de navegação?

( Nota dos moderadores: originalmente tinha o título “wp_nav_menu Classe Ancestrais sem filhos na estrutura de navegação”)

Eu tenho um wp_nav_menu no meu header, que tinha três páginas nele. Quando eu estou em uma dessas páginas, o li que contém essa página no menu recebe a class .current_page_item . Essas três páginas possuem modelos e esses modelos contêm consultas personalizadas para obter todas as postagens de um determinado tipo de conteúdo. Com efeito, os “filhos” percebidos desta página de nível superior não são realmente crianças, são apenas um tipo de conteúdo que associei a essa página de nível superior usando um modelo.

Gostaria que os itens do menu de nível superior obtenham uma class 'current-ancestor' quando o usuário estiver navegando uma única página de um tipo de publicação específico, novamente, associado a essa página somente em uma consulta personalizada no arquivo de modelo.

Espero que isso faça sentido – se não, deixe-me saber onde eu perdi você! Muito aprecio qualquer ajuda.

–Edited for specifics: Por exemplo, eu tenho uma página estática chamada Workshops que está usando um modelo. Seu slug é oficinas . O modelo possui uma function get_posts e um loop personalizados dentro dele, que puxa e exibe todas as postagens de um tipo de conteúdo personalizado chamado workshops . Se eu clicar em um título dessas oficinas, eu sou levado ao conteúdo completo desse pedaço de conteúdo. A estrutura de permalink do tipo de postagem personalizado está configurada para workshops / postname , de modo que o usuário vê isso, esses itens são filhos da página Workshops, quando, na realidade, eles são todos de um tipo de conteúdo, mas não relacionados à página. É essa lacuna que preciso fechar efetivamente no menu, destacando o item de menu ‘Workshops’ ao navegar no conteúdo do tipo ‘workshop’.

Mais uma vez, espero que isso faça sentido, acho que eu disse “workshop” mais de 20 vezes em um parágrafo!

Solutions Collecting From Web of "Destaque wp_nav_menu () Classe Ancestor w / o Crianças na Estrutura de navegação?"

Existe uma solução mais simples. Esqueça criar páginas para cada tipo de publicação apenas para que você possa ter itens de navegação, porque, como você aprendeu, o WP não tem como reconhecer que os tipos personalizados que você está navegando estão relacionados a essa página.

Em vez disso, crie um link personalizado em Aparência-> Menus. Basta colocar o URL que irá retornar o seu tipo personalizado e dar-lhe um label, depois pressione “Adicionar ao menu”.

 http://example.com/workshops/ 

ou non-pretty-permalinks:

 http://example.com/?post_type=workshops 

isso simplesmente criará um botão de navegação que exibirá todas as postagens com esse tipo de postagem personalizado e também adicionará a class do item do menu atual quando você clicou nesse item de navegação – mas ainda não adicionará a class de nav em qualquer URL diferente deste

Então, uma vez que é criado, entre na configuração desse novo item e insira a slug do tipo de postagem personalizado no campo “Atributo do título” (você também pode usar o campo de descrição, mas aquele está escondido nas opções da canvas do administrador por padrão).

Agora, você precisa ligar o filtro nav_menu_css_class (que é triggersdo para cada item do nav) e verifique se o conteúdo que está sendo visto é do tipo de publicação indicado em seu item de navegação personalizado:

 add_filter('nav_menu_css_class', 'current_type_nav_class', 10, 2 ); function current_type_nav_class($classs, $item) { $post_type = get_query_var('post_type'); if ($item->attr_title != '' && $item->attr_title == $post_type) { array_push($classs, 'current-menu-item'); }; return $classs; } 

Nesse caso, verificamos se o conteúdo do campo do Atributo de Título não está vazio e se eles correspondem ao tipo de postagem atual que está sendo consultado. Se assim for, adicionamos a class do item do menu atual à sua matriz de class e, em seguida, retornamos a matriz modificada.

Você poderia modificar isso para simplesmente combinar o título do item de navegação, mas se, por algum motivo, você quer classificar o item de navegação de forma diferente da lama simples do tipo de publicação, usando o campo Atributo de título ou Descrição, você oferece essa flexibilidade.

Agora, qualquer vez que você estiver visualizando um único item (ou provavelmente listas de arquivos uniformes) de um tipo de publicação que corresponda a um item de menu de navegação, esse item receberá o item de menu atual da class CSS para que o realce funcione.

Não há páginas ou modelos de página necessários 😉 A consulta de URL cuida da busca das publicações certas. Seu modelo de loop se encarrega de exibir a saída da consulta. Esta function cuida reconhecer o que está sendo mostrado e adicionar a class CSS.

BÔNUS

Você pode até mesmo automatizar o processo usando wp_update_nav_menu_item , por itens de menu gerados automaticamente para todos os seus tipos de publicação. Para este exemplo, você precisaria primeiro ter recuperado o $menu_id do menu de navegação que você deseja que esses itens sejam adicionados.

 $types = get_post_types( array( 'exclude_from_search' => false, '_builtin' => false ), 'objects' ); foreach ($types as $type) { wp_update_nav_menu_item( $menu_id, 0, array( 'menu-item-type' => 'custom', 'menu-item-title' => $type->labels->name, 'menu-item-url' => get_bloginfo('url') . '/?post_type=' . $type->rewrite['slug'], 'menu-item-attr-title' => $type->rewrite['slug'], 'menu-item-status' => 'publish' ) ); } 

ao invés de usar

$ post_type = get_query_var (‘post_type’);

Você pode querer tentar:

$ post_type = get_post_type ();

Como algumas vezes o tipo de publicação não está definido na var. Consulta. Este é o caso do post_type padrão de “post”, portanto, se você deseja destacar uma publicação que foi listada a partir de uma página de listview, você precisará usar isso. get_very_var () apenas retorna uma string vazia para tipos de publicação que não são personalizados.

 add_filter('nav_menu_css_class', 'current_type_nav_class', 10, 2 ); function current_type_nav_class($classs, $item) { $post_type = get_post_type(); if ($item->attr_title != '' && $item->attr_title == $post_type) { array_push($classs, 'current-menu-item'); }; return $classs; } 

@Somatic – isso é fantasico! Eu modifiquei seu código um pouco para que ele também funcione para uma Taxonomia específica (que eu estou usando apenas para o post_type relacionado). A idéia é usar o atributo Title do item do menu para armazenar tanto o nome do tipo post_ e o nome da taxonomia, separados por um ponto e vírgula, e depois explodir pela function.

 add_filter('nav_menu_css_class', 'current_type_nav_class', 10, 2 ); function current_type_nav_class($classs, $item) { # get Query Vars $post_type = get_query_var('post_type'); $taxonomy = get_query_var('taxonomy'); # get and parse Title attribute of Menu item $title = $item->attr_title; // menu item Title attribute, as post_type;taxonomy $title_array = explode(";", $title); $title_posttype = $title_array[0]; $title_taxonomy = $title_array[1]; # add class if needed if ($title != '' && ($title_posttype == $post_type || $title_taxonomy == $taxonomy)) { array_push($classs, 'current-menu-item'); }; return $classs; } 

Aqui, minha solução se você quiser trabalhar com wp_list_pages.

Adicione isso em suas funções.php

 add_filter('page_css_class', 'my_page_css_class', 10, 2); function my_page_css_class($css_class, $page){ $post_type = get_post_type(); if($post_type != "page"){ $parent_page = get_option('page_for_custom_post_type-'.$post_type); if($page->ID == $parent_page) $css_class[] = 'current_page_parent'; } return $css_class; } 

Agora, apenas adicione na tabela wp_options uma nova linha com um nome_do_taplicação de page_for_custom_post_type-xxxx e um valor de opção com a ID da página que deseja se conectar.

Talvez você tenha reconhecido que já existe uma opção chamada page_for_posts . Se você tiver apenas 1 tipo de postagem personalizada, você pode definir sua página em /wp-admin/options-reading.php no menu suspenso e a navegação definirá a página atual corretamente.

Eu acho que o wordpress core deve estender esta seção com um menu suspenso para cada tipo de publicação registrado.

Eu decidi ficar com as páginas e usar o nome do modelo de página como uma class no item de navegação. Isso me permite evitar a confusão do atributo do título que eu não gostava sobre algumas das outras soluções.

 add_filter('nav_menu_css_class', 'mbudm_add_page_type_to_menu', 10, 2 ); //If a menu item is a page then add the template name to it as a css class function mbudm_add_page_type_to_menu($classs, $item) { if($item->object == 'page'){ $template_name = get_post_meta( $item->object_id, '_wp_page_template', true ); $new_class =str_replace(".php","",$template_name); array_push($classs, $new_class); return $classs; } } 

Eu também tenho classs corporais adicionadas ao header.php

 > 

Finalmente, esta solução requer algum css extra para aplicar o estado selecionado / ativo em seus itens de menu de navegação. Eu uso isso para mostrar arquivos de taxonomia e tipos de postagem personalizados relacionados à página como filhos desta página:

 /* selected states - include sub pages for anything related to products */ #nav-main li.current-menu-item a, body.single-mbudm_product #nav-main li.lp_products a, body.tax-mbudm_product_category #nav-main li.lp_products a, #nav-main li.current_page_parent a{color:#c00;} 

@Somatic – Great code! Eu fiz uma mudança sozinha. Eu queria manter o Atributo de Título para o propósito pretendido, então, em vez disso, coloquei o slug Custom Post Type nas propriedades do menu avançado do Link Relationship (XFN) que você pode ativar nas Opções da Tela. eu modifiquei

 if ($item->attr_title != '' && $item->attr_title == $post_type) { 

e mudou para

 if ($item->xfn != '' && $item->xfn == $post_type) { 

Bom trabalho somático.

Infelizmente, não consigo como você pode listar seus tipos de postagem personalizados em uma página da maneira que você explica. Se eu não usar um page-portfolio.php e adicioná-lo a uma página, tudo que recebo é 404 página.

Se eu gosto de Gavin, eu modifiquei você funcionando um pouco para remover também o “current_page_parent” da página do blog como esta.

 add_filter('nav_menu_css_class', 'current_type_nav_class', 10, 2); function current_type_nav_class($css_class, $item) { $post_type = get_query_var('post_type'); if (get_post_type()=='portfolio') { $current_value = "current_page_parent"; $css_class = array_filter($css_class, function ($element) use ($current_value) { return ($element != $current_value); } ); } if ($item->attr_title != '' && $item->attr_title == $post_type) { array_push($css_class, 'current_page_parent'); }; return $css_class; 

}