Primeiramente gostaria de esclarecer, que na minha opiniĂŁo existem diversas maneiras de realizar o carregamento de CSS e Javascript, desde colocar a tag de forma literal a utilizar funçÔes “Enqueue”, ou seja, de enfileiramento. BenefĂ­cios podem ser observados nesta segunda forma. Imagine se cada plugin que utilizĂĄssemos colocasse seus scripts de forma aleatĂłria, sem declaraçÔes de dependĂȘncias. Por exemplo, sabemos que para o “bootstrap.js” funcionar temos que chamar primeiro o “Jquery”. AtravĂ©s das funçÔes que veremos, temos como estabelecer tais dependĂȘncias.

1Âș Onde iremos chamar nossos script?

                A maioria dos tutoriais relacionados ao desenvolvimento de temas, coloca o “wp_head();”, antes de terminar a tag </head> , e “wp_footer();” antes de terminar o </body>. Já parou para pensar a utilidade

Bem, uma das responsabilidades Ă© justamente “disparar o gancho” que Ă© responsĂĄvel pela inclusĂŁo tanto do css, quanto do JS. Mas onde isso ocorre? Sabemos que temos um arquivo functions.php, e Ă© justamente lĂĄ que iremos configurar nosso CSS e Javascript e entender porque colocamos neste.

2Âș Arquivo functions.php

No functions.php iremos adicionar uma ação para ser disparada quando o wordpress for enfileirar os scripts, atravĂ©s do “wp_enqueue_scripts”, e disparar nossa função, que iremos chamar de “theme_fonts_url”.

 

Pronto, jĂĄ temos nossa função que serĂĄ responsĂĄvel por enfileirar, definir dependĂȘncias, versĂ”es e local onde o css e javascript deverĂĄ ser chamado. Iremos fazer este carregamento atravĂ©s de duas funçÔes: wp_enqueue_style() e wp_enqueue_script().

Função “wp_enqueue_style()” e “wp_enqueue_script()”

Esta função espera como parùmetros de entrada os seguintes dados:

Fonte: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Sendo assim, iremos colocar: o identificador, local do css, dependĂȘncias, versĂŁo e o tipo de media, simples assim (mais abaixo um exemplo prĂĄtico).

A de script Ă© idĂȘntica a esta, alterando apenas o $media, para o $in_footer (caso deseje que o arquivo, por ser um script, sĂł seja carregado no footer).

Fonte: https://developer.wordpress.org/reference/functions/

Para finalizar, um exemplo completo onde iremos carregar o css com bootstrap pronto para vocĂȘ utilizar.


Obs: Preze sempre por olhar a documentação.