Como criar um cabeçalho do WordPress sem plugin

Um cabeçalho é um registro, listado no admin do WordPress como uma página e editado no mesmo editor de blocos. Essa decisão única é o que elimina o plugin de cabeçalho do seu site.

Outros temas criam o cabeçalho em outro lugar. O Blocksy e o Astra mantêm seus construtores de cabeçalho no Personalizador, um painel de configurações ao lado do site, separado do editor em que você escreve as páginas. Nossa comparação com o Blocksy coloca as duas abordagens lado a lado.

O aninhamento

Um registro de cabeçalho contém um Header Root. O root contém um Header Container, que define se o cabeçalho tem largura limitada, largura total, ou uma largura em um breakpoint e outra no restante. O container contém Header Zones, e uma zona é uma célula na linha do cabeçalho. O logo vai em uma, a navegação na seguinte, um ícone de busca e um carrinho na última.

Há 22 blocos na família de cabeçalho ao todo, e você vai usar quatro ou cinco deles em um site típico. Todo o resto está ali para o dia em que você precisar de uma busca na loja, um link de idioma ou um bloco com horário de funcionamento no canto.

As zonas cuidam do layout, então você quase nunca precisa lidar com classes de alinhamento.

• Leve uma zona até a borda. Uma zona à esquerda para o logo, uma zona central para o menu e uma zona à direita para as ações é o arranjo em que a maioria dos sites acaba.
• Agrupe o que pertence junto. Um ícone de busca, um carrinho e um botão na mesma zona continuam formando um conjunto, espaçado como um só grupo.
• Reordene por ponto de quebra. A zona que fica em terceiro no desktop pode ficar em primeiro no celular, sem um segundo registro de cabeçalho.
• Limite uma zona a um nível de dispositivo. Instrua uma zona a ignorar os dispositivos que não têm espaço para ela, e nada precisa ser ocultado com CSS depois.
• Adicione suas próprias classes a uma zona quando quiser acessá-la a partir de uma folha de estilo própria.

Monte primeiro o arranjo da versão para desktop e não mexa nele até que as partes estejam prontas. Decisões de layout ficam muito mais fáceis quando o conteúdo real já está na linha.

O comportamento vem de predefinições, que são conjuntos de configurações de layout que você aplica com um clique e depois ajusta. Escolha o comportamento desejado e altere o que quiser depois.

• Transparente. Sem fundo, então o que estiver atrás do cabeçalho aparece. Combine com a variante de logotipo escura ou clara para que o logotipo continue legível.
• Semitransparente. Um fundo translúcido, que mantém a imagem por trás visível e o texto legível. Geralmente é a escolha mais segura em vez de uma fotografia muito movimentada.
• Flutuante, e flutuante semitransparente ou flutuante pequeno, em que o cabeçalho fica dentro da página, com espaço ao redor e longe das bordas da janela.
• Largura total e fixo. Ocupa toda a largura da tela e permanece fixado conforme a página é rolada.
• Fixo ao rolar para cima. Sai do topo quando o visitante rola para baixo e volta quando ele rola para cima, o que devolve espaço às páginas longas.

As configurações globais do site que as sustentam

Opções de cabeçalho são a maior seção em Opções do tema, com 94 dos 533 campos, e reúnem o que nenhum registro único deveria controlar: o cabeçalho padrão, o comportamento fixo, a altura, o espaçamento e o ponto de quebra para dispositivos móveis. Uma importação de demo preenche todas elas, e você altera as que importam para você.

Um registro não faz nada até que algo aponte para ele. Há dois níveis, e eles funcionam do mesmo jeito para cada elemento de estrutura do site.

O padrão de todo o site

Defina o cabeçalho padrão em Opções do tema e todas as páginas o usarão. Faça o mesmo para a barra superior, o design do título da página e o rodapé. Esta é a configuração que faz uma nova página ficar certa no momento em que você a publica.

A substituição por página

Qualquer página individual pode substituir qualquer uma dessas configurações pelas suas próprias. Uma landing page de campanha usa um cabeçalho transparente e não exibe barra superior; a página de contato mantém o padrão. Nada é duplicado para isso, e nada precisa ser lembrado depois, porque a substituição fica na página que ela afeta.

Barras superiores

Uma barra superior é um registro próprio, com blocos próprios: um número de telefone, horário de funcionamento, um seletor de idioma e um anúncio. O bloco Header Topbar a posiciona acima da linha do cabeçalho. Como ela é separada, um aviso de feriado muda em todo o site sem precisar abrir o cabeçalho.

Fontes

Quando este guia descrever algo fora do próprio Canvas, estas são as páginas oficiais que o documentam.

• Tela Menus de Aparênciawordpress.org · Onde os menus do WordPress são criados e atribuídos às localizações de menu que um tema oferece
• Entendendo o Critério de Sucesso 2.5.8: Tamanho do alvo (mínimo)w3.org · Por que os alvos de toque precisam de um tamanho mínimo de 24 por 24 pixels CSS