Tutorial WordPress: Menu personalizado para postagens ou páginas na barra lateral

Este post é para você que gerencia um site WordPress que possui muito conteúdo, possivelmente muitas páginas estruturadas em hierarquia, e deseja uma melhor navegação fora do menu principal. Para ajudar a navegar no site, um menu personalizado relacionado à postagem atual ajudará tremendamente. O problema de colocar um widget de menu na barra lateral (ou onde você quiser) é que a barra lateral é comum. Nesta postagem, aprenderemos como mostrar um menu personalizado adicional na barra lateral, permitindo que postagens, páginas ou tipos de postagem personalizados escolham um menu.

Adicione o código abaixo no seu tema functions.phpou dentro do código do seu plugin.

Permitir que postagens ou páginas escolham um menu

Criar menus no WordPress é fácil e você pode usar o widget Menu para exibir um menu na barra lateral. O problema é que a barra lateral é global e o mesmo menu será exibido em todos os lugares. E se você quiser que menus específicos sejam exibidos em páginas específicas? Você também aprenderá como garantir que o menu escolhido seja herdado pelas páginas filhas. Dessa forma, você só precisa selecionar o menu na página pai. Quaisquer subpáginas também mostrarão o mesmo menu sem a necessidade de editar todas elas.

Adicionando uma metabox para escolher o menu

O primeiro passo é criar uma metabox em posts ou páginas onde temos a opção de escolher um menu. Usamos a função add_meta_box()e decidimos para quais tipos de postagem queremos mostrá-la.

add_action('add_meta_boxes', function() {
    add_meta_box('metabox-sidebar-menu', __('Sidebar Menu', 'txtdomain'), 'awp_sidebar_menu_metabox_callback', ['post', 'page']);
});

Ajuste o código acima para os tipos de título e postagem desejados. O exemplo acima adicionará a metabox a posts e páginas. O terceiro parâmetro, que chamei awp_sidebar_menu_metabox_callbackde, é a função responsável por renderizar o conteúdo da metabox. Vamos definir isso a seguir. Isto é o que precisaremos fazer em nossa metabox:

function awp_sidebar_menu_metabox_callback($post) {
    // Get all menus
 
    // Get the current saved menu, if set
 
    // Output HTML with a select showing all menus, and mark the currently saved one as selected
}

Podemos obter uma matriz com todos os menus salvos no WordPress com wp_get_nav_menus(). Quanto à busca do menu escolhido atual, armazenamos o menu escolhido como um post meta awp_sidebar_menu(chame-o como quiser), e simplesmente buscaremos o valor com base na corrente $postfornecida a nós na função metabox. Salvaremos os IDs de menu porque é tudo o que precisamos para exibir um menu. E então produzimos HTML para um select que percorre os menus. A saída HTML da metabox é realmente com você, o exemplo abaixo é. Também incluí a funcionalidade nonce para segurança.

Na saída HTML estou imprimindo uma etiqueta. Se não houver nenhum menu salvo no WordPress, ele simplesmente exibirá um parágrafo. Caso contrário, uma seleção é gerada com IDs de menu como valores e nomes de menu como rótulo. Também estou adicionando uma opção vazia para permitir que as postagens não mostrem um menu. Estou usando a função auxiliar do WordPress [selected](https://developer.wordpress.org/reference/functions/selected/)()para marcar a opção salva atual como selecionada.

Se você editar uma postagem ou página, deverá ver a metabox aparecer na parte inferior, mostrando sua seleção. Incrível! No entanto, neste momento, ele não salvará sua escolha de menu quando você salvar a postagem. Esse é o próximo passo.

Salvando a escolha do menu

Usamos o gancho save_postpara criar uma função que salva qualquer escolha que adicionamos em nossa metabox. O save_postgancho é acionado toda vez que uma postagem está sendo salva ou atualizada. Verificaremos o nonce primeiro (se você não tiver certeza do que são nonces, consulte este guia do WordPress sobre nonces ). Em seguida, verificamos novamente se o usuário tem permissão para atualizar postagens e atualiza nossa meta de postagem com a opção.

add_action('save_post', function($post_id) {
    if (!isset($_POST['awp_sidebar_menu_nonce']) || !wp_verify_nonce($_POST['awp_sidebar_menu_nonce'], 'awp_sidebar_menu_metabox_nonce')) {
        return;
    }
 
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
 
    update_post_meta($post_id, 'awp_sidebar_menu', $_POST['awp-sidebar-menu']);
});

Agora, quando você atualizar as postagens, também salvará sua escolha de menu.

E é isso para a parte da escolha do post. O próximo passo é realmente a saída do menu se um menu foi selecionado.

Escolhendo uma posição para o menu personalizado

Estou adicionando a saída na barra lateral, mas você pode produzi-la em qualquer lugar nos modelos do seu tema. Nós só precisamos de um gancho predefinido ou definir o nosso próprio. Como exemplo, estou adicionando um gancho personalizado na parte superior da barra lateral, para que eu possa criar uma função vinculada a isso.

Você pode simplesmente chamar wp_nav_menu()diretamente no modelo, mas eu recomendo criar um gancho personalizado, porque adicionaremos um pouco de código e ele pode parecer confuso.

No meu tema eu edito sidebar.phpe logo antes dynamic_sidebar()com a barra lateral é chamada (onde os widgets são adicionados), eu adiciono meu gancho personalizado com do_action()e um nome dado. Você pode chamá-lo como quiser, mas deve ser exclusivo no WordPress. Então, pelo menos, prefixe-o com algo exclusivo para você.

Renderizando o cardápio

Agora podemos voltar para functions.php, definir uma função vinculada awp_before_sidebare sua saída será exibida na barra lateral antes dos widgets. A função usará tags condicionais do WordPress para verificar se estamos ou não exibindo um único post ou página. E se assim for, vou buscar o nosso post meta. Se a meta do post foi definida, geramos o menu chamando [wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)()e fornecendo o ID do menu salvo como menuparâmetro.

Você deve ajustar o HTML ao redor do menu para ajustá-lo ao restante do conteúdo. No código acima eu envolvo o menu no mesmo HTML que todos os widgets na barra lateral são encapsulados para que o estilo do widget do tema se aplique ao nosso menu personalizado.

É isso! Sempre que você escolher um menu em uma postagem ou página, o menu será exibido acima da barra lateral ao visualizar essa postagem ou página.

Mas podemos dar um passo adiante. Se você quiser que as páginas filhas mostrem o mesmo menu da barra lateral definido em qualquer um dos pais, continue lendo.

Permitir que as páginas filhas herdem o menu do pai

Esse recurso adicional faz sentido se você tiver muitas páginas em uma hierarquia ou um tipo de postagem personalizado com a hierarquia ativada. Seria muito complicado editar todas as páginas filhas e escolher o mesmo menu. Nesse caso, seria melhor escolher o menu na página pai e deixar automaticamente todas as subpáginas "herdarem" essa opção de menu. Se qualquer subpágina escolher outro menu, esse menu será exibido uma vez em vez do "herdado".

Dentro da nossa função ligada a awp_before_sidebar, adicionaremos um pedaço de código, dentro da verificação se estivermos visualizando um único post ou página:

O que o código acima faz se nenhum menu foi encontrado na página atual está buscando todos os pais com [get_post_ancestors](https://developer.wordpress.org/reference/functions/get_post_ancestors/)(). Esta função retorna uma matriz de IDs de postagem pai classificados primeiro pelo pai mais próximo. Se a página não tiver pais (por exemplo, se for uma postagem), uma matriz vazia será retornada. E se houver algum pai, percorremos cada pai um por um e verificamos se eles definiram nossa meta de postagem. Se um for encontrado, interrompemos a travessia dos pais e $sidebar_menuserá definido e o menu será exibido posteriormente com wp_nav_menu().

E é isso para a funcionalidade de “herança"!