WordPress

Incluindo Folhas de Estilo e Scripts no seu Tema

Incluindo Folhas de Estilo e Scripts no seu Tema

Nesta lição, você vai aprender a criar e incluir suas folhas de estilo (css) e scritps (js) necessários dentro do seu tema do WordPress.

Até então, você aprendeu na lição passada, como criar seu primeiro tema do WordPress, de modo que até agora, você possuí 5 arquivos dentro da pasta do tema, são eles:

footer.php: arquivo responsável por armazenar o rodapé do seu tema.

header.php: arquivo responsável por armazenar o cabeçalho do seu tema.

index.php: arquivo responsável por armazenar o corpo da sua página inicial.

screenshoot.png: que nada mais é do que a foto de fundo do seu tema, que será visualizada no painel de controle do wordpress.

style.css: arquivo que até o momento só esta sendo usado para salvar as informações do seu tema (dentro de um comentário de código 😂).

Normalmente em uma situação padrão, quando criamos um site com HTML, as folhas de estilo (arquivos css) e nossos scripts (arquivos javascript), são salvos dentro de uma pasta chamada assets, e incluídos dentro página entre as tags <head></head>.

<head>
<link rel="stylesheet" href="./assets/css/style.css">
<script src="./assets/js/plugins.js"></script>
</head>

Já quando criamos um tema para o WordPress, a inclusão desses arquivos acontecem de uma maneira um pouco diferente, aqui nos fazemos isso por meio do arquivo functions.php.

Por que as folhas de estilo e scripts, não devem ser inseridos diretamente na tag <head> de um tema do WordPress?

Existem varias razões para isso, e para que você possa entender, eu vou enumerar cada uma delas:

1) Devido a dificuldade do gerenciamento de múltiplos arquivos e recursos, esse tipo de coisa não é considerada uma boa prática segundo a forma com que o wordpress foi construído.

Todos nós sabemos, que o wordpress é um CMS criado por meio da linguagem PHP, e por conta disso, quando decidimos criar um novo tema para ele, precisamos "dançar conforme a música".

Isso significa dizer que nós estamos sujeitos a regras impostas pela própria plataforma, seja porque eles acharam melhor dessa forma, ou por apenas uma questão de gosto.

2) Existem algumas funções, tais como wp_enqueue_style e wp_enqueue_script, que nos permite enfileirar estilos e scripts adequadamente, de forma a oferecer mais controle sobre a ordem de carregamento dos mesmos.

3) Por meio do arquivo functions.php, você consegue carregar estilos e scripts apenas quando eles são necessários, isso é chamado de carregamento condicional.

4) Ajuda na manutenção do código, pois manter seus estilos e scripts centalizados dentro do functions.php, ajuda os desenvolvedores e designers a manterem o código do tema funcional.

5) Usando o functions.php, você está de acordo com as práticas de segurança definidos pelo próprio wordpress.

Enfim, você pode falar inúmeras coisas, diversos contrapontos diferentes, e ideias até interessantes, mas como dito anteriormente, você está sujeito a regras impostas pela própria plataforma do wordpress, sendo assim... você precisa dançar conforme a música.

Mas bola pra frente, e vamos seguir sem desanimar, ok? 😉

Functions.php

Até então, já falamos de functions.php pra lá... functions.php pra cá, mas o que realmente faz esse arquivo?

De acordo com a própria documentação do WordPress, ele é um arquivo importante que tem por objetivo, o desempenho de diversas funções dentro do seu tema.

Será por meio dele, que você como desenvolvedor de temas para wordpress, poderá adicionar novas funcionalidades ao seu tema, modificar o comportamento padrão do wordpress, além é claro, de permitir a personalização do seu próprio tema.

Veja abaixo, algumas características do functions.php:

  • Permite que você registre e enfileire scripts ou estilos, garantindo que eles sejam carregados de forma adequada.
  • Permite que você adicione suporte a recursos específicos do seu tema, como: menus, miniaturas de postagem, além de outros recursos.
  • Você pode criar funções personalizadas que executam tarefas específicas.
  • Permite a criação de hooks e filtros personalizados.
  • Você pode registrar widgets personalizados para adicionar áreas de widget específicas ao seu tema.
  • Integrações personalizadas com o painel administrativo, de modo a adicionar ou remover recursos de personalização do próprio tema, como: permitir que seus usuários modifiquem cores, fontes e outros aspectos da aparência do site.
  • Permite que você adicione suporte a tradução e internacionalização do seu tema.

Em resumo, este arquivo desempenha um papel importante em qualquer tema do wordpress, ele não é totalmente necessário, mas quando se faz presente, automatiza muita coisa.

Pois bem, agora que você já sabe o que o functions.php faz, chegou o momento de usa-lo 🤓

E para isso, vamos começar criando um arquivo dentro da pasta do seu tema chamado de functions.php.

Dentro desse arquivo, eu colei o seguinte código:

<?php

//Criamos uma função nova, que será responsável por carregar todos os scripts necessários para o nosso tema
function wpmicilini_load_scripts(){
 wp_enqueue_style('wpmicilini-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'), 'all');//Função responsável por carregar os arquivos CSS um em baixo do outro. É uma função de carregamento do próprio wordpress.
}

add_action('wp_enqueue_scripts', 'wpmicilini_load_scripts');//Ação do WordPress, que chama um hook que executa a função que declaramos acima

Feito isso, vamos começar a entender cada um dos comandos acima.

<?php: tudo começa com a declaração da tag inicial do PHP, para que o compilador entenda que haverão códigos a serem executados.

wpmicilini_load_scripts(): criamos uma função, que será responsável por armazenar uma outra função do wordpress, que carregará todas as folhas de estilo necessárias para o bom funcionamento do nosso tema.

A ideia, é que o nome das suas funções herdem o nome do seu tema, então se você vai criar uma função que carregue algum menu, use wpmicilini_load_menu, uma função que faça alguma outra coisa? use wpmicilini_alguma_outra_coisa.

Isso evita que você ou futuros desenvolvedores, confundam com as funções internas do wordpress.

wp_enqueue_style(): função do próprio wordpress, que carrega todas as folhas de estilo, uma após a outra.

Como você mesmo viu, essa função recebe 5 parâmetros, vejamos cada um deles a seguir:

'wpmicilini-style': conhecido como $handle, ele nada mais é do que o identificador de chamada, usado para o processo de inclusão de scripts.

Ali você pode informar qualquer tipo de nome que desejar.

get_stylesheet_uri(): o segundo parâmetro refere-se ao local absoluto de onde estará salvo as suas folhas de estilo. Existem 3 formas diferentes de se fazer isso:

  • get_stylesheet_uri(): função do wordpress que retorna o local público do arquivo style.css que é a folha de estilos principal do tema, exemplo: http://wp-micilini.local/wp-content/themes/wp-micilini/style.css.
  • get_template_directory(): função do wordpress que retorna o caminho absoluto da pasta onde se encontra seu tema, exemplo: /Usuarios/Micilini/Documentos/Local Sites/wp-micilini/app/public/wp-content/themes/wp-micilini.
  • get_template_directory_uri(): função do wordpress responsável por retornar o caminho público do tema, exemplo: http://wp-micilini.local/wp-content/themes/wp-micilini.

Como neste exemplo, eu irei trabalhar com o arquivo style.css, eu fiquei com a função get_stylesheet_uri() mesmo.

array(): existe a possibilidade de fazer com que uma folha de estilo dependa do carregamento de outra para funcionar. Vamos discutir o funcionamento deste parâmetro daqui a pouco 😁

Como neste exemplo, eu irei trabalhar somente com o style.css, não faz sentido informar outras dependências ali.

wp_get_theme()->get('Version'): função usada para retornar a versão do seu tema (informada no arquivo style.css). Caso desejar, você pode remover essa função e adicionar uma string contendo o número da versão do seu tema. Exemplo: '1.0', '8.3.19', '10.9.8':

wp_enqueue_style('wpmicilini-style', get_stylesheet_uri(), array(), '4.15', 'all');

Você pode passar o valor null, fazendo com que seu tema não adicione o ?ver= no final da chamada da folha de estilo, assim como também, pode inserir um valor booleano.

Caso opte por passar o valor false, o parâmetro da versão será o mesmo da versão do wordpress.

Geralmente usamos este terceiro parâmetro para o controle de cache por parte do navegador do usuário.

'all': o último parâmetro refere-se ao tipo de mídia dos seus arquivos, que pode ser all, print ou screen.

add_action(): função usada para enviar ao wordpress a função de carregamento de scripts que criamos. Sem o add_action tudo o que fizemos dentro da função wpmicilini_load_scripts não irá funcionar, pois a mesma não está sendo chamada.

Essa função recebe dois parâmetros em formato de string, a primeira é uma referência a função wp_enqueue_scripts do próprio wordpress, e a segunda é uma referência ao nome da função que criamos.

É como se fosse um quebra cabeça responsável por conectar as peças.

Tenha em mente ,que o terceiro parâmetro em diante da função wp_enqueue_style são opcionais.

Importando estilos que estão em arquivos separados

Agora, caso você tenha optado por importar folhas de estilos que existem dentro de pastas específicas, como é o caso dos exemplos:

  • wp-micilini/assets/css/meu-estilo.css
  • wp-micilini/assets/css/menu.css

Você deve usar a função get_template_directory_uri(), concatenados com o local dos arquivos da seguinte forma:

function wpmicilini_load_scripts(){

wp_enqueue_style('wpmicilini-style', get_stylesheet_uri()); // Estilo principal do tema
wp_enqueue_style('custom-style', get_template_directory_uri() . '/assets/css/meu-estilo.css'); // Estilo personalizado 1
wp_enqueue_style('second-custom-style', get_template_directory_uri() . '/assets/css/menu.css'); // Estilo personalizado 2

}

Importando estilos que estão em um site externo

Também com a função wp_enqueue_style, é possível adicionar folhas de estilo que estão fora do nosso site.

Para isso, basta que no segundo parâmetro, você informe por meio de uma string, o caminho absoluto onde se encontra a folha de estilo, por exemplo:

wp_enqueue_style('external-style', 'https://outrosite.com/assets/css/estilo-dt.css');//você pode informar os outros parâmetros da função caso desejar

Isso funciona muito bem, quando você precisa adicionar uma fonte disponível no Google Fonts, observe:

wp_enqueue_style('external-style', 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');//você pode informar os outros parâmetros da função caso desejar

Como funciona o terceiro parâmetro da função wp_enqueue_style?

Como você já sabe, o terceiro parâmetro da função wp_enqueue_style, nada mais é do um array.

Segundo a documentação do WordPress, ele foi criado para representar as dependências do estilo, no sentido de informar ao wordpress, que um determinado estilo só deve ser incluído na página quando um outro estilo for carregado.

Por exemplo, vamos supor nós temos duas folhas de estilos dentro da nossa função:

// Estilo Personalizado 1
wp_enqueue_style('estilo-um', get_template_directory_uri() . '/assets//css/custom-style.css', array(), '1.0', 'all');

// Estilo Personalizado 2
wp_enqueue_style('estilo-dois', get_template_directory_uri() . '/assets/css/second-custom-style.css', array(), '1.0', 'all');

Supondo que nós queremos reforçar a ideia de que a folha de estilosecond-custom-style.css, seja somente carregada após o custom-style.css, você pode informar o identificador do custom-style.css dentro do array do second-custom-style.css da seguinte forma:

// Estilo Personalizado 1
wp_enqueue_style('estilo-um', get_template_directory_uri() . '/assets//css/custom-style.css', array(), '1.0', 'all');

// Estilo Personalizado 2
wp_enqueue_style('estilo-dois', get_template_directory_uri() . '/assets/css/second-custom-style.css', array('custom-style'), '1.0', 'all');

Dessa forma, o segundo estilo só será carregado após o término do primeiro.

Alterando o header.php

Nada disso que fizemos irá funcionar, se não chamarmos dentro do nosso <head>, a função responsável por importar as folhas de estilo que declaramos no functions.php.

Para isso, você vai precisar abrir o arquivo header.php, e no final da tag <head>, adicionar uma nova função chamada de wp_head(): 

<head>
 <meta charset="<?php bloginfo('charset') ?>">
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <?php wp_head(); ?>
</head>

Se você abrir o código HTML do seu tema gerado pelo navegador, você vai perceber que a sua folha de estilo foi adicionada com sucesso na página.

<link rel='stylesheet' id='wpmicilini-style-css' href='.../wp-content/themes/wp-micilini/style.css?ver=1.0' type='text/css' media='all' />

Estilizando o style.css

Agora chegou o momento de estilizarmos o arquivo style.css, de modo a dar vida a nossa estrutura HTML que definimos em outros arquivos.

É nele que iremos concentrar todos os estilos das nossas tags HTML (de todas as páginas), dentro de um só arquivo.

Isso mesmo que você leu! É uma recomendação do próprio WordPress seguir desta maneira, mas é claro, nada impede que você faça isso separadamente em seus respectivos arquivos, ok?

Essa parte eu deixo com você, use seus conhecimentos em CSS para dar a vida ao seu tema 🥳

Minhas alterações no arquivo style.css, não estão surtindo efeito, o que fazer?

É comum quando estamos estilizando nosso tema do wordpress, algumas alterações de estilo não surtirem efeito em nossas tags HTML.

Isso pode acontecer devido ao cache do próprio navegador, e para resolver isso, você pode modificar o 4° parâmetro da função wp_enqueue_style, de modo a mostrar uma versão diferente baseado na última data que você modificou o arquivo, observe:

wp_enqueue_style('wpmicilini-style', get_stylesheet_uri(), array(), filemtime(get_template_directory() . '/style.css'), 'all');

Essa função vai retornar um datetime contendo a última vez que você modificou o arquivo style.css.

<link rel='stylesheet' id='wpmicilini-style-css' href='.../wp-content/themes/wp-micilini/style.css?ver=1698500364' type='text/css' media='all' />

Atenção: Só use a função filemtime enquanto você estiver desenvolvendo seu tema. Quando seu tema estiver pronto para ser distribuído, é recomendado que você volte a usar a função wp_get_theme()->get('Version').

Incluindo seus scripts no seu tema

Anteriormente, vimos como carregar as nossas folhas de estilo usando o functions.php.

Mas nós sabemos, que só de folha de estilo não é suficiente para se criar um tema legal, não é verdade?

Para adicionarmos scripts em nosso tema, o processo é bem simples, basta abrir o arquivo functions.php, e dentro da função wpmicilini_load_scripts(), adicionarmos um novo comando chamado wp_enqueue_script:

function wpmicilini_load_scripts(){
 wp_enqueue_style('wpmicilini-style', get_stylesheet_uri(), array(), filemtime(get_template_directory() . '/style.css'), 'all');

 wp_enqueue_script('init-js', get_template_directory_uri() . '/assets/js/init.js', array(), '1.0', true, false, 'all', 'none');
}

Ele é bem parecido com a função wp_enqueue_style, a diferença está a partir do 6° parâmetro em diante.

Vejamos com mais detalhes o funcionamento de cada parâmetro da função wp_enqueue_script:

$handle ('init-js') - O nome exclusivo que você atribui ao script. Ele é usado para identificar o script, e deve ser único em toda a sua instalação do WordPress.

$src (get_template_directory_uri() . '/assets/js/init.js') - É a URL do arquivo JavaScript que você deseja carregar. No nosso caso, ela existe dentro da pasta /assets/js/init.js.

$deps (array()) - São as dependências desse script, garantindo que os scripts dependentes sejam carregados antes do script atual.

$ver ('1.0') - A versão do script. Você pode especificar uma versão para fins de cache. Pode ser uma string representando a versão do script em formato de texto, ou false/null para não especificar uma versão.

$in_footer (true) - Um valor booleano que determina se o script deve ser carregado no rodapé da página (quando definido como true), ou no cabeçalho da página (quando definido como false).

$in_admin (false) - Um valor booleano que determina se o script deve ser carregado no painel de administração do WordPress. Se definido como true, o script será carregado nas páginas do painel de administração, se definido como false, ele não será carregado no painel.

$media ('all') - O tipo de mídia para o qual o script é direcionado. Pode ser 'all', 'screen', 'print', 'handheld', etc. Isso ajuda a especificar em que tipos de dispositivos ou mídias o script deve ser carregado.

$apply_to ('none') - Uma string opcional que permite especificar onde o script deve ser aplicado. Pode ser 'all', 'front', 'back', 'none', ou qualquer outra string personalizada que você queira usar para identificar onde o script deve ser aplicado.

Importando scripts no final da página (rodapé)

Se você decidiu importar o script no final da sua página, definindo como true o 5° parâmetro (como fizemos acima), você vai precisar importar a função wp_footer(), no arquivo footer.php.

<footer class="footer-area">
 Todos os direitos reservados, 2023
</footer>
<?php wp_footer(); ?>
</body>
</html>

O wp_footer() será responsável por importar todos os scripts que foram definidos para serem carregados no final da página.

Abrindo a estrutura HTML do seu tema no navegador, você verá que o script (init.js) foi importado com sucesso no final da sua página.

<script type='text/javascript' src='../wp-content/themes/wp-micilini/assets/js/init.js?ver=1.0' id='init-js-js'></script>

A barra administrativa do WordPress sumiu do meu tema, e agora?

O primeiro passo é manter a calma e ficar tranquilo. Existem muitas razões nas quais a barra administrativa do WordPress pode ter sumido, uma delas é que você se esqueceu de importar o comando wp_head() dentro do header.php, e o wp_footer() dentro do footer.php.

Sem essas duas funções a barra administrativa não será carregada.

É possível adicionar frameworks CSS dentro da função wpmicilini_load_scripts()? 

Sim, você pode fazer isso da seguinte forma:

//Carrega os Scripts de CSS
function wpmicilini_load_scripts(){
 //...
 //Bootstrap CSS/JS (V. 5.0.2)
 wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/vendor/bootstrap-5.0.2-dist/css/bootstrap.min.css', array(), '5.0.2');
 wp_enqueue_style('bootstrap-js', get_template_directory_uri() . '/assets/vendor/bootstrap-5.0.2-dist/js/bootstrap.min.js', array(), '5.0.2');
}

Tenha em mente, que você vai precisar criar uma pasta assets dentro da pasta raiz do seu tema, onde contenha uma outra pasta vendor, junto a uma outra pasta chamada bootstrap-5.0.2-dist que será separada por duas pastas (css e js) onde contém os arquivos do framework 😅

Dessa forma você terá o framework importado da maneira certa dentro do seu tema do WordPress.

Conclusão

Nesta lição você aprendeu a importar suas folhas de estilo (css) e seus scripts (javascript), para dentro do seu tema por meio do functions.php.

Acredito que você acabou de dar um passo muito importante na jornada de criação de temas, os próximos conteúdos que você verá daqui em diante, estão relacionados com funções avançadas do WordPress, que adicionam mais funcionalidades ao nosso tema.

Até este ponto, você já é capaz de criar seu próprio tema de modo a não precisar do painel administrativo do WordPress.

Mas se o seu objetivo, é criar temas não integrados com o painel administrativo do WordPress, os conhecimentos adquiridos até então, vão suprir as suas necessidades.

Agora, se o seu objetivo é criar temas para a venda, eles precisam ser integrados ao WordPress, assim como todos os outros temas que vemos por aí.

Portanto, te aguardo na próxima lição 🙂

END (y/n)