Blog

cancastilho.com.br

14 January 2018

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:

Html com fontawesome carregado pelo plugin AccessPress.

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