Você gostaria de personalizar seus menus de navegação do WordPress para alterar suas cores ou aparência? Sua tema WordPress gerencia a aparência dos menus de navegação em seu site. Você pode personalizá-lo facilmente usando CSS para atender às suas necessidades. Neste tutorial, mostraremos como estilizar os menus de navegação do seu blog WordPress.

To-the-style-to-menus de navegação de wordpress

Método 1: Como estilizar seus menus do WordPress com um plug-in

O tema WordPress usa CSS para seus estilos de navegação. Muitos iniciantes não se sentem à vontade para editar CSS Temas do WordPress. Então é aí que um plugin para estilizar um menu é útil, porque evita que você edite arquivos de tema ou escreva código.

Primeiro, o que você precisa fazer é instalar e ativar o plugin " CSS herói ". Para mais detalhes veja nosso guia passo a passo sobre como instalar um WordPress Plugin.

CSS Hero é um WordPress Plugin premium que permite que você crie seu próprio tema WordPress sem escrever uma única linha de código (Nenhum HTML ou CSS necessário).

Depois de ativar o plugin, você será redirecionado para uma página onde precisará fornecer sua licença. Basta seguir as instruções na tela e você será levado ao seu site com apenas alguns cliques.

Agora você precisa clicar no botão CSS herói Na barra de ferramentas do WordPress.

css-herói-Menu-wordpress

O CSS Hero oferece um editor WYSIWYG (o que você vê é o que você obtém "O que você vê é o que você obtém") Clicar neste botão o levará ao seu site com uma barra de ferramentas flutuante CSS Hero à direita.

bar de ferramentas de css-herói

Você precisa clicar no ícone azul na parte superior para iniciar a edição.

Mova o mouse sobre o menu de navegação e o CSS Hero o destacará exibindo suas bordas. Quando você clica no menu de navegação destacado, ele mostra os diferentes itens que você pode editar.

Personalize-a-menu com-css-herói

Na captura de tela acima, você pode ver o item de menu, o menu de navegação e o contêiner do menu de navegação, etc.

Suponha que desejemos alterar a cor do texto de todos os itens no menu de navegação. Nesse caso, selecionaremos o menu de navegação que toca o menu inteiro.

O CSS Hero agora mostrará as diferentes propriedades que você pode alterar, como texto, cor de fundo, bordas, margens, preenchimento, etc.

css-propriedade-herói

Você pode clicar em uma propriedade que deseja editar. O CSS Hero apresentará uma interface simples na qual você poderá fazer suas alterações.

edit-a-propriedade-css-com-css-herói

Na captura de tela acima, selecionamos o texto e ela nos mostrou uma bela interface para selecionar fontes, alterar a cor, o tamanho do texto e outras propriedades.

Ao fazer alterações, você terá uma visualização ao vivo do resultado final.

PREVIEW-to-css-herói vivo

Assim que estiver satisfeito com as alterações, clique no botão "Salvar" no " CSS herói Para salvar suas alterações.

A melhor parte desse método é que você pode desfazer facilmente as alterações feitas. O CSS Hero mantém um histórico completo de todas as suas alterações e você pode entrar e sair dessas mudanças.

Método dois: como alterar manualmente o estilo do menu de navegação

Este método requer que você edite seus arquivos de tema do WordPress. Você só deve usá-lo se for um desenvolvedor e tiver algum conhecimento de criação de temas WordPress.

A melhor maneira de fazer isso é personalizar seu tema WordPress criando um tema filho. Se você apenas muda CSS, então eu convido você a ler nosso tutorial sobre como adicionar código CSS personalizado no WordPress.

Os menus de navegação do WordPress são exibidos em uma lista não ordenada (lista com marcadores).

Se você usar a seguinte tag php, ela exibirá uma lista sem classes CSS associadas a ela.


Sua lista com marcadores teria o "menu" do nome da classe, com cada item da lista tendo sua própria classe CSS.

Isso pode funcionar se você tiver um único local do menu. No entanto, a maioria dos temas tem vários locais onde você pode exibir os menus de navegação.

Usar apenas as classes CSS padrão pode causar conflitos com menus em outros lugares.

Esta é a razão pela qual você precisa definir a classe CSS e o local do menu. É provável que o seu tema WordPress já esteja fazendo isso adicionando os menus de navegação usando um código como este:

'principal', 'menu_class' => 'menu principal',)); ?>

Este código informa ao WordPress que é aqui que o tema exibe o menu principal. Ele também adiciona uma classe CSS " Menu principal No menu de navegação.

Agora você encontrar o estilo de seu menu de navegação usando a estrutura CSS.

#header menu de .primary {} // recipiente classe #header de menu ul .primary {} // recipiente classe primeira lista não ordenada #header menu de .primary ul ul {} // lista não ordenada Dentro de uma lista não ordenada #header .primary -menu li {} // Cada item de navegação #header li menu de .primary {} // Cada item de navegação # cabeçalho li âncora menu de .primary ul {} // lista não ordenada se houver suspensa itens #header .primary -menu li li {} // Cada suspensa item de menu de navegação li .primary li # cabeçalho tem {} // Cada folha âncora para baixo item de navegação

Substitua #header pela classe de contêiner ou pelo " ID Usado pelo seu tema WordPress.

Esta estrutura o ajudará a mudar completamente a aparência do seu menu de navegação.

É isso neste tutorial. Espero que isso permita que você personalize os menus do seu blog WordPress. Sinta-se livre para compartilhá-lo com seus amigos em suas redes sociais favoritas.