O recurso de menu personalizado do WordPress 3.0+ “não tão novo” não é apenas extremamente útil, mas também muito poderoso. Eu já escrevi alguns posts sobre como editar e personalizar o menu (como como destacar os links da página atual ) e hoje vou mostrar como você pode adicionar classes especiais aos seus temas para que você possa facilmente mostrar ícones personalizados ao lado dos seus links de navegação .
Adicionando um ícone inicial ao lado do link da página inicial do WordPress
Para explicar melhor como adicionar ícones, mostrarei as etapas para adicionar um ícone de tipo de casa ao lado do link da página inicial.
Etapa 1: baixe um ícone de casa legal
Por causa desta visualização, acabei de baixar um ícone inicial simples do Finicons.com – link
Passo 2: Habilite as classes no seu menu WordPress
Por padrão, o menu do WordPress não mostra os atributos de “classe” no construtor de menus, então clique nas “opções de tela” e verifique se está marcada.
Etapa 3: adicionar estilo ao link da página inicial
Agora você pode navegar ou criar um link de página inicial e adicionar uma nova turma a ele. Eu adicionei uma classe chamada “home-link-icon”.
Etapa 4: adicionar CSS para o ícone do menu inicial
Agora, a única coisa que resta é adicionar o css à sua folha de estilo para mostrar o ícone da classe que você acabou de criar. Nota: Certifique-se de adicionar o ícone baixado na etapa 1 na pasta de imagens do seu tema.
CSS de amostra
.home-link-ícone a{
padding-left: 30px !important;
imagem de fundo: url(imagens/home.png);
posição de fundo: esquerda;
repetição de fundo: sem repetição;
}
Imagem de amostra
Abaixo, você pode ver meu css em ação em um tema no qual estou trabalhando para liberar gratuitamente na minha seção Temas gratuitos do WordPress . Não está posicionado perfeitamente e o ícone não combina, mas para este tutorial você pode ver como deve funcionar.
