Como configurar o Font Awesome 5 no WordPress 4.8.4?
by Carlos Nantes
Primeiramente, se você utiliza algum plugin do wordpress, existe uma chance desse plugin já estar utilizando o Font Awesome. Então antes de tudo, acesse a página principal do seu blog e abra o código fonte do html para verificar se algum plugin carregou o Font Awesome. Se positivo, é só começar a utilizá-lo. Veja abaixo que o plugin AccessPress Social Share já está carregando o Font Awesome:
Se esse não for seu caso, será necessário configurá-lo. Se você utiliza um tema padrão do wordpress, como o Twentyfifteen, será necessário primeiro criar um tema filho dele para poder começar a realizar alterações. Isso porque se você alterar diretamente os arquivos do tema twentyfifteen, por exemplo, qualquer atualização que for instalar desse tema irá sobreescrever tudo o que você alterou. Portanto, criaremos um tema filho antes de configurar o FontAwesome para uso.
Neste exemplo, vou criar um tema filho chamado twentyfifteen-cancastilho para indicar que esse é um tema derivado do twentyfifteen. Pode ser qualquer nome, mas é boa prática prefixar o nome do seu tema com o nome do tema pai. Para criar o tema basta criar o diretório $WORPRESS/wp-content/themes/twentyfifteen-cancastilho. Note que $WORDPRESS deve ser substituído pelo caminho de instalação do seu wordpress. Nesse diretório do novo tema, crie dois arquivos: o arquivo style.css e o arquivo functions.php.
O arquivo style.css deve conter um cabeçalho no formato abaixo para que o wordpress possa incluí-lo em sua lista de temas. Modifique o exemplo abaixo como for apropriado para seu caso, apenas lembre que no campo Template você precisa indicar o nome do tema pai.
Theme Name: Twenty Fifteen Cancastilho
Theme URI: http://cancastilho.com.br/blog/wp-content/themes/twentyfifteen-cancastilho/
Description: Tema modificado a partir do tema Twenty Fifteen padrao do wordpress.
Author: Carlos A. N. de C.
Author URI: http://cancastilho.com.br
Template: twentyfifteen
Version: 1.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, two-columns, left-sidebar, cancastilho
Text Domain: twenty-fifteen-cancastilho
*/
/* Aqui em baixo você coloca o css customizado do seu tema */
Nesse momento, faça o download do Font Awesome 5, extraia o conteúdo para o diretório fontawesome-free-5 e copie o conteúdo ./fontawesome-free-5/web-fonts-with-css para o diretório $WORPRESS/wp-content/themes/twentyfifteen-cancastilho/fontawesome-free-5/web-fonts-with-css.
No arquivo functions.php inclua o código abaixo. Para mais detalhes consulte a documentação:
/* Inclui configuracoes do tema pai */
function my_theme_enqueue_styles() {
//$parent_style='NOME_DO_TEMA_PAI-style'
$parent_style='twentyfifteen-style';
wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
//wp_enqueue_style('NOME_DO_TEMA_FILHO-style',
wp_enqueue_style('twentyfifteen-cancastilho-style',
get_stylesheet_directory_uri() . '/style.css',
array($parent_style),
wp_get_theme()->get('Version')
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
/* E aqui está a configuração do fontawesome. */
function carregar_font_awesome_5() {
$url_pro_font_awesome_5 = get_stylesheet_directory_uri() . '/fontawesome-free-5/web-fonts-with-css/css/fontawesome-all.min.css';
wp_enqueue_style('load-fa5', $url_pro_font_awesome_5) ;
}
add_action('wp_enqueue_scripts', 'carregar_font_awesome_5');
?>
Isso conclui o processo de criação do seu tema filho e configuração do Font Awesome 5 nele. Agora, basta navegar até http://SEU_SITE/wp-admin/themes.php e ativar o tema filho criado.
Para testar se a configuração está funcionando, você pode criar uma nova página de teste no blog e incluir um dos ícones do Fonte Awesome 5 como o abaixo:
<i class="fab fa-facebook-messenger"></i>
Visualize a página de teste. Se o ícone aparecer corretamente, então a configuração foi bem sucedida. Se não, vai precisar conferir onde deu errado.
tags: child-theme - fontawesome - tema-filho - wordpress