isso acontece a todos.

Você encontra um tema que você gosta, você instalá-lo e passar alguns meses apreciando a aparência do seu site. Mas depois, depois de alguns meses, o tema começa a ficar velho. Um pouco aborrecido.

O único problema é que você não quer passar um par de horas procurando algo novo. Se ao menos houvesse uma maneira de adicionar um pouco de especiaria ao seu tema, uma pequena chama para fazê-lo sobressair.antes de você jogar suas mãos para cima em desespero, deixe-me mostrar-lhe uma maneira fácil de apimentar o seu tema sem muito esforço, e sem adicionar imagens desnecessárias que poderiam abrandar o seu site.

Enter Dashicons. Dashicons são ícones da fonte que foram introduzidos no WordPress 3.8. Eles são aqueles ícones incríveis e legais que você vê quando você logar em seu painel. Não seria legal se você pudesse adicioná-los ao seu tema também?bem, tu podes e eu vou mostrar-te como.

como pode usar Dashicons no seu menu de navegação?

vamos começar por um exemplo simples. Dashicons já estão incluídos no WordPress desde a versão 3.8, mas você ainda precisa incluí-los para levá-los a exibir corretamente na parte da frente do seu site, ou seja, o seu tema.

Passo 1: Prepare os seus Dashicons temáticos

para que os seus Dashicons temáticos estejam prontos antes de abrir as suas funções.ficheiro php (encontrado na aparência>Editor – por omissão, irá abrir o ficheiro CSS do seu tema actual. Vá em frente e procure por funções.php file e clique nele para carregá-lo no Editor.)

Step 2: Colocar o script

Scroll todo o caminho para o fundo e colar estas linhas de código no final:

All right! Agora seu tema está pronto para usar Dashicons.

Passo 3: Adicionar Dashicons aos itens do menu

vamos adicionar um Dashicon para a sua ligação pessoal. Vá para o site da Dashicons e selecione o ícone que você gosta.

Update: os Dashicons estavam originalmente disponíveis em GitHub.io, mas desde então foram disponibilizados em WordPress.org

Passo 4:

carregue no ícone desejado (neste caso, seleccionei o ícone da casa) e depois carregue em Copiar HTML. Ele lhe dará uma janela pop-up com o código que você precisa.

Passo 5:

voltar para o seu painel do WordPress, clique em Aparência > Menus e cole o código de direito onde diz Navegação Rótulo.

Se você ainda deseja a palavra para se manifestar, escreva-após o fechamento div suporte.

Clique em salvar e carregar sua página inicial. Seu link de casa deve agora exibir um Dashicon agradável, crisp.

pode fazer isto para todos os itens do menu de navegação ou apenas para casa. Basta repetir os passos acima com os ícones correspondentes. Foi fácil, não foi?como é que se usa Dashicons no post meta?

pode ir um passo mais longe e adicionar Dashicons ao seu meta post, ou, por outras palavras, adicionar Dashicons à frente do nome do autor, data, categoria ou marca; dependendo do seu tema e da informação que ele mostra.

dado que já colocou os Dashicons no seu tema, tudo o que tem de fazer agora é abrir o seu estilo.ficheiro css (ou usar um editor CSS personalizado que é sempre uma opção melhor para que não perca as alterações uma vez que o seu tema actualiza!), encontre o seletor correspondente e adicione o código CSS.

digamos que você quer adicionar um ícone na frente do seu nome ou nome do seu autor.Passo 1: primeiro vamos escolher um ícone que gostaríamos.

Passo 2:

em seguida, clique nele, e desta vez selecione Copiar CSS. Mais uma vez, ele lhe dará uma janela pop-up com o código que você precisa colar.

Passo 3:

Agora abra seu estilo.css e encontrar o seletor correspondente, neste caso – .entry-author. Adicionando: antes e depois colando o código CSS que você copiou do site Dashicons, o nome do autor terá um ícone bonito na frente dele. Você também precisa especificar que você está usando o tipo de letra Dashicons. O código modificado se parece com isto:

.entry-author:before {font-family: "dashicons";content: "\f110";}

vamos adicionar um pouco de estilo também, e agora o código completo se parece com isto:

o resultado final

então como será isto no final?

Algo como:

Há tantas maneiras que você pode usar Dashicons – deixe a criatividade tomar posse e veja o que você pode fazer.

Colocá-lo todos juntos

Além dos exemplos acima, você pode usar Dashicons em seu back-end para especificar ícones diferentes para diferentes tipos de pós, ou você pode usá-los em seu post títulos, widget de títulos, ou se você estiver criando um personalizado da página de destino, você pode diferenciar entre diferentes páginas do seu site.

um grande exemplo disto é a página inicial das Superstars WP antigas. Aqui, você pode ver Dashicons em uso para diferentes áreas do site:

Dashicons não são o único tipo de ícone de tipos de letra que você pode adicionar. Confira o nosso tutorial de ícones FontAwesome para mais.

Inclui atualizações por e-mail. Cancelar subscrição a qualquer hora.

Deixe uma resposta

O seu endereço de email não será publicado.