Acontece com todos.
Você encontra um tema que gosta, instala e passa alguns meses curtindo a aparência do seu site. Mas então, depois de alguns meses, o tema começa a parecer obsoleto. Um pouco entediante.
O único problema é que você não quer passar algumas horas procurando algo novo. Se ao menos houvesse uma maneira de adicionar um pouco de tempero ao seu tema, um pouco de brilho para destacá-lo.
Antes de se desesperar, deixe-me mostrar uma maneira fácil de apimentar seu tema sem muito esforço e sem adicionar imagens desnecessárias que podem deixar seu site mais lento.
Digite Dashicons. Dashicons são ícones de fontes que foram introduzidos no WordPress 3.8. Eles são aqueles ícones incríveis e legais que você vê quando faz login no seu painel. Não seria legal se você pudesse adicioná-los ao seu tema também?
Bem, você pode e eu vou te mostrar como.
Como você pode usar Dashicons em seu menu de navegação?
Vamos começar com um exemplo simples. Dashicons já estão incluídos no WordPress desde a versão 3.8, mas você ainda precisa incluí-los para que eles sejam exibidos corretamente no front-end do seu site; isto é, seu tema.
Etapa 1: prepare seus Dashicons de tema
Para deixar seu tema Dashicons pronto, primeiro abra seu arquivo functions.php (encontrado em Aparência>Editor – por padrão, ele abrirá o arquivo CSS do seu tema atual. Vá em frente e procure pelo arquivo functions.php e clique nele para carregá-lo Editor.)
Etapa 2: enfileirar o script
Role até o final e cole estas linhas de código no final:
//Enfileira o script Dashicons
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style('dashicons');
}
Tudo bem! Agora seu tema está pronto para usar Dashicons.
Etapa 3: Adicionando Dashicons aos itens de menu
Vamos adicionar um Dashicon para o seu link Home. Vá até o site da Dashicons e selecione o ícone que você gosta.
Atualização: os Dashicons estavam originalmente disponíveis no GitHub.io, mas desde então foram disponibilizados no WordPress.org.
Passo 4:
Clique no ícone desejado (neste caso selecionei o ícone home) e depois clique em Copiar HTML. Ele lhe dará uma janela pop-up com o código que você precisa.
Etapa 5:
Volte ao seu painel do WordPress, clique em Aparência > Menus e cole o código exatamente onde diz Rótulo de Navegação.
Se você ainda quiser que a palavra apareça, digite-a após o colchete div de fechamento.
Clique em salvar e carregue sua página inicial. Seu link inicial agora deve exibir um Dashicon agradável e nítido.
Você pode fazer isso para todos os itens do menu de navegação ou apenas para casa. Basta repetir as etapas acima com os ícones correspondentes. Essa foi fácil né?
Como você usa Dashicons no post meta?
Você pode dar um passo adiante e adicionar Dashicons à meta do seu post, ou em outras palavras, adicionar Dashicons na frente do nome do autor, data, categoria ou tag; dependendo do seu tema e das informações que ele exibe.
Como você já enfileirado Dashicons em seu tema, tudo o que você precisa fazer agora é abrir seu arquivo style.css (ou usar o editor CSS personalizado, que é sempre uma opção melhor para que você não perca as alterações quando o tema for atualizado!), encontre o seletor correspondente e adicione o código CSS.
Digamos que você queira adicionar um ícone na frente do seu nome ou do 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. Novamente, ele lhe dará uma janela pop-up com o código que você precisa colar.
Etapa 3:
Agora abra seu style.css e encontre o seletor correspondente, neste caso – .entry-author. Adicionando :before e colando o código CSS que você copiou do site Dashicons, o nome do autor terá um belo ícone na frente dele. Você também precisa especificar que está usando a fonte Dashicons. O código modificado fica assim:
.entry-autor:antes {
font-family: "dashicons";
conteúdo: "\f110";
}
Vamos adicionar um pouco de estilo também, e agora o código completo se parece com isso:
.entry-autor:antes {
font-family: "dashicons";
conteúdo: "\f110";
cor: #f15123;
exibição: bloco em linha;
-webkit-font-smoothing: suavizado;
fonte: normal 20px/1;
alinhamento vertical: topo;
margem direita: 5px;
margem direita: 0,5rem;
}
O resultado final
Então, como será isso no final?
Algo assim:
Juntando tudo
Além dos exemplos acima, você pode usar Dashicons em seu back-end para especificar ícones diferentes para diferentes tipos de postagem, ou pode usá-los em seus títulos de postagem, títulos de widgets ou, se estiver criando uma página de destino personalizada, poderá diferenciar entre diferentes páginas do seu site.
Aqui está um exemplo básico do que você pode usá-los para criar:
