Os ícones exercem um fascínio inegável!
Eles possuem a capacidade de comunicar mensagens de forma rápida e eficaz ao público, estabelecendo uma conexão visual marcante.
Essa é a razão pela qual os ícones são amplamente utilizados em diversas plataformas, incluindo sites WordPress.
Além disso, manter o mesmo tema em seu site por um período prolongado pode se tornar monótono. Essa é uma experiência comum.
Como consequência, surge a busca por algo mais atraente, que por sua vez, também pode se tornar entediante com o tempo.
E assim, o ciclo se repete…
Então, como podemos quebrar esse ciclo de tédio?
Os Dashicons surgem como uma excelente solução!
Eles têm o poder de revitalizar a aparência do seu site e destacá-lo. Além disso, evitam a necessidade de esforços adicionais e a sobrecarga do site com imagens desnecessárias, que podem prejudicar a velocidade de carregamento da página.
Vamos, então, explorar os Dashicons e descobrir como utilizá-los de maneira eficaz em seu site WordPress.
O que são os Dashicons do WordPress?
Os Dashicons são fontes de ícones oficiais do WordPress, introduzidas há alguns anos com a versão 3.8. Essas fontes são visualmente agradáveis e podem agregar valor ao seu site. São arquivos SVG de alta qualidade que podem ser redimensionados para qualquer tamanho sem perder a nitidez.
Por serem nativos do WordPress, criados pela própria equipe de desenvolvimento, você pode utilizá-los diretamente sem a necessidade de carregar scripts adicionais. Há aproximadamente 350 ícones disponíveis, que podem ser encontrados na página oficial de Recursos para Desenvolvedores do WordPress.
Esses ícones são categorizados por tema, e um campo de busca dinâmico permite filtrar os ícones disponíveis.
Você pode utilizar esses ícones em:
- Painel do WordPress
- Menus de navegação
- Páginas e posts
- Metadados
- Elementos do editor
- Plugins e temas personalizados
- Painéis de administração
- Design de front-end
Você deve ter notado que usei a palavra “ícones” diversas vezes.
Nesse contexto, refiro-me especificamente a fontes de ícones.
Não a imagens no formato de ícones.
Sim, existe uma diferença entre as duas abordagens.
Vamos analisar essa distinção.
Qual a diferença entre ícones de imagem e fontes de ícones?
Fontes de ícones e ícones de imagem podem parecer semelhantes, mas em vez de letras, as fontes de ícones contêm símbolos vetoriais.
Isso soou muito técnico?
Permita-me esclarecer.
Basicamente, essas fontes de ícones se assemelham a imagens que você pode usar para adicionar símbolos ao seu site, mas não são imagens propriamente ditas.
Elas oferecem inúmeras vantagens.
Quais são elas?
Descubra na próxima seção.
Por que você deve utilizá-los?
- Escalabilidade, semelhante aos textos usados em seu site como fontes
- Leveza, o que não afeta a velocidade de carregamento da página como as imagens
- Flexibilidade, permitindo definir a cor do ícone via CSS e adicionar propriedades como gradiente de cor, sombra, etc.
- Economia de solicitações HTTP, permitindo carregar as fontes de uma vez e utilizá-las em todas as páginas. Ao usar muitas imagens, é necessário fazer diversas requisições para buscá-las, o que aumenta o tempo de carregamento da página.
- Facilidade de uso e ajuste, comparado às imagens. Você pode adicionar símbolos reconhecíveis e criativos sem a necessidade de recriá-los cada vez que precisar de um ícone para um player de vídeo, e-mail, música ou qualquer outra função.
- Acessibilidade, por serem integrados ao WordPress
Como usá-los?
Utilizar os Dashicons não é uma tarefa complexa.
Acredite em mim; tenho experiência em ambas as áreas :0
Basta seguir alguns passos simples para começar a usar os Dashicons do WordPress.
Passo 1: Habilitar os Dashicons em seu site WordPress
Antes de tudo, é necessário habilitar os Dashicons onde você pretende utilizá-los, como em um tema. Para isso, é necessário adicionar algumas linhas de código ao arquivo functions.php.
Siga os passos abaixo:
- Acesse o Editor de tema/aparência no painel do WordPress.
- Abra o arquivo functions.php.
- Vá até o final do arquivo e adicione as seguintes linhas de código para enfileirar scripts
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
O exemplo acima serve para habilitar os Dashicons no front-end.
É fundamental criar um tema filho antes de editar o arquivo functions.php. Caso contrário, se você editar diretamente o arquivo de tema e houver uma atualização para esse tema, todas as alterações realizadas no arquivo serão sobrescritas.
Passo 2: Encontrar os códigos HTML e CSS do Dashicon
O WordPress.org disponibiliza uma biblioteca de Dashicons que auxilia na busca pelos códigos CSS e HTML de cada ícone. Acesse a página de Recursos para desenvolvedores para encontrar os Dashicons que deseja utilizar e siga os passos:
- Clique no ícone desejado.
- Escolha entre “Copiar CSS” ou “Copiar HTML” clicando na opção.
- Uma janela pop-up será exibida. Copie o código para a área de transferência.
- Decida onde você deseja usar o ícone, como em temas, metadados, menus de navegação, etc.
- Cole o código copiado no Widget de texto ou no Editor de texto do local escolhido.
- Personalize a aparência dos ícones através de CSS personalizado
Pronto.
Por padrão, todos os ícones têm um tamanho de 20 pixels. Você pode alterá-lo utilizando as opções CSS disponíveis na ferramenta Inspecionar elemento do Google Chrome ou FireBug do Firefox.
Como aproveitar ao máximo os Dashicons do WordPress?
Agora que você sabe como utilizar os Dashicons em seu site, vamos explorar algumas aplicações específicas.
1. Utilização no menu de navegação
Para adicionar ícones ao menu, siga os seguintes passos:
- Acesse Menus/Aparência no painel
- Copie os códigos HTML correspondentes ao ícone desejado da página do WordPress.org
- Cole o código no campo “Etiqueta de Navegação” no painel
- Clique em “Salvar” e recarregue a página inicial. O ícone deverá ser exibido de forma nítida e elegante.
2. Utilização no post meta
Você pode utilizar Dashicons para destacar elementos como a data, nome do autor, tags ou categorias de um post, de acordo com o tema utilizado.
Depois de ter enfileirado os Dashicons, abra o arquivo style.css. Caso prefira, utilize um editor de CSS personalizado para evitar perder as alterações após as atualizações do tema. Em seguida, adicione seu código CSS, após identificar um seletor correspondente.
3. Utilização no back-end do WordPress
Se você deseja incluir ícones distintos para diferentes títulos de posts personalizados, tipos de post ou widgets, é muito fácil fazer isso.
Uma dica rápida: crie um shortcode
Para facilitar o uso dos Dashicons, você pode criar um shortcode. Essa estratégia é particularmente útil quando você desenvolve sites para clientes, que podem inserir Dashicons facilmente sem a necessidade de manipular códigos.
Conclusão
Espero que os conceitos relativos aos Dashicons do WordPress estejam claros para você. Além de aprimorar a estética do seu site, eles são fáceis de usar e melhoram a velocidade de carregamento da página.
E como sabemos, “beleza e inteligência” são uma combinação rara.
Então, aproveite essa oportunidade e utilize os atraentes Dashicons em seu site WordPress!