![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/public\")
<\/a><\/figure>\n\n\n\n\n\n\n<\/p>
Como Usar a Função wp_enqueue_style para Adicionar Folhas de Estilo CSS no WordPress<\/strong><\/h2>Vamos começar com alguns exemplos básicos para te ajudar a entender melhor como a função wp_enqueue_style()<\/strong> funciona.<\/p>Como Enfileirar a Folha de Estilo Principal style.css<\/strong><\/h3>Para realizar o enqueue a folha de estilo principal do tema, a style.css<\/strong>, use a função wp_enqueue_style() <\/strong>no arquivo functions.php<\/strong> do seu tema.<\/p>\n![\"Destaque](\"https:\/\/lh5.googleusercontent.com\/nLxx-R-glEjOp9UV8be-vjtIYIp6VsqmNYgnvrZT6TwWynb0QHhvntHtv2dtmvcUDvl-f_O2sIbnYHn2HEiaYwtGMRdYlLd2BZqlN_knZsJbAdw8c08vw71AYCOYAYxlauL7XF-mShcnymdULSdrYpk\")
<\/figure><\/div>Abaixo, ilustramos um exemplo do código com a função inserida no arquivo:<\/p>
function my_theme_enqueue_styles() {\n wp_enqueue_style( 'estilo_do_meu_tema', get_stylesheet_uri() );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );\n<\/pre>Nesse código, o elemento estilo_do_meu_tema<\/strong>, <\/strong>inserido dentro da função wp_enqueue_style(), representa um nome único para a folha de estilo que você está colocando na fila. Já a função get_stylesheet_uri()<\/strong><\/a> é a responsável por lidar com a URL do arquivo style.css <\/strong>do tema principal.<\/p>\n![\"Destaque](\"https:\/\/lh3.googleusercontent.com\/Au9R-FesbwuJc31hHnerVBh_ly4uGGbh14rBKojQFxdWqqJ5uMM9EFuvdOlEUVd9lZxkV5jt6nnaoRkxOioVK3YQk8uPxaAQeanFmgAyX7ohvCLbTe3o19SDHQIu-Aqo5cuRUZvxnudCWuSDcUcTsRU\")
<\/figure><\/div>Depois, a função wp_enqueue_style() <\/strong>registra o estilo e o adiciona à fila. Por fim, a função add_action()<\/strong><\/a> adiciona a sua função personalizada my_theme_enqueue_styles()<\/strong> no hook (gancho) dos wp_enqueue_scripts<\/strong><\/a> (link em inglês). Isso garante que a folha de estilo, ou stylesheet, será adicionada corretamente na fila (queue) de carregamento.<\/p>Como Fazer o Enqueue de Outras Stylesheets<\/strong><\/h3>Você também pode utilizar a função wp_enqueue_style()<\/strong> para incluir estilos adicionais sobre a stylesheet principal e colocá-los na fila. Por exemplo, é possível adicionar opções extras de estilo em um arquivo separado.<\/p>O código para aplicar essa função pode ser parcialmente reutilizado a partir do exemplo anterior, bastando então inserir alguns elementos extras. Confira o código abaixo:<\/p>
function my_theme_enqueue_styles() {\n\n wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );\n\n wp_enqueue_style('my-theme-extra-style', get_theme_file_uri('extra.css') );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/pre>Neste método, utilizamos a função get_theme_file_uri()<\/strong><\/a>, que retorna com a URL do arquivo no diretório do tema atual. Em nosso exemplo, trata-se do elemento extra.css<\/strong>. Desse modo, a função irá posicionar a stylesheet principal no primeiro lugar da queue e depois passará para os estilos extras adicionados à fila. <\/p>Como Carregar Stylesheets Externas nos Arquivos de um Site WordPress<\/strong><\/h3>Ainda é possível utilizar a função wp_enqueue_style()<\/strong> para fazer o enqueue de uma stylesheet a partir de uma fonte externa. O processo pode ser bastante útil caso você deseje utilizar fontes personalizadas ou uma folha de estilo que está hospedada em uma rede de distribuição de conteúdo (CDN).<\/p>O código também é bastante similar aos dos exemplos anteriores. Fique atento aos ajustes:<\/p>
function theme_files() { \n\n wp_enqueue_style('theme_custom', INSERIR URL'); \n\n} \n\nadd_action('wp_enqueue_scripts', 'theme_files');<\/pre>Lembre-se de substituir o elemento INSERIR URL<\/strong> pela URL real da stylesheet.<\/p>Como Adicionar Arquivos de Script no WordPress Usando a Função wp_enqueue_script<\/strong><\/h3>O WordPress possui uma função integrada, chamada wp_enqueue_script()<\/strong><\/a>, que permite que você faça o enqueueing de scripts JavaScript ou similares. Para fazer esse processo, adicione o código que está indicado abaixo no arquivo functions.php<\/strong> do seu tema:<\/p>function theme_scripts() {\n\n wp_enqueue_script( 'meu-script', get_template_directory_uri() . '\/js\/my-script.js', array(), '1.0', true );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'theme_scripts' );<\/pre>Note que esta função utiliza mais parâmetros do que os exemplos de enfileiramento apresentados anteriormente:<\/p>
\n- meu-script <\/strong>–<\/em> <\/strong>parâmetro que indica <\/strong>o nome do seu script. Você pode escolher o nome que desejar.<\/li>\n\n\n\n
- \/js\/my-script.js<\/strong> – se refere ao local em que está seu script. Nesse caso, nosso script de exemplo está no diretório js<\/strong> do tema WordPress.<\/li>\n\n\n\n
- array()<\/strong> – parâmetro que define as dependências que o seu script pode possuir.<\/li>\n\n\n\n
- 1.0 <\/strong>– refere-se ao número da versão da stylesheet. Em nosso exemplo, trata-se da primeira versão.<\/li>\n\n\n\n
- true<\/strong> – determina se o script deve ou não ser carregado no rodapé (true: verdadeiro\/sim e false: falso\/não).<\/li>\n<\/ul>
Exemplos Úteis de Usos da Função wp_enqueue_style<\/strong><\/h2>Nesta seção, você poderá conferir alguns casos práticos em que o uso da função wp_enqueue_style()<\/strong> pode melhorar a qualidade geral do seu site WordPress<\/strong><\/a>.<\/p>Carregando Estilos CSS Apenas em Páginas Específicas<\/strong><\/h3>Implementar códigos de estilo CSS (linguagem Cascading Style Sheet<\/em>) em páginas específicas de um site WordPress pode gerar diversos benefícios para os visitantes e para os administradores do site:<\/p>\n- Maior velocidade de carregamento das páginas <\/strong>– quando um site utiliza elementos CSS apenas em páginas onde eles são realmente necessários, ele evita a presença de códigos desnecessários em seus arquivos. Isso melhora a velocidade geral do site, fazendo com que as páginas carreguem mais rápido. <\/li>\n\n\n\n
- Manutenção facilitada<\/strong> – você pode alterar determinados elementos de estilo, através dos arquivos CSS, sem que isso afete as outras páginas do site. <\/li>\n<\/ul>
No exemplo ilustrado abaixo, vamos adicionar e carregar um código CSS à página de Entre em Contato<\/strong>. Para isso, vamos contar com a ajuda do hook WordPress wp_enqueue_scripts<\/strong> e da função is_page()<\/strong><\/a>:<\/p><?php\n\nadd_action('init', 'register_custom_styles');\n\nfunction register_custom_styles() {\n\n wp_register_style( 'design-personalizado', '\/wp-content\/design.css' );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts' );\n\nfunction conditionally_enqueue_styles_scripts() {\n\n if ( is_page('entreemcontato') ) {\n\n wp_enqueue_style( 'design-personalizado' );\n\n }\n\n}\n\n?><\/pre>Carregando um Arquivo CSS no Rodapé do Site <\/strong><\/h3>Ao mover o elemento de estilo CSS para o final da página do site, o navegador de um visitante tende a priorizar o carregamento do código HTML e de outros recursos importantes antes. Como resultado, colocar os códigos CSS no rodapé do site pode acelerar consideravelmente o carregamento da página. <\/p>
A melhor maneira de carregar o CSS no rodapé de um site é através do hook WordPress<\/strong><\/a> get_footer()<\/strong>.<\/p><?php\n\nfunction footer_style() {\n\n wp_enqueue_style('design-personalizado', '\/wp-content\/design.css');\n\n};\n\nadd_action( 'get_footer', 'footer_style' );\n\n?><\/pre>Entretanto, lembre-se de que adicionar elementos CSS no rodapé do site pode causar problemas de renderização, desconfigurando a página ou fazendo com que ela pareça quebrada. Por este motivo, recomendamos que você primeiro carregue as funções CSS mais importantes na seção do cabeçalho e depois passe para a parte do rodapé.<\/p>
Adicionando Estilos Inline Dinâmicos<\/strong><\/h3>Funções do CSS tipo inline<\/strong><\/a> <\/strong>e dinâmico permitem que você adicione estilos personalizados para elementos individuais em uma página na web. O método mais simples de fazer isso é através da função wp_add_inline_style()<\/strong><\/a>, que carrega os estilos a partir de um arquivo CSS específico.<\/p>No exemplo a seguir, vamos combinar ambas funções wp_enqueue_style() <\/strong>e wp_add_inline_style() <\/strong>para aplicar um estilo personalizado a partir do arquivo design.css <\/strong>e incluir cabeçalhos em negrito.<\/p>?php\n\nfunction theme_style() {\n\nwp_enqueue_style( 'estilo-personalizado', get_template_directory_uri() . '\/wp-content\/design.css' );\n\n$bold_headlines = get_theme_mod( 'headline-font-weight' ); \n\n$inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';\n\nwp_add_inline_style( 'estilo-personalizado', $inline_style );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'theme_style' );\n\n?><\/pre>Lembre-se de que o estilo inline irá funcionar apenas depois que o arquivo design.css <\/strong>for propriamente enqueued.<\/p>Verificando o Status da Stylesheet Enfileirada<\/strong><\/h3>Use a função wp_style_is()<\/strong><\/a> se você deseja obter mais informações sobre o estado da stylesheet que foi adicionada à queue. Essa função é capaz de verificar se o arquivo CSS de estilo está na fila, enfileirado, registrado ou já pronto para ser exibido (in the queue, enqueued, registered, ready to be displayed<\/em>).<\/p><?php\n\nfunction check_styles() {\n\nif( wp_style_is( 'main' ) {\n\nwp_enqueue_style( 'meu-tema', '\/custom-theme.css' );\n\n}\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'check_styles' );\n\n?><\/pre>Inserindo Metadados na Stylesheet<\/strong><\/h3>Você também pode utilizar a função wp_enqueue_style <\/strong>com o seguinte snippet de código para enqueue uma stylesheet CSS com metadados de título:<\/p><?php\n\nfunction theme_extra_styles() {\n\nwp_enqueue_style( 'add-metadata', '\/wp-content\/design.css' );\n\nwp_style_add_data( 'add-metadata', 'title', 'Meu Título Incrível' );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'theme_extra_styles' );\n\n?><\/pre>Neste exemplo, utilizamos a função wp_style_add_data()<\/strong><\/a> e então adicionamos um título à stylesheet CSS.<\/p>Cancelando o Registro de Arquivos de Estilo <\/strong><\/h3>É importante excluir o registro de arquivos de estilo CSS que você não utiliza mais. Quando múltiplos plugins ou temas enfileiram o mesmo arquivo de estilo, podem acabar gerando conflitos entre si e problemas de exibição no site.<\/p>
O código indicado abaixo faz o processo de excluir o registro e retirar da fila (deregister<\/em> e dequeue<\/em>) um estilo específico, substituindo-o com uma nova stylesheet:<\/p>add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );\n\nfunction remove_default_stylesheet() {\n\n wp_dequeue_style( 'original-enqueue-stylesheet-handle' );\n\n wp_deregister_style( 'original-register-stylesheet-handle' );\n\n wp_register_style( 'novo-estilo', get_stylesheet_directory_uri() . '\/new.css', false, '1.0.0' ); \n\n wp_enqueue_style( 'novo-estilo' );\n\n}<\/pre>\n![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/public\")
<\/a><\/figure><\/div>Conclusão<\/strong><\/h2>A função wp_enqueue_style()<\/strong> é uma parte essencial do desenvolvimento de sites WordPress. Ela oferece uma maneira simples e eficiente para fazer o carregamento de stylesheets no seu site. <\/p>Neste tutorial, explicamos o que é e como funciona a função wp_enqueue_style()<\/strong>, além de apresentar alguns exemplos de como você pode utilizá-la para personalizar a aparência do site e melhorar a velocidade de carregamento das páginas.Esperamos que você tenha achado esse tutorial útil e que agora esteja pronto para utilizar a função wp_enqueue_style() <\/strong>em seus projetos WordPress com sucesso. Caso ainda possua alguma dúvida ou sugestão, confira nossa página de tutoriais sobre WordPress<\/strong><\/a> ou deixe um comentário na seção abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"Quando um usuário está desenvolvendo um plugin ou tema do WordPress, é essencial utilizar o método de enfileiramento (enqueue) de folhas de estilo (stylesheets) para que os elementos sejam carregados corretamente e na ordem certa. Para fazer isso, recomendamos utilizar a função wp_enqueue_style(). Trata-se de uma ferramenta poderosa para adicionar estilos personalizados no seu plugin […]<\/p>\n
Como Enfileirar a Folha de Estilo Principal style.css<\/strong><\/h3>Para realizar o enqueue a folha de estilo principal do tema, a style.css<\/strong>, use a função wp_enqueue_style() <\/strong>no arquivo functions.php<\/strong> do seu tema.<\/p>\n<\/figure><\/div>Abaixo, ilustramos um exemplo do código com a função inserida no arquivo:<\/p>
function my_theme_enqueue_styles() {\n wp_enqueue_style( 'estilo_do_meu_tema', get_stylesheet_uri() );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );\n<\/pre>Nesse código, o elemento estilo_do_meu_tema<\/strong>, <\/strong>inserido dentro da função wp_enqueue_style(), representa um nome único para a folha de estilo que você está colocando na fila. Já a função get_stylesheet_uri()<\/strong><\/a> é a responsável por lidar com a URL do arquivo style.css <\/strong>do tema principal.<\/p>\n<\/figure><\/div>Depois, a função wp_enqueue_style() <\/strong>registra o estilo e o adiciona à fila. Por fim, a função add_action()<\/strong><\/a> adiciona a sua função personalizada my_theme_enqueue_styles()<\/strong> no hook (gancho) dos wp_enqueue_scripts<\/strong><\/a> (link em inglês). Isso garante que a folha de estilo, ou stylesheet, será adicionada corretamente na fila (queue) de carregamento.<\/p>Como Fazer o Enqueue de Outras Stylesheets<\/strong><\/h3>Você também pode utilizar a função wp_enqueue_style()<\/strong> para incluir estilos adicionais sobre a stylesheet principal e colocá-los na fila. Por exemplo, é possível adicionar opções extras de estilo em um arquivo separado.<\/p>O código para aplicar essa função pode ser parcialmente reutilizado a partir do exemplo anterior, bastando então inserir alguns elementos extras. Confira o código abaixo:<\/p>
function my_theme_enqueue_styles() {\n\n wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );\n\n wp_enqueue_style('my-theme-extra-style', get_theme_file_uri('extra.css') );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/pre>Neste método, utilizamos a função get_theme_file_uri()<\/strong><\/a>, que retorna com a URL do arquivo no diretório do tema atual. Em nosso exemplo, trata-se do elemento extra.css<\/strong>. Desse modo, a função irá posicionar a stylesheet principal no primeiro lugar da queue e depois passará para os estilos extras adicionados à fila. <\/p>Como Carregar Stylesheets Externas nos Arquivos de um Site WordPress<\/strong><\/h3>Ainda é possível utilizar a função wp_enqueue_style()<\/strong> para fazer o enqueue de uma stylesheet a partir de uma fonte externa. O processo pode ser bastante útil caso você deseje utilizar fontes personalizadas ou uma folha de estilo que está hospedada em uma rede de distribuição de conteúdo (CDN).<\/p>O código também é bastante similar aos dos exemplos anteriores. Fique atento aos ajustes:<\/p>
function theme_files() { \n\n wp_enqueue_style('theme_custom', INSERIR URL'); \n\n} \n\nadd_action('wp_enqueue_scripts', 'theme_files');<\/pre>Lembre-se de substituir o elemento INSERIR URL<\/strong> pela URL real da stylesheet.<\/p>Como Adicionar Arquivos de Script no WordPress Usando a Função wp_enqueue_script<\/strong><\/h3>O WordPress possui uma função integrada, chamada wp_enqueue_script()<\/strong><\/a>, que permite que você faça o enqueueing de scripts JavaScript ou similares. Para fazer esse processo, adicione o código que está indicado abaixo no arquivo functions.php<\/strong> do seu tema:<\/p>function theme_scripts() {\n\n wp_enqueue_script( 'meu-script', get_template_directory_uri() . '\/js\/my-script.js', array(), '1.0', true );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'theme_scripts' );<\/pre>Note que esta função utiliza mais parâmetros do que os exemplos de enfileiramento apresentados anteriormente:<\/p>
\n- meu-script <\/strong>–<\/em> <\/strong>parâmetro que indica <\/strong>o nome do seu script. Você pode escolher o nome que desejar.<\/li>\n\n\n\n
- \/js\/my-script.js<\/strong> – se refere ao local em que está seu script. Nesse caso, nosso script de exemplo está no diretório js<\/strong> do tema WordPress.<\/li>\n\n\n\n
- array()<\/strong> – parâmetro que define as dependências que o seu script pode possuir.<\/li>\n\n\n\n
- 1.0 <\/strong>– refere-se ao número da versão da stylesheet. Em nosso exemplo, trata-se da primeira versão.<\/li>\n\n\n\n
- true<\/strong> – determina se o script deve ou não ser carregado no rodapé (true: verdadeiro\/sim e false: falso\/não).<\/li>\n<\/ul>
Exemplos Úteis de Usos da Função wp_enqueue_style<\/strong><\/h2>Nesta seção, você poderá conferir alguns casos práticos em que o uso da função wp_enqueue_style()<\/strong> pode melhorar a qualidade geral do seu site WordPress<\/strong><\/a>.<\/p>Carregando Estilos CSS Apenas em Páginas Específicas<\/strong><\/h3>Implementar códigos de estilo CSS (linguagem Cascading Style Sheet<\/em>) em páginas específicas de um site WordPress pode gerar diversos benefícios para os visitantes e para os administradores do site:<\/p>\n- Maior velocidade de carregamento das páginas <\/strong>– quando um site utiliza elementos CSS apenas em páginas onde eles são realmente necessários, ele evita a presença de códigos desnecessários em seus arquivos. Isso melhora a velocidade geral do site, fazendo com que as páginas carreguem mais rápido. <\/li>\n\n\n\n
- Manutenção facilitada<\/strong> – você pode alterar determinados elementos de estilo, através dos arquivos CSS, sem que isso afete as outras páginas do site. <\/li>\n<\/ul>
No exemplo ilustrado abaixo, vamos adicionar e carregar um código CSS à página de Entre em Contato<\/strong>. Para isso, vamos contar com a ajuda do hook WordPress wp_enqueue_scripts<\/strong> e da função is_page()<\/strong><\/a>:<\/p><?php\n\nadd_action('init', 'register_custom_styles');\n\nfunction register_custom_styles() {\n\n wp_register_style( 'design-personalizado', '\/wp-content\/design.css' );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts' );\n\nfunction conditionally_enqueue_styles_scripts() {\n\n if ( is_page('entreemcontato') ) {\n\n wp_enqueue_style( 'design-personalizado' );\n\n }\n\n}\n\n?><\/pre>Carregando um Arquivo CSS no Rodapé do Site <\/strong><\/h3>Ao mover o elemento de estilo CSS para o final da página do site, o navegador de um visitante tende a priorizar o carregamento do código HTML e de outros recursos importantes antes. Como resultado, colocar os códigos CSS no rodapé do site pode acelerar consideravelmente o carregamento da página. <\/p>
A melhor maneira de carregar o CSS no rodapé de um site é através do hook WordPress<\/strong><\/a> get_footer()<\/strong>.<\/p><?php\n\nfunction footer_style() {\n\n wp_enqueue_style('design-personalizado', '\/wp-content\/design.css');\n\n};\n\nadd_action( 'get_footer', 'footer_style' );\n\n?><\/pre>Entretanto, lembre-se de que adicionar elementos CSS no rodapé do site pode causar problemas de renderização, desconfigurando a página ou fazendo com que ela pareça quebrada. Por este motivo, recomendamos que você primeiro carregue as funções CSS mais importantes na seção do cabeçalho e depois passe para a parte do rodapé.<\/p>
Adicionando Estilos Inline Dinâmicos<\/strong><\/h3>Funções do CSS tipo inline<\/strong><\/a> <\/strong>e dinâmico permitem que você adicione estilos personalizados para elementos individuais em uma página na web. O método mais simples de fazer isso é através da função wp_add_inline_style()<\/strong><\/a>, que carrega os estilos a partir de um arquivo CSS específico.<\/p>No exemplo a seguir, vamos combinar ambas funções wp_enqueue_style() <\/strong>e wp_add_inline_style() <\/strong>para aplicar um estilo personalizado a partir do arquivo design.css <\/strong>e incluir cabeçalhos em negrito.<\/p>?php\n\nfunction theme_style() {\n\nwp_enqueue_style( 'estilo-personalizado', get_template_directory_uri() . '\/wp-content\/design.css' );\n\n$bold_headlines = get_theme_mod( 'headline-font-weight' ); \n\n$inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';\n\nwp_add_inline_style( 'estilo-personalizado', $inline_style );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'theme_style' );\n\n?><\/pre>Lembre-se de que o estilo inline irá funcionar apenas depois que o arquivo design.css <\/strong>for propriamente enqueued.<\/p>Verificando o Status da Stylesheet Enfileirada<\/strong><\/h3>Use a função wp_style_is()<\/strong><\/a> se você deseja obter mais informações sobre o estado da stylesheet que foi adicionada à queue. Essa função é capaz de verificar se o arquivo CSS de estilo está na fila, enfileirado, registrado ou já pronto para ser exibido (in the queue, enqueued, registered, ready to be displayed<\/em>).<\/p><?php\n\nfunction check_styles() {\n\nif( wp_style_is( 'main' ) {\n\nwp_enqueue_style( 'meu-tema', '\/custom-theme.css' );\n\n}\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'check_styles' );\n\n?><\/pre>Inserindo Metadados na Stylesheet<\/strong><\/h3>Você também pode utilizar a função wp_enqueue_style <\/strong>com o seguinte snippet de código para enqueue uma stylesheet CSS com metadados de título:<\/p><?php\n\nfunction theme_extra_styles() {\n\nwp_enqueue_style( 'add-metadata', '\/wp-content\/design.css' );\n\nwp_style_add_data( 'add-metadata', 'title', 'Meu Título Incrível' );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'theme_extra_styles' );\n\n?><\/pre>Neste exemplo, utilizamos a função wp_style_add_data()<\/strong><\/a> e então adicionamos um título à stylesheet CSS.<\/p>Cancelando o Registro de Arquivos de Estilo <\/strong><\/h3>É importante excluir o registro de arquivos de estilo CSS que você não utiliza mais. Quando múltiplos plugins ou temas enfileiram o mesmo arquivo de estilo, podem acabar gerando conflitos entre si e problemas de exibição no site.<\/p>
O código indicado abaixo faz o processo de excluir o registro e retirar da fila (deregister<\/em> e dequeue<\/em>) um estilo específico, substituindo-o com uma nova stylesheet:<\/p>add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );\n\nfunction remove_default_stylesheet() {\n\n wp_dequeue_style( 'original-enqueue-stylesheet-handle' );\n\n wp_deregister_style( 'original-register-stylesheet-handle' );\n\n wp_register_style( 'novo-estilo', get_stylesheet_directory_uri() . '\/new.css', false, '1.0.0' ); \n\n wp_enqueue_style( 'novo-estilo' );\n\n}<\/pre>\n<\/a><\/figure><\/div>Conclusão<\/strong><\/h2>A função wp_enqueue_style()<\/strong> é uma parte essencial do desenvolvimento de sites WordPress. Ela oferece uma maneira simples e eficiente para fazer o carregamento de stylesheets no seu site. <\/p>Neste tutorial, explicamos o que é e como funciona a função wp_enqueue_style()<\/strong>, além de apresentar alguns exemplos de como você pode utilizá-la para personalizar a aparência do site e melhorar a velocidade de carregamento das páginas.Esperamos que você tenha achado esse tutorial útil e que agora esteja pronto para utilizar a função wp_enqueue_style() <\/strong>em seus projetos WordPress com sucesso. Caso ainda possua alguma dúvida ou sugestão, confira nossa página de tutoriais sobre WordPress<\/strong><\/a> ou deixe um comentário na seção abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"Quando um usuário está desenvolvendo um plugin ou tema do WordPress, é essencial utilizar o método de enfileiramento (enqueue) de folhas de estilo (stylesheets) para que os elementos sejam carregados corretamente e na ordem certa. Para fazer isso, recomendamos utilizar a função wp_enqueue_style(). Trata-se de uma ferramenta poderosa para adicionar estilos personalizados no seu plugin […]<\/p>\n
<\/figure><\/div>Abaixo, ilustramos um exemplo do código com a função inserida no arquivo:<\/p>
function my_theme_enqueue_styles() {\n wp_enqueue_style( 'estilo_do_meu_tema', get_stylesheet_uri() );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );\n<\/pre>Nesse código, o elemento estilo_do_meu_tema<\/strong>, <\/strong>inserido dentro da função wp_enqueue_style(), representa um nome único para a folha de estilo que você está colocando na fila. Já a função get_stylesheet_uri()<\/strong><\/a> é a responsável por lidar com a URL do arquivo style.css <\/strong>do tema principal.<\/p>\n<\/figure><\/div>Depois, a função wp_enqueue_style() <\/strong>registra o estilo e o adiciona à fila. Por fim, a função add_action()<\/strong><\/a> adiciona a sua função personalizada my_theme_enqueue_styles()<\/strong> no hook (gancho) dos wp_enqueue_scripts<\/strong><\/a> (link em inglês). Isso garante que a folha de estilo, ou stylesheet, será adicionada corretamente na fila (queue) de carregamento.<\/p>Como Fazer o Enqueue de Outras Stylesheets<\/strong><\/h3>Você também pode utilizar a função wp_enqueue_style()<\/strong> para incluir estilos adicionais sobre a stylesheet principal e colocá-los na fila. Por exemplo, é possível adicionar opções extras de estilo em um arquivo separado.<\/p>O código para aplicar essa função pode ser parcialmente reutilizado a partir do exemplo anterior, bastando então inserir alguns elementos extras. Confira o código abaixo:<\/p>
function my_theme_enqueue_styles() {\n\n wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );\n\n wp_enqueue_style('my-theme-extra-style', get_theme_file_uri('extra.css') );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/pre>Neste método, utilizamos a função get_theme_file_uri()<\/strong><\/a>, que retorna com a URL do arquivo no diretório do tema atual. Em nosso exemplo, trata-se do elemento extra.css<\/strong>. Desse modo, a função irá posicionar a stylesheet principal no primeiro lugar da queue e depois passará para os estilos extras adicionados à fila. <\/p>Como Carregar Stylesheets Externas nos Arquivos de um Site WordPress<\/strong><\/h3>Ainda é possível utilizar a função wp_enqueue_style()<\/strong> para fazer o enqueue de uma stylesheet a partir de uma fonte externa. O processo pode ser bastante útil caso você deseje utilizar fontes personalizadas ou uma folha de estilo que está hospedada em uma rede de distribuição de conteúdo (CDN).<\/p>O código também é bastante similar aos dos exemplos anteriores. Fique atento aos ajustes:<\/p>
function theme_files() { \n\n wp_enqueue_style('theme_custom', INSERIR URL'); \n\n} \n\nadd_action('wp_enqueue_scripts', 'theme_files');<\/pre>Lembre-se de substituir o elemento INSERIR URL<\/strong> pela URL real da stylesheet.<\/p>Como Adicionar Arquivos de Script no WordPress Usando a Função wp_enqueue_script<\/strong><\/h3>O WordPress possui uma função integrada, chamada wp_enqueue_script()<\/strong><\/a>, que permite que você faça o enqueueing de scripts JavaScript ou similares. Para fazer esse processo, adicione o código que está indicado abaixo no arquivo functions.php<\/strong> do seu tema:<\/p>function theme_scripts() {\n\n wp_enqueue_script( 'meu-script', get_template_directory_uri() . '\/js\/my-script.js', array(), '1.0', true );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'theme_scripts' );<\/pre>Note que esta função utiliza mais parâmetros do que os exemplos de enfileiramento apresentados anteriormente:<\/p>
\n- meu-script <\/strong>–<\/em> <\/strong>parâmetro que indica <\/strong>o nome do seu script. Você pode escolher o nome que desejar.<\/li>\n\n\n\n
- \/js\/my-script.js<\/strong> – se refere ao local em que está seu script. Nesse caso, nosso script de exemplo está no diretório js<\/strong> do tema WordPress.<\/li>\n\n\n\n
- array()<\/strong> – parâmetro que define as dependências que o seu script pode possuir.<\/li>\n\n\n\n
- 1.0 <\/strong>– refere-se ao número da versão da stylesheet. Em nosso exemplo, trata-se da primeira versão.<\/li>\n\n\n\n
- true<\/strong> – determina se o script deve ou não ser carregado no rodapé (true: verdadeiro\/sim e false: falso\/não).<\/li>\n<\/ul>
Exemplos Úteis de Usos da Função wp_enqueue_style<\/strong><\/h2>Nesta seção, você poderá conferir alguns casos práticos em que o uso da função wp_enqueue_style()<\/strong> pode melhorar a qualidade geral do seu site WordPress<\/strong><\/a>.<\/p>Carregando Estilos CSS Apenas em Páginas Específicas<\/strong><\/h3>Implementar códigos de estilo CSS (linguagem Cascading Style Sheet<\/em>) em páginas específicas de um site WordPress pode gerar diversos benefícios para os visitantes e para os administradores do site:<\/p>\n- Maior velocidade de carregamento das páginas <\/strong>– quando um site utiliza elementos CSS apenas em páginas onde eles são realmente necessários, ele evita a presença de códigos desnecessários em seus arquivos. Isso melhora a velocidade geral do site, fazendo com que as páginas carreguem mais rápido. <\/li>\n\n\n\n
- Manutenção facilitada<\/strong> – você pode alterar determinados elementos de estilo, através dos arquivos CSS, sem que isso afete as outras páginas do site. <\/li>\n<\/ul>
No exemplo ilustrado abaixo, vamos adicionar e carregar um código CSS à página de Entre em Contato<\/strong>. Para isso, vamos contar com a ajuda do hook WordPress wp_enqueue_scripts<\/strong> e da função is_page()<\/strong><\/a>:<\/p><?php\n\nadd_action('init', 'register_custom_styles');\n\nfunction register_custom_styles() {\n\n wp_register_style( 'design-personalizado', '\/wp-content\/design.css' );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts' );\n\nfunction conditionally_enqueue_styles_scripts() {\n\n if ( is_page('entreemcontato') ) {\n\n wp_enqueue_style( 'design-personalizado' );\n\n }\n\n}\n\n?><\/pre>Carregando um Arquivo CSS no Rodapé do Site <\/strong><\/h3>Ao mover o elemento de estilo CSS para o final da página do site, o navegador de um visitante tende a priorizar o carregamento do código HTML e de outros recursos importantes antes. Como resultado, colocar os códigos CSS no rodapé do site pode acelerar consideravelmente o carregamento da página. <\/p>
A melhor maneira de carregar o CSS no rodapé de um site é através do hook WordPress<\/strong><\/a> get_footer()<\/strong>.<\/p><?php\n\nfunction footer_style() {\n\n wp_enqueue_style('design-personalizado', '\/wp-content\/design.css');\n\n};\n\nadd_action( 'get_footer', 'footer_style' );\n\n?><\/pre>Entretanto, lembre-se de que adicionar elementos CSS no rodapé do site pode causar problemas de renderização, desconfigurando a página ou fazendo com que ela pareça quebrada. Por este motivo, recomendamos que você primeiro carregue as funções CSS mais importantes na seção do cabeçalho e depois passe para a parte do rodapé.<\/p>
Adicionando Estilos Inline Dinâmicos<\/strong><\/h3>Funções do CSS tipo inline<\/strong><\/a> <\/strong>e dinâmico permitem que você adicione estilos personalizados para elementos individuais em uma página na web. O método mais simples de fazer isso é através da função wp_add_inline_style()<\/strong><\/a>, que carrega os estilos a partir de um arquivo CSS específico.<\/p>No exemplo a seguir, vamos combinar ambas funções wp_enqueue_style() <\/strong>e wp_add_inline_style() <\/strong>para aplicar um estilo personalizado a partir do arquivo design.css <\/strong>e incluir cabeçalhos em negrito.<\/p>?php\n\nfunction theme_style() {\n\nwp_enqueue_style( 'estilo-personalizado', get_template_directory_uri() . '\/wp-content\/design.css' );\n\n$bold_headlines = get_theme_mod( 'headline-font-weight' ); \n\n$inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';\n\nwp_add_inline_style( 'estilo-personalizado', $inline_style );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'theme_style' );\n\n?><\/pre>Lembre-se de que o estilo inline irá funcionar apenas depois que o arquivo design.css <\/strong>for propriamente enqueued.<\/p>Verificando o Status da Stylesheet Enfileirada<\/strong><\/h3>Use a função wp_style_is()<\/strong><\/a> se você deseja obter mais informações sobre o estado da stylesheet que foi adicionada à queue. Essa função é capaz de verificar se o arquivo CSS de estilo está na fila, enfileirado, registrado ou já pronto para ser exibido (in the queue, enqueued, registered, ready to be displayed<\/em>).<\/p><?php\n\nfunction check_styles() {\n\nif( wp_style_is( 'main' ) {\n\nwp_enqueue_style( 'meu-tema', '\/custom-theme.css' );\n\n}\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'check_styles' );\n\n?><\/pre>Inserindo Metadados na Stylesheet<\/strong><\/h3>Você também pode utilizar a função wp_enqueue_style <\/strong>com o seguinte snippet de código para enqueue uma stylesheet CSS com metadados de título:<\/p><?php\n\nfunction theme_extra_styles() {\n\nwp_enqueue_style( 'add-metadata', '\/wp-content\/design.css' );\n\nwp_style_add_data( 'add-metadata', 'title', 'Meu Título Incrível' );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'theme_extra_styles' );\n\n?><\/pre>Neste exemplo, utilizamos a função wp_style_add_data()<\/strong><\/a> e então adicionamos um título à stylesheet CSS.<\/p>Cancelando o Registro de Arquivos de Estilo <\/strong><\/h3>É importante excluir o registro de arquivos de estilo CSS que você não utiliza mais. Quando múltiplos plugins ou temas enfileiram o mesmo arquivo de estilo, podem acabar gerando conflitos entre si e problemas de exibição no site.<\/p>
O código indicado abaixo faz o processo de excluir o registro e retirar da fila (deregister<\/em> e dequeue<\/em>) um estilo específico, substituindo-o com uma nova stylesheet:<\/p>add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );\n\nfunction remove_default_stylesheet() {\n\n wp_dequeue_style( 'original-enqueue-stylesheet-handle' );\n\n wp_deregister_style( 'original-register-stylesheet-handle' );\n\n wp_register_style( 'novo-estilo', get_stylesheet_directory_uri() . '\/new.css', false, '1.0.0' ); \n\n wp_enqueue_style( 'novo-estilo' );\n\n}<\/pre>\n<\/a><\/figure><\/div>Conclusão<\/strong><\/h2>A função wp_enqueue_style()<\/strong> é uma parte essencial do desenvolvimento de sites WordPress. Ela oferece uma maneira simples e eficiente para fazer o carregamento de stylesheets no seu site. <\/p>Neste tutorial, explicamos o que é e como funciona a função wp_enqueue_style()<\/strong>, além de apresentar alguns exemplos de como você pode utilizá-la para personalizar a aparência do site e melhorar a velocidade de carregamento das páginas.Esperamos que você tenha achado esse tutorial útil e que agora esteja pronto para utilizar a função wp_enqueue_style() <\/strong>em seus projetos WordPress com sucesso. Caso ainda possua alguma dúvida ou sugestão, confira nossa página de tutoriais sobre WordPress<\/strong><\/a> ou deixe um comentário na seção abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"Quando um usuário está desenvolvendo um plugin ou tema do WordPress, é essencial utilizar o método de enfileiramento (enqueue) de folhas de estilo (stylesheets) para que os elementos sejam carregados corretamente e na ordem certa. Para fazer isso, recomendamos utilizar a função wp_enqueue_style(). Trata-se de uma ferramenta poderosa para adicionar estilos personalizados no seu plugin […]<\/p>\n