- \n
- Marca:<\/strong> Isso pode incluir o nome do site e, frequentemente, uma logomarca. O uso de cores, imagens ou v\u00eddeos no cabe\u00e7alho pode refor\u00e7ar essa marca.<\/li>\n
- Navega\u00e7\u00e3o principal:<\/strong> Se o seu site tiver mais de uma p\u00e1gina, os visitantes provavelmente procurar\u00e3o um menu de navega\u00e7\u00e3o do site pr\u00f3ximo \u00e0 parte superior de cada p\u00e1gina.<\/li>\n
- Navega\u00e7\u00e3o secund\u00e1ria: <\/strong>A navega\u00e7\u00e3o secund\u00e1ria pode ser qualquer link independente da localiza\u00e7\u00e3o atual do usu\u00e1rio na hierarquia do menu principal. Pense em um bot\u00e3o de “login” e em \u00edcones com links para contas de redes sociais ou um carrinho de compras.<\/li>\n
- Pesquisa:<\/strong> Se o seu site for compat\u00edvel com pesquisa, n\u00e3o \u00e9 obrigat\u00f3rio<\/em> que a caixa de entrada de pesquisa esteja no cabe\u00e7alho, mas os visitantes certamente n\u00e3o a procurar\u00e3o no rodap\u00e9.<\/li>\n<\/ul>\n
O CMS<\/a> do WordPress pode gerar dinamicamente componentes como cabe\u00e7alhos ao combinar a marca\u00e7\u00e3o em templates de temas com conte\u00fado encontrado em um banco de dados \u2014 como links para uma logo e entradas de menu \u2014 e injet\u00e1-los em todas as p\u00e1ginas.<\/p>\n
O ecossistema de temas de WordPress oferece uma rica sele\u00e7\u00e3o de designs para praticamente qualquer site. Com dezenas de milhares de temas para voc\u00ea escolher em v\u00e1rios mercados, selecionar o melhor para sua finalidade pode ser assustador.<\/p>\n
Por\u00e9m, quando voc\u00ea finalmente selecionar e instalar um tema<\/a>, dever\u00e1 customizar pelo menos alguns componentes, como o cabe\u00e7alho, para imprimir sua marca no site e torn\u00e1-lo seu.<\/p>\n
Vamos dar uma olhada em como fazer isso.
\n<\/div><\/kinsta-auto-toc><\/p>\n Bloco x cl\u00e1ssico: Uma hist\u00f3ria de dois temas<\/h2>\n
Como voc\u00ea personaliza o cabe\u00e7alho do seu site WordPress \u00e9 determinado pela forma como o tema foi criado (e, \u00e0s vezes, pela quantidade de personaliza\u00e7\u00e3o que voc\u00ea deseja fazer). H\u00e1 tr\u00eas maneiras de modificar o cabe\u00e7alho de um site nativo do WordPress:<\/p>\n
- \n
- Usando o Editor de Sites<\/strong>: O WordPress 5.0<\/a> introduziu um editor de blocos para o conte\u00fado do site conhecido como Gutenberg<\/a>. Com o lan\u00e7amento do WordPress 5.9<\/a>, o conceito de bloco foi estendido para temas e se tornou uma op\u00e7\u00e3o robusta para a edi\u00e7\u00e3o completa do site<\/a>. O Editor de Sites e a capacidade de criar as v\u00e1rias partes de um tema de site com componentes baseados em HTML trouxeram uma flexibilidade sem precedentes para a personaliza\u00e7\u00e3o nativa do WordPress.<\/li>\n
- Usando o Personalizador do WordPress<\/strong>: N\u00e3o estamos tentando fazer voc\u00ea se sentir velho, mas os temas que podem ser ajustados somente com o uso do ent\u00e3o inovador Personalizador e dos widgets associados s\u00e3o chamados de temas “cl\u00e1ssicos”. Apesar do nome que soa retr\u00f4, novos temas de estilo cl\u00e1ssico continuam sendo lan\u00e7ados, somando-se aos milhares j\u00e1 existentes no mercado. Em compara\u00e7\u00e3o com os temas do Editor de Sites e de Blocos, os temas do Personalizador e Cl\u00e1ssico oferecem menos op\u00e7\u00f5es de personaliza\u00e7\u00e3o do cabe\u00e7alho.<\/li>\n
- Edi\u00e7\u00e3o direta dos arquivos do tema<\/strong>: Voc\u00ea (ou algu\u00e9m a quem voc\u00ea pe\u00e7a ajuda) precisar\u00e1 de algum conhecimento b\u00e1sico de PHP para editar o c\u00f3digo dentro dos arquivos de temas cl\u00e1ssicos do WordPress, mas essa \u00e9 uma solu\u00e7\u00e3o quando o Personalizador n\u00e3o consegue fornecer o que voc\u00ea precisa para o cabe\u00e7alho do seu site.<\/li>\n<\/ul>\n
O que n\u00e3o estamos abordando aqui \u00e9 a personaliza\u00e7\u00e3o do cabe\u00e7alho em criadores de p\u00e1ginas WordPress<\/a> de terceiros, como o Divi<\/a>, ou os tantos plugins projetados especificamente para lidar com cabe\u00e7alhos (e rodap\u00e9s<\/a>) de sites. Pode valer a pena explorar esses plugins se a sua \u00fanica op\u00e7\u00e3o exigir a edi\u00e7\u00e3o direta dos arquivos do tema e voc\u00ea quiser evitar a programa\u00e7\u00e3o PHP.<\/p>\n
Como editar o cabe\u00e7alho de um tema de bloco<\/h2>\n
Se voc\u00ea j\u00e1 usou o Gutenberg para criar conte\u00fado, sabe que o WordPress vem com uma grande cole\u00e7\u00e3o de blocos que voc\u00ea pode colocar nas p\u00e1ginas para compor qualquer coisa, desde t\u00edtulos, par\u00e1grafos e listas, at\u00e9 m\u00eddia, navega\u00e7\u00e3o e formul\u00e1rios. H\u00e1 uma classe de blocos que executam tarefas como widgets em temas cl\u00e1ssicos, incluindo a gera\u00e7\u00e3o de links para os \u00faltimos artigos e coment\u00e1rios, a exibi\u00e7\u00e3o de uma nuvem de tags ou a inser\u00e7\u00e3o de um calend\u00e1rio.<\/p>\n
V\u00e1rios blocos podem ser combinados, estilizados e salvos como padr\u00f5es. Voc\u00ea tamb\u00e9m pode adicionar esses componentes \u00e0s partes de um tema de WordPress que ajudam a definir um layout de p\u00e1gina, inclusive cabe\u00e7alhos.<\/p>\n
Assim como os blocos individuais, as partes do template podem ser definidas em arquivos HTML<\/a>. Os temas de blocos s\u00e3o f\u00e1ceis de personalizar porque as informa\u00e7\u00f5es que descrevem essas modifica\u00e7\u00f5es s\u00e3o salvas no banco de dados do WordPress e aplicadas aos v\u00e1rios componentes quando uma p\u00e1gina \u00e9 gerada.<\/p>\n
Portanto, quando falamos em “editar” um cabe\u00e7alho em um tema de bloco, raramente estamos falando em editar um arquivo armazenado em um diret\u00f3rio de temas de WordPress.<\/p>\n
Sob o cap\u00f4: Um cabe\u00e7alho de tema de bloco<\/h3>\n
Inspecionar o HTML por tr\u00e1s de uma parte do template, como um cabe\u00e7alho, ajuda a explicar o que est\u00e1 acontecendo quando voc\u00ea personaliza um tema.<\/p>\n
Estamos usando o tema Seedlet para este tutorial porque ele est\u00e1 dispon\u00edvel como Seedlet (Blocks)<\/a> e o antigo Seedlet (Classic)<\/a>. O Seedlet (Blocks) usa o tema Blockbase<\/a> como principal, e este \u00e9 o conte\u00fado completo do arquivo
header.html<\/code> nos diret\u00f3rios do tema Seedlet:<\/p>\n<!-- wp:pattern {\"slug\":\"blockbase\/header-centered\"} \/-->\n<!-- wp:spacer {\"height\":60} -->\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer --><\/code><\/pre>\nA maior parte da m\u00e1gica por tr\u00e1s dos blocos do WordPress acontece nos coment\u00e1rios HTML. Os coment\u00e1rios podem passar informa\u00e7\u00f5es de estilo e outras diretrizes durante a cria\u00e7\u00e3o da p\u00e1gina. O HTML acima acrescenta um pouco de espa\u00e7amento vertical ao nosso cabe\u00e7alho padr\u00e3o, mas a a\u00e7\u00e3o principal \u00e9 a solicita\u00e7\u00e3o para incluir um padr\u00e3o no tema Blockbase que (depois que
.html<\/code> \u00e9 anexado) \u00e9 encontrado no arquivoheader-centered.html<\/code>.<\/p>\nO diret\u00f3rio de partes do template no tema Blockbase inclui estes arquivos relacionados a um cabe\u00e7alho:<\/p>\n
header-centered.html\nheader-default.html\nheader-linear.html\nheader-minimal.html\nheader-rounded-logo.html\nheader-wide.html<\/code><\/pre>\nPor exemplo, o arquivo
header-rounded-logo.html<\/code> inclui um coment\u00e1rio HTML que adiciona uma classe CSS para o recorte circular da imagem da logo. Se desejarmos usar essa abordagem, poderemos<\/em>\u00a0editar nosso arquivo Seedletheader.html<\/code> para incluirheader-rounded-logo.html<\/code> em vez deheader-centered.html<\/code>. Mas n\u00e3o \u00e9 necess\u00e1rio fazer isso, porque podemos aplicar essa parte do template no Editor de Sites do WordPress e deixar os arquivos de tema no disco r\u00edgido intactos.<\/p>\nUsando o Editor de Sites para personalizar um cabe\u00e7alho<\/h3>\n
Com um tema de bloco ativo em nosso site, podemos acessar o Editor de Sites no painel do WordPress<\/a>, selecionando Apar\u00eancia<\/strong>\u00a0> Editor<\/strong>:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-site-editor.png\")
Acessando o Editor de Sites no painel do WordPress.<\/figcaption><\/figure>\n A visualiza\u00e7\u00e3o inicial no Editor de Sites \u00e9 um layout de p\u00e1gina inteira que incluir\u00e1 o cabe\u00e7alho, o rodap\u00e9 e quaisquer outras partes de template j\u00e1 adicionadas pelo desenvolvedor do tema. Voc\u00ea pode clicar na \u00e1rea do cabe\u00e7alho para come\u00e7ar a editar imediatamente.<\/p>\n
Abaixo, nosso cabe\u00e7alho inclui um espa\u00e7o reservado para uma logo e j\u00e1 exibe o nome do site e a navega\u00e7\u00e3o principal (que agora consiste apenas em “Sobre n\u00f3s” (About us) e “P\u00e1gina de Amostra” (Sample Page). Se adicionarmos um slogan \u00e0s informa\u00e7\u00f5es b\u00e1sicas do nosso site, ele tamb\u00e9m aparecer\u00e1 aqui.<\/p>\n
Esses elementos de identidade do site j\u00e1 aparecem em nosso cabe\u00e7alho porque a parte do template
header-centered.html<\/code> mencionada acima inclui estes coment\u00e1rios:<\/p>\n<!-- wp:site-logo {\"align\":\"center\",\"width\":128} \/-->\n<!-- wp:site-title {\"textAlign\":\"center\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"30px\",\"bottom\":\"20px\"}}}} \/-->\n<!-- wp:site-tagline {\"textAlign\":\"center\",\"fontSize\":\"small\"} \/--><\/code><\/pre>\nA navega\u00e7\u00e3o principal \u00e9 gerada por este coment\u00e1rio:<\/p>\n
<!-- wp:navigation {\"layout\":{\"type\":\"flex\",\"setCascadingProperties\":true,\"justifyContent\":\"center\",\"orientation\":\"horizontal\"}} \/--><\/code><\/pre>\nVamos adicionar nossa logo:<\/p>\n
- \n
- Selecione o espa\u00e7o reservado para a logo.<\/li>\n
- Clique no bot\u00e3o Adicionar m\u00eddia<\/strong>.<\/li>\n
- Escolha sua logo na Biblioteca de M\u00eddia do WordPress ou carregue-a do disco.<\/li>\n<\/ol>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-add-logo.png\")
Adicionando uma logo a uma parte do template de cabe\u00e7alho.<\/figcaption><\/figure>\n Personalizar o cabe\u00e7alho de um site adicionando uma logo \u00e9 uma tarefa t\u00e3o comum que at\u00e9 mesmo os temas mais cl\u00e1ssicos de WordPress simplificam o trabalho no Personalizador. Portanto, vamos adicionar um bloco que ainda n\u00e3o est\u00e1 previsto no template: um menu secund\u00e1rio pr\u00f3ximo \u00e0 parte superior da p\u00e1gina com a entrada: Shop<\/strong>.<\/p>\n
Primeiro, alternamos a exibi\u00e7\u00e3o do Inseridor de Blocos\u00a0clicando no \u00edcone de altern\u00e2ncia pr\u00f3ximo ao canto superior esquerdo do Editor de Site:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-toggle-inserter.png\")
Ativando o Inseridor de Blocos.<\/figcaption><\/figure>\n Com o Inseridor de Blocos ativo:<\/p>\n
- \n
- Localize o bloco de navega\u00e7\u00e3o (voc\u00ea pode pesquisar por ele).<\/li>\n
- Arraste o bloco at\u00e9 a margem superior do cabe\u00e7alho.<\/li>\n<\/ol>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-add-navigation.png\")
Arrastando um bloco de navega\u00e7\u00e3o para a \u00e1rea do cabe\u00e7alho.<\/figcaption><\/figure>\n Agora, editamos o bloco de navega\u00e7\u00e3o criando um link personalizado (separado da navega\u00e7\u00e3o principal) que exibe o texto Shop<\/strong> e tem a URL do nosso subdom\u00ednio de eCommerce:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-toggle-edit-link.png\")
Criando um link de p\u00e1gina para o nosso novo bloco de navega\u00e7\u00e3o.<\/figcaption><\/figure>\n Por padr\u00e3o, tudo nessa parte do template de cabe\u00e7alho \u00e9 centralizado na p\u00e1gina. Queremos que o link Shop<\/strong> flutue \u00e0 direita. Para fazer isso, siga os passos:<\/p>\n
- \n
- Clique no novo bloco de navega\u00e7\u00e3o.<\/li>\n
- Clique no \u00edcone Alterar justifica\u00e7\u00e3o de itens<\/strong> na barra de ferramentas.<\/li>\n
- Selecione Justificar itens \u00e0 direita.<\/strong><\/li>\n<\/ol>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-navigation-justify.png\")
Alterando o posicionamento horizontal do bloco no cabe\u00e7alho.<\/figcaption><\/figure>\n Aqui est\u00e1 o cabe\u00e7alho conclu\u00eddo:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-secondary-navigation-after.png\")
Cabe\u00e7alho do tema de bloco com um menu secund\u00e1rio que cont\u00e9m o link Shop<\/strong>.<\/figcaption><\/figure>\n Como modificar o cabe\u00e7alho de um tema cl\u00e1ssico com o Personalizador<\/h2>\n
Quando a primeira vers\u00e3o do Personalizador de temas foi lan\u00e7ada em 2012, juntamente com o WordPress 3.4<\/a>, representou um avan\u00e7o significativo para ajudar os administradores a modificar a apar\u00eancia de seus sites sem codifica\u00e7\u00e3o.<\/p>\n
O Personalizador foi aprimorado significativamente desde ent\u00e3o, mas uma coisa permanece verdadeira: o desenvolvedor de um tema determina o que pode e o que n\u00e3o pode ser personalizado usando a ferramenta. Isso contrasta com a liberdade de comando que os propriet\u00e1rios de sites t\u00eam com o Editor de Sites baseado em blocos.<\/p>\n
Usando o Personalizador de temas de WordPress<\/h3>\n
Quando um tema cl\u00e1ssico compat\u00edvel com o Personalizador estiver ativo em um site, acesse-o no painel do WordPress selecionando A<\/strong>par\u00eancia<\/strong> > Personalizar<\/strong>.<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-customizer-menu.png\")
Acessando o Personalizador de temas no painel do WordPress.<\/figcaption><\/figure>\n No menu principal do Personalizador, selecionamos Identidade do Site <\/strong>para acessar os componentes personaliz\u00e1veis no cabe\u00e7alho:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-customize-menu.png\")
Selecionando a op\u00e7\u00e3o Identidade do Site no Personalizador do tema cl\u00e1ssico.<\/figcaption><\/figure>\n Na se\u00e7\u00e3o Identidade do Site<\/strong> desse tema, podemos adicionar ou alterar uma logo e editar o t\u00edtulo do site e qualquer slogan. (O t\u00edtulo do site e o slogan s\u00e3o inicialmente preenchidos por entradas na p\u00e1gina Configura\u00e7\u00f5es Gerais<\/strong> do painel.)<\/p>\n
Esse tema tamb\u00e9m coloca a navega\u00e7\u00e3o principal do site no cabe\u00e7alho. H\u00e1 tamb\u00e9m um local para navega\u00e7\u00e3o no rodap\u00e9 e para um menu de links de redes sociais. O Personalizador permite que voc\u00ea escolha qual menu (se houver) deseja atribuir a cada um desses locais, mas os locais em si s\u00e3o essencialmente fixos.<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-select-logo.png\")
Adi\u00e7\u00e3o de uma logo no Personalizador para temas cl\u00e1ssicos de WordPress.<\/figcaption><\/figure>\n Ap\u00f3s clicar no bot\u00e3o Selecionar Logo<\/strong> destacado acima, voc\u00ea pode escolher uma logo na Biblioteca de M\u00eddia do WordPress ou carregar uma nova a partir do disco.<\/p>\n
Abaixo, com a logo no lugar, o Personalizador permite que voc\u00ea remova a imagem ou a substitua por uma diferente:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-add-logo.png\")
A logo adicionada ao cabe\u00e7alho usando o Personalizador do WordPress.<\/figcaption><\/figure>\n Sob o cap\u00f4: O que o Personalizador pode personalizar?<\/h3>\n
Ent\u00e3o, como o Personalizador determina se podemos carregar uma logo e onde deve ser colocada quando o fizermos?<\/p>\n
Tudo come\u00e7a com esta entrada no script
functions.php<\/code> do tema:<\/p>\n\/**\n* Add support for core custom logo.\n*\n* @link https:\/\/codex.wordpress.org\/Theme_Logo\n*\/\nadd_theme_support(\n 'custom-logo',\n array(\n 'height' => 240,\n 'width' => 240,\n 'flex-width' => false,\n 'flex-height' => false,\n )\n);<\/code><\/pre>\nEsse bloco de c\u00f3digo ativa o bot\u00e3o Selecionar Logo<\/strong> na aba Identidade do Site<\/strong> do Personalizador, juntamente com seu link para as fun\u00e7\u00f5es da Biblioteca de M\u00eddia.<\/p>\n
Em seguida, no c\u00f3digo PHP usado para criar o cabe\u00e7alho do site, este pequeno snippet de c\u00f3digo \u00e9 adicionado no local em que a logo deve aparecer:<\/p>\n
<div class=\"site-logo\"><?php the_custom_logo(); ?><\/div><\/code><\/pre>\nO resultado:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/secondary-menu-edit-header-before.png\")
O cabe\u00e7alho do site ap\u00f3s atualizar a logo no Personalizador de temas.<\/figcaption><\/figure>\n Alterar um cabe\u00e7alho do WordPress editando arquivos de tema<\/h2>\n
Acima, quando personalizamos o cabe\u00e7alho em um tema de bloco usando o Editor de Sites, adicionamos um menu secund\u00e1rio com um link Shop<\/strong>. Tivemos a liberdade de colocar esse bloco de navega\u00e7\u00e3o em qualquer lugar que quis\u00e9ssemos em nosso cabe\u00e7alho. Nossa vers\u00e3o cl\u00e1ssica do tema n\u00e3o tem um local reservado para esse menu, ent\u00e3o precisaremos editar o c\u00f3digo PHP relacionado ao cabe\u00e7alho para fazer a altera\u00e7\u00e3o.<\/p>\n
Poder\u00edamos simplesmente abrir o arquivo de tema apropriado e adicionar manualmente o HTML para o nosso menu secund\u00e1rio, mas isso seria falta de vis\u00e3o. Posteriormente, talvez queiramos atualizar o texto do nosso link de compras (Shop Now?), alterar a URL<\/a> ou adicionar outro item a esse menu (Login?).<\/p>\n
Queremos adicionar uma nova navega\u00e7\u00e3o ao cabe\u00e7alho que esteja registrada no Personalizador, permitindo que o conte\u00fado do menu secund\u00e1rio seja alterado no editor de menus do WordPress sem a necessidade de retornar ao c\u00f3digo do tema.<\/p>\n
Antes de come\u00e7ar: Backup<\/h3>\n
Explorar o c\u00f3digo PHP do seu tema cl\u00e1ssico de WordPress para personalizar o cabe\u00e7alho do site geralmente \u00e9 retratado como editar o arquivo
header.php<\/code>. Esse \u00e9 o caso em muitos temas, mas outros podem combinar v\u00e1rios arquivos para criar um \u00fanico cabe\u00e7alho.<\/p>\nAntes de fazer altera\u00e7\u00f5es nos arquivos do tema, fa\u00e7a backups. Veja aqui como fazer backups<\/a> e como restaur\u00e1-los<\/a>.<\/p>\n
Mesmo com backups, voc\u00ea pode ter problemas quando uma atualiza\u00e7\u00e3o de um tema de terceiros substituir suas altera\u00e7\u00f5es. Suas modifica\u00e7\u00f5es podem desaparecer do site at\u00e9 que voc\u00ea possa restaurar os arquivos de tema alterados a partir de um backup. \u00c9 por isso que recomendamos que voc\u00ea crie um tema\u00a0filho (child theme)<\/a>\u00a0apenas para os arquivos alterados e teste as atualiza\u00e7\u00f5es em um site WordPress preparado<\/a>.<\/p>\n
Editando um cabe\u00e7alho de WordPress em um tema cl\u00e1ssico<\/h3>\n
Nosso tema cl\u00e1ssico de amostra tem um local reservado no cabe\u00e7alho para a navega\u00e7\u00e3o principal. No Personalizador, podemos selecionar o menu do WordPress que queremos atribuir a esse local. Em nosso caso, esse menu tem o nome pr\u00e1tico de “Menu principal”.<\/p>\n
Tamb\u00e9m h\u00e1 locais no tema para navega\u00e7\u00e3o no rodap\u00e9 e nos links sociais, mas voc\u00ea pode ver abaixo que eles n\u00e3o est\u00e3o ativados no momento:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-theme-primary-menu-create.png\")
Editando menus no Personalizador de um tema cl\u00e1ssico.<\/figcaption><\/figure>\n Se dermos uma olhada no script
functions.php<\/code> do tema, veremos onde esses locais de menu s\u00e3o referenciados pela primeira vez:<\/p>\n\/\/ This theme uses wp_nav_menu() \nregister_nav_menus(\n array(\n 'primary' => __( 'Primary Navigation', 'seedlet' ),\n 'footer' => __( 'Footer Navigation', 'seedlet' ),\n 'social' => __( 'Social Links Navigation', 'seedlet' ),\n )\n);<\/code><\/pre>\nAbaixo, adicionamos a esse bloco para registrar uma entrada para o nosso novo menu “Navega\u00e7\u00e3o Secund\u00e1ria” (Secondary Navigation):<\/p>\n
\/\/ This theme uses wp_nav_menu() \nregister_nav_menus(\n array(\n 'primary' => __( 'Primary Navigation', 'seedlet' ),\n 'secondary' => __( 'Secondary Navigation', 'seedlet' ),\n 'footer' => __( 'Footer Navigation', 'seedlet' ),\n 'social' => __( 'Social Links Navigation', 'seedlet' ),\n )\n);<\/code><\/pre>\nQuando voltamos ao Personalizador, a nova op\u00e7\u00e3o Navega\u00e7\u00e3o Secund\u00e1ria <\/strong>aparece na \u00e1rea Posi\u00e7\u00f5es dos menus<\/strong>:<\/p>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-secondary-menu.png\")
Op\u00e7\u00e3o de navega\u00e7\u00e3o secund\u00e1ria registrada no Personalizador do tema.<\/figcaption><\/figure>\n Podemos dar um nome ao nosso menu (Menu Secund\u00e1rio<\/strong>) e come\u00e7ar a adicionar links a ele. Como fizemos com o Editor de Sites no tema baseado em blocos, criaremos uma entrada para Shop<\/strong>.<\/p>\n
De volta ao arquivo de tema para o cabe\u00e7alho, adicionamos um c\u00f3digo que confirma que o menu de navega\u00e7\u00e3o secund\u00e1rio existe e que ele tem pelo menos uma entrada na lista de links. Em seguida, analisamos o conte\u00fado do menu e o exibimos:<\/p>\n
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>\n<div id=\"secondary-navigation\" class=\"secondary-navigation\" role=\"navigation\">\n<?php\n\/\/ Get menu slug\n$location_name = 'secondary;\n$locations = get_nav_menu_locations();\n$menu_id = $locations[ $location_name ];\n$menu_obj = wp_get_nav_menu_object( $menu_id );\nwp_nav_menu(\n array(\n 'theme_location' => 'secondary',\n 'menu_class' => 'menu-wrapper',\n 'container_class' => 'secondary-menu-container',\n 'items_wrap' => '<ul id=\"%1$s\" class=\"%2$s\">%3$s<\/ul>',\n )\n);\n?>\n<\/div><!-- #secondary-navigation -->\n<?php endif; ?> \n<div class=\"menu-button-container\">\n<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>\n <button id=\"secondary-open-menu\" class=\"button open\">\n <span class=\"dropdown-icon open\"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?><\/span>\n <span class=\"hide-visually expanded-text\"><?php _e( 'expanded', 'seedlet' ); ?><\/span>\n <\/button>\n<?php endif; ?>\n<\/div><\/code><\/pre>\n - Selecione Justificar itens \u00e0 direita.<\/strong><\/li>\n<\/ol>\n
- Escolha sua logo na Biblioteca de M\u00eddia do WordPress ou carregue-a do disco.<\/li>\n<\/ol>\n
- Usando o Personalizador do WordPress<\/strong>: N\u00e3o estamos tentando fazer voc\u00ea se sentir velho, mas os temas que podem ser ajustados somente com o uso do ent\u00e3o inovador Personalizador e dos widgets associados s\u00e3o chamados de temas “cl\u00e1ssicos”. Apesar do nome que soa retr\u00f4, novos temas de estilo cl\u00e1ssico continuam sendo lan\u00e7ados, somando-se aos milhares j\u00e1 existentes no mercado. Em compara\u00e7\u00e3o com os temas do Editor de Sites e de Blocos, os temas do Personalizador e Cl\u00e1ssico oferecem menos op\u00e7\u00f5es de personaliza\u00e7\u00e3o do cabe\u00e7alho.<\/li>\n
- Navega\u00e7\u00e3o principal:<\/strong> Se o seu site tiver mais de uma p\u00e1gina, os visitantes provavelmente procurar\u00e3o um menu de navega\u00e7\u00e3o do site pr\u00f3ximo \u00e0 parte superior de cada p\u00e1gina.<\/li>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/secondary-menu-edit-header-after.png\")