Menus e navegação

Módulo 4: Criar conteúdo · Tempo de leitura: 7 minutos

Objetivo de aprendizagem: Depois desta lição, é capaz de criar um menu claro, tanto num tema de blocos como num tema clássico, e sabe o que torna um menu bom.

Conceitos-chave: bloco de navegação, Editor do site, Apresentação > Menus, localização do menu, submenu, link personalizado, menu móvel, menu de rodapé, texto do link, acessibilidade

Duas formas, consoante o seu tema

O local onde cria o menu depende do seu tema (lição 5.1):

• Tema de blocos: o menu é um bloco de navegação no cabeçalho da site. Edita-o no Editor do site (Apresentação > Editor > Navegação, ou na parte do modelo Cabeçalho).
• Tema clássico: cria o menu em Apresentação > Menus e escolhe aí uma localização do menu que o tema disponibiliza, como "Menu principal" ou "Rodapé".

Não vê Menus em Apresentação, apenas Editor? Então está a utilizar um tema de blocos. Essa é uma confusão comum depois de mudar de tema: "o meu menu desapareceu". O menu antigo ainda existe (está guardado na base de dados como uma lista de itens de menu), mas o novo tema procura noutro sítio. No Editor do site pode importar um menu clássico existente para o bloco de navegação.

O que pode incluir

Um item de menu pode ser:

• uma página ou artigo da sua site;
• uma categoria (nesse caso liga ao arquivo dessa categoria);
• um link personalizado: qualquer endereço, incluindo para outra site, ou uma âncora dentro de uma página (/diensten/#prijzen);
• num tema de blocos, também outros blocos na navegação, como um campo de pesquisa, ícones de redes sociais ou um botão "Marcar consulta".

Pode organizar itens de menu uns debaixo dos outros como submenu: num tema clássico arrastando-os ligeiramente para a direita, no bloco de navegação com "Adicionar submenu" ou arrastando um item para cima de outro.

Um item de menu liga a uma página, mas tem o seu próprio rótulo. Se mais tarde alterar o título da página, o rótulo no menu não muda automaticamente (num menu clássico nunca muda; no bloco de navegação depende de como adicionou o item). Por isso, depois de alterar um título, verifique também o menu.

Um bom menu

Um menu não é um índice de toda a sua site. É um indicador de caminho para os poucos locais que a maioria dos visitantes quer visitar. Algumas diretrizes:

• Poucos itens principais: cerca de cinco a sete. Mais do que isso não cabe bem num telemóvel e os visitantes não o leem.
• No máximo um nível de submenu. Um submenu dentro de um submenu é difícil de utilizar num telemóvel e confuso para leitores de ecrã.
• Um título de submenu também é um link. Em muitos temas, clicar em "Serviços" abre o submenu, mas "Serviços" é também uma página. Certifique se de que essa página existe e mostra algo com sentido, ou que o item é claramente apenas um título.
• Palavras comuns que os visitantes utilizariam: "Preços", não "As nossas oportunidades de investimento".
• Contacto e a ação mais importante (marcar consulta, encomendar) sempre acessíveis, muitas vezes à direita do menu ou como botão.
• Links jurídicos (política de privacidade, termos e condições, definições de cookies) pertencem a um menu de rodapé, não ao menu principal. Mas devem estar sempre acessíveis, em todas as páginas (lição 9.3).

Móvel e acessível

Num telemóvel, o menu normalmente recolhe para um botão com três traços (o "menu hamburger"). No bloco de navegação define quando isso acontece (sempre, ou apenas em ecrãs pequenos). Teste sempre num telemóvel real:

• Consegue tocar em cada item com o polegar, sem tocar acidentalmente no item ao lado?
• Os submenus abrem com um toque, e voltam a fechar?
• O menu fecha quando escolhe um item?

Para a acessibilidade (visitantes com leitor de ecrã ou que utilizam apenas o teclado), tenha em atenção:

• Textos de link claros. "Ler mais" ou "Clique aqui" não diz nada se um leitor de ecrã ler todos os links seguidos. "Leia mais sobre o nosso horário de funcionamento" já diz.
• Navegação com o teclado: com Tab percorre o menu, com Enter abre um item. A maioria dos temas e o bloco de navegação fazem isto bem; menus personalizados com scripts muitas vezes não.
• Um link para outra site deve, de preferência, abrir na mesma janela. Se tiver de abrir numa nova janela, indique isso claramente.

Outra navegação

Além do menu principal, estes elementos ajudam os visitantes a orientar se:

• um campo de pesquisa (o bloco de pesquisa), especialmente numa site com muitos artigos;
• migalhas de pão ("Início > Serviços > Web design"), muitas vezes fornecidas por um plugin de SEO ou pelo tema;
• links internos nos seus textos para outras páginas (também bons para a visibilidade nos motores de pesquisa, lição 9.2);
• uma página 404 que ajude: com um campo de pesquisa e links para as páginas mais importantes, em vez de apenas "não encontrado". Num tema de blocos, edita isso como o modelo "404" no Editor do site.

Na prática: como fica num painel

No painel de administração do WordPress:

• Tema de blocos: Apresentação > Editor > Navegação. Escolha o menu, adicione itens com o sinal de mais, arraste-os para a ordem certa e escolha nas definições do bloco de navegação quando o menu móvel aparece.
• Tema clássico: Apresentação > Menus. Crie um menu, selecione páginas à esquerda e clique em Adicionar ao menu, arraste a ordem e selecione a localização do menu na parte inferior. Guardar.

Resumo

• Num tema de blocos cria o menu com o bloco de navegação no Editor do site; num tema clássico em Apresentação > Menus com uma localização de menu.
• Um menu aponta o caminho para alguns locais importantes: poucos itens, no máximo um nível de submenu.
• Os links jurídicos pertencem a um menu de rodapé, sempre acessível.
• Teste o menu móvel num telemóvel real e utilize textos de link que digam algo por si só.
• Um campo de pesquisa, links internos e uma página 404 útil complementam o menu.

Questionário

Exercício

Exercício D4.3: Um menu que funciona. Crie (ou melhore) o menu principal da sua site com no máximo sete itens principais, um submenu e um link personalizado, e um menu de rodapé com a sua política de privacidade. Teste o menu móvel no seu telemóvel e apenas com o teclado (Tab e Enter). Assinale o que funciona e anote: que tipo de tema tem (blocos ou clássico), onde criou o menu, e que texto de link melhorou e como?

Leitura adicional

Para trabalhar diretamente no WordPress ainda não temos artigos próprios; a documentação oficial do WordPress é extensa.

• Bloco de navegação (wordpress.org, inglês): https://wordpress.org/documentation/article/navigation-block/
• Menus em temas clássicos (wordpress.org, inglês): https://wordpress.org/documentation/article/appearance-menus-screen/
• Editor do site (wordpress.org, inglês): https://wordpress.org/documentation/article/site-editor/