{"id":233886,"date":"2023-02-23T09:46:00","date_gmt":"2023-02-23T06:46:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233886"},"modified":"2022-11-11T12:59:39","modified_gmt":"2022-11-11T09:59:39","slug":"tutorial-de-tema-wordpress-para-iniciantes-parte-9-menus-e-areas-de-widget","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-9-menus-e-areas-de-widget\/","title":{"rendered":"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 9: Menus e \u00c1reas de Widget"},"content":{"rendered":"\n

Esta li\u00e7\u00e3o aborda como adicionar dois recursos principais do WordPress ao nosso tema; menus e \u00e1reas de widgets. Aprendemos como registrar um local para o menu de navega\u00e7\u00e3o principal de um site e produzir o menu em nossos modelos, al\u00e9m de permitir a adi\u00e7\u00e3o de widgets em nossa barra lateral e \u00e1rea de rodap\u00e9.<\/p>\n

Voc\u00ea deve ter notado que nem "Menus" nem "Widgets" est\u00e3o acess\u00edveis no menu "Apar\u00eancia" no painel de administra\u00e7\u00e3o. Isso ocorre porque nosso tema ainda n\u00e3o suporta isso. Vamos corrigir isso nesta li\u00e7\u00e3o – come\u00e7ando com menus .<\/p>\n

Menus do WordPress<\/h2>\n

H\u00e1 duas partes na adi\u00e7\u00e3o de menus em seu tema. Primeiro voc\u00ea precisa definir um ou mais locais de menu em seu arquivo functions.php<\/code>. Um exemplo \u00e9 um menu principal que estar\u00e1 no cabe\u00e7alho de todas as p\u00e1ginas. A segunda parte \u00e9 adicionar algum c\u00f3digo no local em que voc\u00ea deseja que o menu seja gerado. Por exemplo, header.php<\/code>no local em que voc\u00ea deseja colocar o menu principal.<\/p>\n

Registrando um local de menu<\/h3>\n

Neste tutorial, adicionaremos um local de menu para a navega\u00e7\u00e3o principal do site e colocaremos sua sa\u00edda em nosso arquivo header.php<\/code>. Vamos come\u00e7ar registrando a localiza\u00e7\u00e3o em functions.php<\/code>, o que \u00e9 feito usando a fun\u00e7\u00e3o register_nav_menu<\/a> :<\/p>\n

add_action('init', 'wptutorial_register_menu');\nfunction wptutorial_register_menu() {\n    register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));\n}<\/code><\/pre>\n
Precisamos nos conectar ao gancho init<\/code>, que o WordPress decidiu ser um bom “ponto de verifica\u00e7\u00e3o" para registrar locais de menu. Dentro de nossa fun\u00e7\u00e3o chamamos register_nav_menu()<\/code>que aceita um m\u00ednimo de dois par\u00e2metros; o identificador do menu, que \u00e9 um slug exclusivo que voc\u00ea usar\u00e1 como identificador ao renderizar o menu, e o nome vis\u00edvel do menu que aparece no painel de administra\u00e7\u00e3o. Observe que eu envolvi o nome __()<\/code>para torn\u00e1-lo traduz\u00edvel, como aprendemos na etapa anterior<\/a>.<\/p>\n
\"Tutorial<\/a><\/p>\n
Se voc\u00ea atualizar seu painel de administra\u00e7\u00e3o, agora voc\u00ea deve ver um novo item de submenu em “Apar\u00eancia”; “Menus”. Parab\u00e9ns, seu tema agora suporta a cria\u00e7\u00e3o de menus!<\/p>\n
Se voc\u00ea n\u00e3o est\u00e1 familiarizado com a cria\u00e7\u00e3o e administra\u00e7\u00e3o de menus no WordPress, este \u00e9 um bom guia<\/a> para voc\u00ea.<\/p>\n
Crie um novo menu em “Apar\u00eancia > Menus” \u2013 ele pode conter o que voc\u00ea quiser, acabei de adicionar os posts fict\u00edcios que criei no meu WordPress.<\/p>\n
Depois de salvar seu primeiro menu, uma nova se\u00e7\u00e3o chamada "Configura\u00e7\u00f5es do menu" aparecer\u00e1 abaixo da \u00e1rea de edi\u00e7\u00e3o do menu, permitindo que voc\u00ea escolha um local para esse menu. Deve listar um local dispon\u00edvel, que \u00e9 o que fizemos; "Navega\u00e7\u00e3o Principal".<\/p>\n
\"Tutorial<\/a><\/p>\n
Marque a op\u00e7\u00e3o "Navega\u00e7\u00e3o principal" e clique em Salvar. Agora, seu menu rec\u00e9m-criado est\u00e1 conectado ao local e ser\u00e1 exibido automaticamente onde quer que voc\u00ea adicione o c\u00f3digo para gerar esse local de menu. Vamos fazer isso agora.<\/p>\n
Sa\u00edda de um local de menu em um modelo<\/h3>\n
Abra header.php<\/code>e onde voc\u00ea quiser que a sa\u00edda do menu esteja, adicione uma chamada para wp_nav_menu()<\/code>. Esta fun\u00e7\u00e3o aceita um monte de argumentos em uma matriz para realmente personalizar a sa\u00edda do menu. Mais importante, precisamos do par\u00e2metro que informa para buscar o local da “Navega\u00e7\u00e3o Principal”. Para fazer isso, adicionamos o argumento ‘ theme_location<\/code>‘ e o configuramos para o handle do nosso menu; ‘ main-nav<\/code>‘.<\/p>\n
Eu adicionei a sa\u00edda do menu logo ap\u00f3s o in\u00edcio da <body><\/code>tag, mas se voc\u00ea desenvolveu seus modelos com HTML, decida por si mesmo onde deseja que o menu apare\u00e7a.<\/p>\n
...\n<body <?php body_class(); ?>>\n    <nav class=\"main-nav\"><?php wp_nav_menu(['theme_location' => 'main-nav']); ?><\/nav><\/code><\/pre>\n
Atualize seu frontend e voc\u00ea dever\u00e1 ver o menu que voc\u00ea criou no admin como uma lista n\u00e3o ordenada no in\u00edcio do modelo.<\/p>\n
\"Tutorial<\/a><\/p>\n
Como de costume, encorajo voc\u00ea a se aprofundar um pouco mais nos par\u00e2metros da documenta\u00e7\u00e3o wp_nav_menu<\/code>do WordPress Codex<\/a> e brincar com a forma como deseja que a sa\u00edda seja. Por exemplo: voc\u00ea pode fazer com que n\u00e3o saia em uma lista HTML, voc\u00ea pode limitar os itens de menu a apenas certos n\u00edveis (para evitar submenus) e muito mais.<\/p>\n
Se voc\u00ea est\u00e1 curioso sobre a parte de estilo; d\u00ea uma olhada nas classes que o WordPress adiciona automaticamente a cada item de menu. Voc\u00ea poder\u00e1 adicionar facilmente estilos para o item de menu ativo, itens que possuem itens filhos, item pai de um item filho ativo, etc.<\/p>\n
Nota: Qualquer usu\u00e1rio de tema sempre pode criar v\u00e1rios 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 \u00e1reas de widgets! Vamos fazer isso a seguir.<\/p>\n
\u00c1reas de widgets<\/h2>\n
As \u00e1reas de widget funcionam de maneira bastante semelhante na forma como os menus funcionam. Voc\u00ea registra um local (para widgets, voc\u00ea define uma \u00e1rea onde o usu\u00e1rio do tema pode colocar widgets), e onde quer que o local\/\u00e1rea apare\u00e7a em seus modelos, voc\u00ea adiciona um pouco de c\u00f3digo que se refere ao ID do identificador fornecido em seu C\u00f3digo de Registo.<\/p>\n
Vamos definir uma \u00e1rea de widget em nossa barra lateral e outra no rodap\u00e9. \u00c9 comum que os temas forne\u00e7am v\u00e1rias \u00e1reas de widget no rodap\u00e9 para dividi-las bem em colunas, mas neste tutorial adicionaremos apenas uma ao rodap\u00e9.<\/p>\n
As \u00e1reas de widgets s\u00e3o chamadas de “barras laterais” no c\u00f3digo do WordPress, mas n\u00e3o \u00e9 exclusivamente para a barra lateral direita dos velhos tempos em sites. Parece que algum nome herdado ficou de uma \u00e9poca em que os sites geralmente tinham apenas uma \u00e1rea de widget na barra lateral. N\u00e3o pense que “barras laterais” s\u00f3 podem se referir a barras laterais reais.<\/p>\n
Registrar \u00e1reas de widgets<\/h3>\n
Come\u00e7amos registrando duas \u00e1reas de widgets em nosso arquivo functions.php<\/code>. Usamos a fun\u00e7\u00e3o register_sidebar<\/code>para registrar nossas sidebars, hooked on widgets_init<\/code>hook, que o WordPress definiu como o melhor hook para registrar \u00e1reas de widgets (e widgets personalizados).<\/p>\n
add_action('widgets_init', 'wptutorial_register_sidebar');\nfunction wptutorial_register_sidebar() {\n    register_sidebar([\n        'name' => __('Sidebar Widget Area', 'wptutorial'),\n        'id' => 'sidebar-area'\n    ]);\n    register_sidebar([\n        'name' => __('Footer Widget Area', 'wptutorial'),\n        'id' => 'footer-area'\n    ]);\n}<\/code><\/pre>\n
A register_sidebar()<\/code>fun\u00e7\u00e3o aceita v\u00e1rios argumentos, no m\u00ednimo voc\u00ea precisa do argumento ‘id’ e ‘name’. Existem par\u00e2metros dispon\u00edveis para definir como voc\u00ea deseja que os wrappers HTML do widget sejam gerados.<\/p>\n
Atualize seu painel de administra\u00e7\u00e3o e agora voc\u00ea deve ver o item de menu “Widgets” aparecer em “Apar\u00eancia”. No painel de administra\u00e7\u00e3o “Widgets” voc\u00ea pode ver duas \u00e1reas de widgets dispon\u00edveis na \u00e1rea direita; que \u00e9 a nossa “\u00c1rea de widget da barra lateral” e “\u00c1rea de widget de rodap\u00e9”.<\/p>\n
\"Tutorial<\/a><\/p>\n
Coloque um widget aleat\u00f3rio em nossa Barra Lateral ou \u00c1rea de Widget de Rodap\u00e9, apenas para que voc\u00ea possa v\u00ea-lo em a\u00e7\u00e3o.<\/p>\n
Sa\u00edda de uma \u00e1rea de widget em um modelo<\/h3>\n
A \u00faltima parte \u00e9 a sa\u00edda das \u00e1reas de widgets para nossos modelos. Para isso usamos a fun\u00e7\u00e3o dynamic_sidebar()<\/code>e fornecemos o handle como par\u00e2metro. Abra sidebar.php<\/code>e adicione o seguinte dentro das <aside><\/code>tags:<\/p>\n
<aside class=\"sidebar\">\n    <ul><?php dynamic_sidebar('sidebar-area'); ?><\/ul>\n<\/aside><\/code><\/pre>\n
Observe que eu o envolvi dentro de uma tag de lista n\u00e3o ordenada (<ul><\/code>). Isso ocorre porque, como sa\u00edda padr\u00e3o, dynamic_sidebar<\/code>todos os widgets agrupados em <li><\/code>itens. Eu encorajo voc\u00ea a brincar com os par\u00e2metros de sa\u00edda se voc\u00ea n\u00e3o gosta de widgets sendo uma lista.<\/p>\n
Quanto ao rodap\u00e9, n\u00f3s o adicionamos no in\u00edcio de footer.php<\/code>, envolto em uma <footer><\/code>tag (se desejar).<\/p>\n
    <footer>\n        <ul><?php dynamic_sidebar('footer-area'); ?><\/ul>\n    <\/footer>\n    <?php wp_footer(); ?>\n...<\/code><\/pre>\n
\u00c9 isso para menus e \u00e1reas de widgets. Seu tema agora tem a flexibilidade do usu\u00e1rio para criar um novo menu e usar um widget para exibi-lo na barra lateral ou no rodap\u00e9. Na pr\u00f3xima li\u00e7\u00e3o<\/a> desta s\u00e9rie de tutoriais vamos criar mais templates para o nosso tema.<\/p>\n
Documenta\u00e7\u00e3o sobre os m\u00e9todos usados<\/h2>\n