Dizem que é importante causar uma boa primeira impressão. Quando os visitantes chegam ao seu site, as primeiras impressões começam no topo, no cabeçalho da página.
Os desenvolvedores de temas de WordPress não são obrigados a incluir um template de cabeçalho, mas é raro que um site não tenha um. Desde o início da web, “cabeçalho” tem sido o termo usado para um bloco de HTML que encapsula elementos essenciais que os visitantes esperam encontrar na parte superior das páginas. Isso geralmente inclui:
- Marca: Isso pode incluir o nome do site e, frequentemente, uma logomarca. O uso de cores, imagens ou vídeos no cabeçalho pode reforçar essa marca.
- Navegação principal: Se o seu site tiver mais de uma página, os visitantes provavelmente procurarão um menu de navegação do site próximo à parte superior de cada página.
- Navegação secundária: A navegação secundária pode ser qualquer link independente da localização atual do usuário na hierarquia do menu principal. Pense em um botão de “login” e em ícones com links para contas de redes sociais ou um carrinho de compras.
- Pesquisa: Se o seu site for compatível com pesquisa, não é obrigatório que a caixa de entrada de pesquisa esteja no cabeçalho, mas os visitantes certamente não a procurarão no rodapé.
O CMS do WordPress pode gerar dinamicamente componentes como cabeçalhos ao combinar a marcação em templates de temas com conteúdo encontrado em um banco de dados — como links para uma logo e entradas de menu — e injetá-los em todas as páginas.
O ecossistema de temas de WordPress oferece uma rica seleção de designs para praticamente qualquer site. Com dezenas de milhares de temas para você escolher em vários mercados, selecionar o melhor para sua finalidade pode ser assustador.
Porém, quando você finalmente selecionar e instalar um tema, deverá customizar pelo menos alguns componentes, como o cabeçalho, para imprimir sua marca no site e torná-lo seu.
Vamos dar uma olhada em como fazer isso.
Bloco x clássico: Uma história de dois temas
Como você personaliza o cabeçalho do seu site WordPress é determinado pela forma como o tema foi criado (e, às vezes, pela quantidade de personalização que você deseja fazer). Há três maneiras de modificar o cabeçalho de um site nativo do WordPress:
- Usando o Editor de Sites: O WordPress 5.0 introduziu um editor de blocos para o conteúdo do site conhecido como Gutenberg. Com o lançamento do WordPress 5.9, o conceito de bloco foi estendido para temas e se tornou uma opção robusta para a edição completa do site. O Editor de Sites e a capacidade de criar as várias partes de um tema de site com componentes baseados em HTML trouxeram uma flexibilidade sem precedentes para a personalização nativa do WordPress.
- Usando o Personalizador do WordPress: Não estamos tentando fazer você se sentir velho, mas os temas que podem ser ajustados somente com o uso do então inovador Personalizador e dos widgets associados são chamados de temas “clássicos”. Apesar do nome que soa retrô, novos temas de estilo clássico continuam sendo lançados, somando-se aos milhares já existentes no mercado. Em comparação com os temas do Editor de Sites e de Blocos, os temas do Personalizador e Clássico oferecem menos opções de personalização do cabeçalho.
- Edição direta dos arquivos do tema: Você (ou alguém a quem você peça ajuda) precisará de algum conhecimento básico de PHP para editar o código dentro dos arquivos de temas clássicos do WordPress, mas essa é uma solução quando o Personalizador não consegue fornecer o que você precisa para o cabeçalho do seu site.
O que não estamos abordando aqui é a personalização do cabeçalho em criadores de páginas WordPress de terceiros, como o Divi, ou os tantos plugins projetados especificamente para lidar com cabeçalhos (e rodapés) de sites. Pode valer a pena explorar esses plugins se a sua única opção exigir a edição direta dos arquivos do tema e você quiser evitar a programação PHP.
Como editar o cabeçalho de um tema de bloco
Se você já usou o Gutenberg para criar conteúdo, sabe que o WordPress vem com uma grande coleção de blocos que você pode colocar nas páginas para compor qualquer coisa, desde títulos, parágrafos e listas, até mídia, navegação e formulários. Há uma classe de blocos que executam tarefas como widgets em temas clássicos, incluindo a geração de links para os últimos artigos e comentários, a exibição de uma nuvem de tags ou a inserção de um calendário.
Vários blocos podem ser combinados, estilizados e salvos como padrões. Você também pode adicionar esses componentes às partes de um tema de WordPress que ajudam a definir um layout de página, inclusive cabeçalhos.
Assim como os blocos individuais, as partes do template podem ser definidas em arquivos HTML. Os temas de blocos são fáceis de personalizar porque as informações que descrevem essas modificações são salvas no banco de dados do WordPress e aplicadas aos vários componentes quando uma página é gerada.
Portanto, quando falamos em “editar” um cabeçalho em um tema de bloco, raramente estamos falando em editar um arquivo armazenado em um diretório de temas de WordPress.
Sob o capô: Um cabeçalho de tema de bloco
Inspecionar o HTML por trás de uma parte do template, como um cabeçalho, ajuda a explicar o que está acontecendo quando você personaliza um tema.
Estamos usando o tema Seedlet para este tutorial porque ele está disponível como Seedlet (Blocks) e o antigo Seedlet (Classic). O Seedlet (Blocks) usa o tema Blockbase como principal, e este é o conteúdo completo do arquivo header.html nos diretórios do tema Seedlet:
<!-- wp:pattern {"slug":"blockbase/header-centered"} /-->
<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->A maior parte da mágica por trás dos blocos do WordPress acontece nos comentários HTML. Os comentários podem passar informações de estilo e outras diretrizes durante a criação da página. O HTML acima acrescenta um pouco de espaçamento vertical ao nosso cabeçalho padrão, mas a ação principal é a solicitação para incluir um padrão no tema Blockbase que (depois que .html é anexado) é encontrado no arquivo header-centered.html.
O diretório de partes do template no tema Blockbase inclui estes arquivos relacionados a um cabeçalho:
header-centered.html
header-default.html
header-linear.html
header-minimal.html
header-rounded-logo.html
header-wide.htmlPor exemplo, o arquivo header-rounded-logo.html inclui um comentário HTML que adiciona uma classe CSS para o recorte circular da imagem da logo. Se desejarmos usar essa abordagem, poderemos editar nosso arquivo Seedlet header.html para incluir header-rounded-logo.html em vez de header-centered.html. Mas não é necessário fazer isso, porque podemos aplicar essa parte do template no Editor de Sites do WordPress e deixar os arquivos de tema no disco rígido intactos.
Usando o Editor de Sites para personalizar um cabeçalho
Com um tema de bloco ativo em nosso site, podemos acessar o Editor de Sites no painel do WordPress, selecionando Aparência > Editor:
A visualização inicial no Editor de Sites é um layout de página inteira que incluirá o cabeçalho, o rodapé e quaisquer outras partes de template já adicionadas pelo desenvolvedor do tema. Você pode clicar na área do cabeçalho para começar a editar imediatamente.
Abaixo, nosso cabeçalho inclui um espaço reservado para uma logo e já exibe o nome do site e a navegação principal (que agora consiste apenas em “Sobre nós” (About us) e “Página de Amostra” (Sample Page). Se adicionarmos um slogan às informações básicas do nosso site, ele também aparecerá aqui.
Esses elementos de identidade do site já aparecem em nosso cabeçalho porque a parte do template header-centered.html mencionada acima inclui estes comentários:
<!-- wp:site-logo {"align":"center","width":128} /-->
<!-- wp:site-title {"textAlign":"center","style":{"spacing":{"padding":{"top":"30px","bottom":"20px"}}}} /-->
<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->A navegação principal é gerada por este comentário:
<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center","orientation":"horizontal"}} /-->Vamos adicionar nossa logo:
- Selecione o espaço reservado para a logo.
- Clique no botão Adicionar mídia.
- Escolha sua logo na Biblioteca de Mídia do WordPress ou carregue-a do disco.
Personalizar o cabeçalho de um site adicionando uma logo é uma tarefa tão comum que até mesmo os temas mais clássicos de WordPress simplificam o trabalho no Personalizador. Portanto, vamos adicionar um bloco que ainda não está previsto no template: um menu secundário próximo à parte superior da página com a entrada: Shop.
Primeiro, alternamos a exibição do Inseridor de Blocos clicando no ícone de alternância próximo ao canto superior esquerdo do Editor de Site:
Com o Inseridor de Blocos ativo:
- Localize o bloco de navegação (você pode pesquisar por ele).
- Arraste o bloco até a margem superior do cabeçalho.
Agora, editamos o bloco de navegação criando um link personalizado (separado da navegação principal) que exibe o texto Shop e tem a URL do nosso subdomínio de eCommerce:
Por padrão, tudo nessa parte do template de cabeçalho é centralizado na página. Queremos que o link Shop flutue à direita. Para fazer isso, siga os passos:
- Clique no novo bloco de navegação.
- Clique no ícone Alterar justificação de itens na barra de ferramentas.
- Selecione Justificar itens à direita.
Aqui está o cabeçalho concluído:
Como modificar o cabeçalho de um tema clássico com o Personalizador
Quando a primeira versão do Personalizador de temas foi lançada em 2012, juntamente com o WordPress 3.4, representou um avanço significativo para ajudar os administradores a modificar a aparência de seus sites sem codificação.
O Personalizador foi aprimorado significativamente desde então, mas uma coisa permanece verdadeira: o desenvolvedor de um tema determina o que pode e o que não pode ser personalizado usando a ferramenta. Isso contrasta com a liberdade de comando que os proprietários de sites têm com o Editor de Sites baseado em blocos.
Usando o Personalizador de temas de WordPress
Quando um tema clássico compatível com o Personalizador estiver ativo em um site, acesse-o no painel do WordPress selecionando Aparência > Personalizar.
No menu principal do Personalizador, selecionamos Identidade do Site para acessar os componentes personalizáveis no cabeçalho:
Na seção Identidade do Site desse tema, podemos adicionar ou alterar uma logo e editar o título do site e qualquer slogan. (O título do site e o slogan são inicialmente preenchidos por entradas na página Configurações Gerais do painel.)
Esse tema também coloca a navegação principal do site no cabeçalho. Há também um local para navegação no rodapé e para um menu de links de redes sociais. O Personalizador permite que você escolha qual menu (se houver) deseja atribuir a cada um desses locais, mas os locais em si são essencialmente fixos.
Após clicar no botão Selecionar Logo destacado acima, você pode escolher uma logo na Biblioteca de Mídia do WordPress ou carregar uma nova a partir do disco.
Abaixo, com a logo no lugar, o Personalizador permite que você remova a imagem ou a substitua por uma diferente:
Sob o capô: O que o Personalizador pode personalizar?
Então, como o Personalizador determina se podemos carregar uma logo e onde deve ser colocada quando o fizermos?
Tudo começa com esta entrada no script functions.php do tema:
/**
* Add support for core custom logo.
*
* @link https://codex.wordpress.org/Theme_Logo
*/
add_theme_support(
'custom-logo',
array(
'height' => 240,
'width' => 240,
'flex-width' => false,
'flex-height' => false,
)
);Esse bloco de código ativa o botão Selecionar Logo na aba Identidade do Site do Personalizador, juntamente com seu link para as funções da Biblioteca de Mídia.
Em seguida, no código PHP usado para criar o cabeçalho do site, este pequeno snippet de código é adicionado no local em que a logo deve aparecer:
<div class="site-logo"><?php the_custom_logo(); ?></div>O resultado:
Alterar um cabeçalho do WordPress editando arquivos de tema
Acima, quando personalizamos o cabeçalho em um tema de bloco usando o Editor de Sites, adicionamos um menu secundário com um link Shop. Tivemos a liberdade de colocar esse bloco de navegação em qualquer lugar que quiséssemos em nosso cabeçalho. Nossa versão clássica do tema não tem um local reservado para esse menu, então precisaremos editar o código PHP relacionado ao cabeçalho para fazer a alteração.
Poderíamos simplesmente abrir o arquivo de tema apropriado e adicionar manualmente o HTML para o nosso menu secundário, mas isso seria falta de visão. Posteriormente, talvez queiramos atualizar o texto do nosso link de compras (Shop Now?), alterar a URL ou adicionar outro item a esse menu (Login?).
Queremos adicionar uma nova navegação ao cabeçalho que esteja registrada no Personalizador, permitindo que o conteúdo do menu secundário seja alterado no editor de menus do WordPress sem a necessidade de retornar ao código do tema.
Antes de começar: Backup
Explorar o código PHP do seu tema clássico de WordPress para personalizar o cabeçalho do site geralmente é retratado como editar o arquivo header.php. Esse é o caso em muitos temas, mas outros podem combinar vários arquivos para criar um único cabeçalho.
Antes de fazer alterações nos arquivos do tema, faça backups. Veja aqui como fazer backups e como restaurá-los.
Mesmo com backups, você pode ter problemas quando uma atualização de um tema de terceiros substituir suas alterações. Suas modificações podem desaparecer do site até que você possa restaurar os arquivos de tema alterados a partir de um backup. É por isso que recomendamos que você crie um tema filho (child theme) apenas para os arquivos alterados e teste as atualizações em um site WordPress preparado.
Editando um cabeçalho de WordPress em um tema clássico
Nosso tema clássico de amostra tem um local reservado no cabeçalho para a navegação principal. No Personalizador, podemos selecionar o menu do WordPress que queremos atribuir a esse local. Em nosso caso, esse menu tem o nome prático de “Menu principal”.
Também há locais no tema para navegação no rodapé e nos links sociais, mas você pode ver abaixo que eles não estão ativados no momento:
Se dermos uma olhada no script functions.php do tema, veremos onde esses locais de menu são referenciados pela primeira vez:
// This theme uses wp_nav_menu()
register_nav_menus(
array(
'primary' => __( 'Primary Navigation', 'seedlet' ),
'footer' => __( 'Footer Navigation', 'seedlet' ),
'social' => __( 'Social Links Navigation', 'seedlet' ),
)
);Abaixo, adicionamos a esse bloco para registrar uma entrada para o nosso novo menu “Navegação Secundária” (Secondary Navigation):
// This theme uses wp_nav_menu()
register_nav_menus(
array(
'primary' => __( 'Primary Navigation', 'seedlet' ),
'secondary' => __( 'Secondary Navigation', 'seedlet' ),
'footer' => __( 'Footer Navigation', 'seedlet' ),
'social' => __( 'Social Links Navigation', 'seedlet' ),
)
);Quando voltamos ao Personalizador, a nova opção Navegação Secundária aparece na área Posições dos menus:
Podemos dar um nome ao nosso menu (Menu Secundário) e começar a adicionar links a ele. Como fizemos com o Editor de Sites no tema baseado em blocos, criaremos uma entrada para Shop.
De volta ao arquivo de tema para o cabeçalho, adicionamos um código que confirma que o menu de navegação secundário existe e que ele tem pelo menos uma entrada na lista de links. Em seguida, analisamos o conteúdo do menu e o exibimos:
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<div id="secondary-navigation" class="secondary-navigation" role="navigation">
<?php
// Get menu slug
$location_name = 'secondary;
$locations = get_nav_menu_locations();
$menu_id = $locations[ $location_name ];
$menu_obj = wp_get_nav_menu_object( $menu_id );
wp_nav_menu(
array(
'theme_location' => 'secondary',
'menu_class' => 'menu-wrapper',
'container_class' => 'secondary-menu-container',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
)
);
?>
</div><!-- #secondary-navigation -->
<?php endif; ?>
<div class="menu-button-container">
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<button id="secondary-open-menu" class="button open">
<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
</button>
<?php endif; ?>
</div>Agora nosso cabeçalho inclui o link Shop (destacado em vermelho abaixo) em nosso local preferido para a navegação secundária.
Com essa abordagem, podemos alterar o texto âncora usado para o link Shop — ou até mesmo adicionar outros itens de menu à navegação secundária — apenas editando o menu Navegação Secundária no painel do WordPress.
Resumo
Se você quiser modificar o cabeçalho do seu site WordPress sem recorrer a plugins ou construtores de páginas de terceiros, os temas baseados em blocos oferecem flexibilidade quase ilimitada em combinação com o Editor de Sites. O Editor de Sites permite que você coloque uma variedade de blocos em praticamente qualquer lugar em um layout de página. As modificações que você faz nas definições e no estilo dos blocos são armazenadas no banco de dados do WordPress, evitando a necessidade de modificar os arquivos de tema no disco.
O Personalizador, que usamos há mais de uma década para gerenciar temas clássicos, permite alterações em elementos que o desenvolvedor do tema identificou e registrou como “personalizáveis”. As alterações que você deseja fazer e que estão fora desse escopo podem exigir a edição de arquivos de tema e — quase certamente — um conhecimento básico da linguagem de script PHP.
Você está procurando uma maneira melhor de criar sites WordPress? Confira o DevKinsta baseado em Docker, um conjunto de desenvolvimento local gratuito usado por 60,000+ desenvolvedores, web designers e freelancers.
Steve Bonisteel é um Editor Técnico na Kinsta que começou sua carreira de escritor como jornalista impresso, cobrindo ambulâncias e caminhões de bombeiros. Ele tem coberto tecnologia relacionada à Internet desde o final dos anos 1990.
Deixe um comentário