Esta lição aborda como adicionar dois recursos principais do WordPress ao nosso tema; menus e áreas de widgets. Aprendemos como registrar um local para o menu de navegação principal de um site e produzir o menu em nossos modelos, além de permitir a adição de widgets em nossa barra lateral e área de rodapé.
Você deve ter notado que nem "Menus" nem "Widgets" estão acessíveis no menu "Aparência" no painel de administração. Isso ocorre porque nosso tema ainda não suporta isso. Vamos corrigir isso nesta lição – começando com menus .
Menus do WordPress
Há duas partes na adição de menus em seu tema. Primeiro você precisa definir um ou mais locais de menu em seu arquivo functions.php. Um exemplo é um menu principal que estará no cabeçalho de todas as páginas. A segunda parte é adicionar algum código no local em que você deseja que o menu seja gerado. Por exemplo, header.phpno local em que você deseja colocar o menu principal.
Neste tutorial, adicionaremos um local de menu para a navegação principal do site e colocaremos sua saída em nosso arquivo header.php. Vamos começar registrando a localização em functions.php, o que é feito usando a função register_nav_menu :
add_action('init', 'wptutorial_register_menu');
function wptutorial_register_menu() {
register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));
}Precisamos nos conectar ao gancho init, que o WordPress decidiu ser um bom “ponto de verificação" para registrar locais de menu. Dentro de nossa função chamamos register_nav_menu()que aceita um mínimo de dois parâmetros; o identificador do menu, que é um slug exclusivo que você usará como identificador ao renderizar o menu, e o nome visível do menu que aparece no painel de administração. Observe que eu envolvi o nome __()para torná-lo traduzível, como aprendemos na etapa anterior.
Se você atualizar seu painel de administração, agora você deve ver um novo item de submenu em “Aparência”; “Menus”. Parabéns, seu tema agora suporta a criação de menus!
Se você não está familiarizado com a criação e administração de menus no WordPress, este é um bom guia para você.
Crie um novo menu em “Aparência > Menus” – ele pode conter o que você quiser, acabei de adicionar os posts fictícios que criei no meu WordPress.
Depois de salvar seu primeiro menu, uma nova seção chamada "Configurações do menu" aparecerá abaixo da área de edição do menu, permitindo que você escolha um local para esse menu. Deve listar um local disponível, que é o que fizemos; "Navegação Principal".
Marque a opção "Navegação principal" e clique em Salvar. Agora, seu menu recém-criado está conectado ao local e será exibido automaticamente onde quer que você adicione o código para gerar esse local de menu. Vamos fazer isso agora.
Abra header.phpe onde você quiser que a saída do menu esteja, adicione uma chamada para wp_nav_menu(). Esta função aceita um monte de argumentos em uma matriz para realmente personalizar a saída do menu. Mais importante, precisamos do parâmetro que informa para buscar o local da “Navegação Principal”. Para fazer isso, adicionamos o argumento ‘ theme_location‘ e o configuramos para o handle do nosso menu; ‘ main-nav‘.
Eu adicionei a saída do menu logo após o início da <body>tag, mas se você desenvolveu seus modelos com HTML, decida por si mesmo onde deseja que o menu apareça.
Atualize seu frontend e você deverá ver o menu que você criou no admin como uma lista não ordenada no início do modelo.
Como de costume, encorajo você a se aprofundar um pouco mais nos parâmetros da documentação wp_nav_menudo WordPress Codex e brincar com a forma como deseja que a saída seja. Por exemplo: você pode fazer com que não saia em uma lista HTML, você pode limitar os itens de menu a apenas certos níveis (para evitar submenus) e muito mais.
Se você está curioso sobre a parte de estilo; dê uma olhada nas classes que o WordPress adiciona automaticamente a cada item de menu. Você poderá adicionar facilmente estilos para o item de menu ativo, itens que possuem itens filhos, item pai de um item filho ativo, etc.
Nota: Qualquer usuário de tema sempre pode criar vários menus e optar por exibi-los fora dos locais registrados de um tema usando widgets. No entanto, para fazer isso, seu tema precisa definir algumas áreas de widgets! Vamos fazer isso a seguir.
Áreas de widgets
As áreas de widget funcionam de maneira bastante semelhante na forma como os menus funcionam. Você registra um local (para widgets, você define uma área onde o usuário do tema pode colocar widgets), e onde quer que o local/área apareça em seus modelos, você adiciona um pouco de código que se refere ao ID do identificador fornecido em seu Código de Registo.
Vamos definir uma área de widget em nossa barra lateral e outra no rodapé. É comum que os temas forneçam várias áreas de widget no rodapé para dividi-las bem em colunas, mas neste tutorial adicionaremos apenas uma ao rodapé.
As áreas de widgets são chamadas de “barras laterais” no código do WordPress, mas não é exclusivamente para a barra lateral direita dos velhos tempos em sites. Parece que algum nome herdado ficou de uma época em que os sites geralmente tinham apenas uma área de widget na barra lateral. Não pense que “barras laterais” só podem se referir a barras laterais reais.
Registrar áreas de widgets
Começamos registrando duas áreas de widgets em nosso arquivo functions.php. Usamos a função register_sidebarpara registrar nossas sidebars, hooked on widgets_inithook, que o WordPress definiu como o melhor hook para registrar áreas de widgets (e widgets personalizados).
A register_sidebar()função aceita vários argumentos, no mínimo você precisa do argumento ‘id’ e ‘name’. Existem parâmetros disponíveis para definir como você deseja que os wrappers HTML do widget sejam gerados.
Atualize seu painel de administração e agora você deve ver o item de menu “Widgets” aparecer em “Aparência”. No painel de administração “Widgets” você pode ver duas áreas de widgets disponíveis na área direita; que é a nossa “Área de widget da barra lateral” e “Área de widget de rodapé”.
Coloque um widget aleatório em nossa Barra Lateral ou Área de Widget de Rodapé, apenas para que você possa vê-lo em ação.
Saída de uma área de widget em um modelo
A última parte é a saída das áreas de widgets para nossos modelos. Para isso usamos a função dynamic_sidebar()e fornecemos o handle como parâmetro. Abra sidebar.phpe adicione o seguinte dentro das <aside>tags:
Observe que eu o envolvi dentro de uma tag de lista não ordenada (<ul>). Isso ocorre porque, como saída padrão, dynamic_sidebartodos os widgets agrupados em <li>itens. Eu encorajo você a brincar com os parâmetros de saída se você não gosta de widgets sendo uma lista.
Quanto ao rodapé, nós o adicionamos no início de footer.php, envolto em uma <footer>tag (se desejar).
É isso para menus e áreas de widgets. Seu tema agora tem a flexibilidade do usuário para criar um novo menu e usar um widget para exibi-lo na barra lateral ou no rodapé. Na próxima lição desta série de tutoriais vamos criar mais templates para o nosso tema.