{"id":233812,"date":"2023-02-22T18:50:00","date_gmt":"2023-02-22T15:50:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233812"},"modified":"2022-11-11T12:34:13","modified_gmt":"2022-11-11T09:34:13","slug":"tudo-sobre-como-adicionar-estilos-e-scripts-no-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/tudo-sobre-como-adicionar-estilos-e-scripts-no-wordpress\/","title":{"rendered":"Tudo sobre como adicionar estilos e scripts no WordPress"},"content":{"rendered":"\n

O WordPress oferece v\u00e1rios m\u00e9todos para adicionar estilos e scripts para frontend e admin, tanto para adicionar arquivos quanto para gerar vari\u00e1veis\/sa\u00eddas diretas. Este post entra em detalhes com exemplos de c\u00f3digo de como adicionar scripts e estilos ao WordPress da maneira correta.<\/p>\n

Scripts e estilos podem ser registrados e enfileirados definindo identificadores exclusivos (IDs semelhantes a slugs), possibilitando que o WordPress elimine duplicatas, como v\u00e1rias bibliotecas jQuery, e lide com depend\u00eancias (qual estilo ou script carregar antes disso e daquilo) .<\/p>\n

Se n\u00e3o houver necessidade espec\u00edfica de registrar estilos ou scripts, voc\u00ea pode simplesmente enfileirar-los imediatamente, pulando o registro. Tamb\u00e9m \u00e9 poss\u00edvel cancelar o registro ou desenfileirar estilos e scripts (wp_dequeue_script<\/code>e wp_dequeue_style<\/code>) consultando o identificador. Geralmente ajuda a adicionar um n\u00famero maior na prioridade do gancho (fazendo com que ele seja executado ap\u00f3s o gancho onde os itens foram enfileirados).<\/p>\n

PS: A adi\u00e7\u00e3o de estilos e scripts ao Gutenberg (blocos de administra\u00e7\u00e3o e frontend), \u00e9 explicado no meu post Gutenberg: The Basics<\/a>.<\/p>\n

Adicionando scripts e estilos ao frontend<\/h2>\n

Para adicionar estilos e scripts apenas ao frontend, use o hook wp_enqueue_scripts<\/code>. Apesar do nome do gancho, ele \u00e9 usado tanto para scripts quanto para estilos. Aqui est\u00e1 um exemplo de enfileiramento de uma folha de estilo e um arquivo javascript em um tema:<\/p>\n

add_action('wp_enqueue_scripts', function() {\n    \/\/ Styles\n    wp_enqueue_style('main-style', get_stylesheet_directory_uri().'\/style.css', [], '1.0');\n\u00a0\n    \/\/ Scripts\n    wp_enqueue_script('main-script', get_stylesheet_directory_uri().'\/assets\/js\/main.js', ['jquery'], '', true);\n});<\/code><\/pre>\n
O terceiro argumento para estilos e scripts \u00e9 um array com depend\u00eancias. Por exemplo, para scripts, voc\u00ea pode querer carregar a biblioteca jQuery antes do arquivo de script. Nota<\/strong>: As instala\u00e7\u00f5es do WordPress v\u00eam com v\u00e1rias bibliotecas de script comuns inclu\u00eddas (por exemplo, jQuery, jQuery UI, Backbone e Underscore). Contanto que voc\u00ea adicione qualquer um desses identificadores<\/a> como depend\u00eancia em seu enqueue_script, o WordPress os enfileirar\u00e1, para que voc\u00ea n\u00e3o precise adicionar seus pr\u00f3prios arquivos para essas bibliotecas.<\/p>\n
O quinto argumento para scripts \u00e9 se o script deve ou n\u00e3o ser carregado no final de <body><\/code>(no rodap\u00e9), em vez de dentro da <head><\/code>tag.<\/p>\n
Para uso em um plugin, voc\u00ea precisa usar outros m\u00e9todos para obter a URL de um arquivo local, por exemplo plugin_dir_url(__FILE__)<\/code>.<\/p>\n
Adicionando scripts e estilos ao administrador<\/h2>\n
O WordPress oferece outro gancho, admin_enqueue_scripts<\/code>, para adicionar estilos e scripts apenas ao administrador. Use os mesmos m\u00e9todos acima para registrar, enfileirar e localizar scripts e estilos:<\/p>\n
add_action('admin_enqueue_scripts', function() {\n    global $pagenow, $post_type;\n    \/\/ Example: $hook == 'edit.php'\n    \/\/ Example: $post_type == 'post'\n    \/\/ wp_enqueue_style or wp_enqueue_script\n});<\/code><\/pre>\n
Adicionando scripts e estilos \u00e0 p\u00e1gina de login<\/h2>\n
Como nenhum dos ganchos acima aparece na tela de login do administrador, o WordPress oferece um gancho separado para essa finalidade, login_enqueue_scripts<\/code>.<\/p>\n
add_action('login_enqueue_scripts', function() {\n    \/\/ wp_enqueue_style or wp_enqueue_script\n});<\/code><\/pre>\n
Como gerar vari\u00e1veis \u200b\u200bJavascript<\/h2>\n
Para gerar vari\u00e1veis \u200b\u200bJavascript (por exemplo, obter caminhos, strings traduzidas ou outras vari\u00e1veis, voc\u00ea pode usar wp_localize_script. Esta fun\u00e7\u00e3o requer um identificador de script enfileirado. O segundo par\u00e2metro seria o nome da vari\u00e1vel e o terceiro seu valor. O valor pode ser um array, assim :<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    \/\/ wp_enqueue_script('main-script');  \/\/ Must exist!\n    $variable_to_js = [\n        'ajax_url' => admin_url('admin-ajax.php')\n    ];\n    wp_localize_script('main-script', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\n
Dentro do seu script voc\u00ea tem acesso \u00e0s vari\u00e1veis \u200b\u200bpassadas, assim:<\/p>\n
jQuery(document).ready(function($) { \n    console.log(Theme_Variables.ajax_url);\n});<\/code><\/pre>\n
Neste gancho voc\u00ea pode acessar vari\u00e1veis \u200b\u200bglobais $pagenow<\/code>e $post_type<\/code>especificar onde deseja enfileirar seus estilos e scripts.<\/p>\n
Sa\u00edda de estilos embutidos<\/h2>\n
Se voc\u00ea precisar produzir estilos embutidos, por exemplo, para vari\u00e1veis \u200b\u200bde tema que voc\u00ea configurou no Personalizador (por exemplo, usando get_theme_mod<\/code>), voc\u00ea pode produzir esses estilos usando a wp_add_inline_style<\/code>fun\u00e7\u00e3o. Ele funciona de maneira bastante semelhante \u00e0 sa\u00edda de vari\u00e1veis \u200b\u200bJavascript, nas quais voc\u00ea precisa fornecer um identificador de estilo enfileirado:<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    \/\/ wp_enqueue_style('main-style');  \/\/ Must exist!\n\u00a0\n    $color = get_theme_mod('my-custom-color');  \/\/ e.g. #FF0000\n    $custom_css = \"\n        body {\n            background: {$color};\n        }\";\n        wp_add_inline_style('main-style', $custom_css);\n});<\/code><\/pre>\n
Adicionando tags ass\u00edncronas a scripts<\/h2>\n
Infelizmente, n\u00e3o h\u00e1 fun\u00e7\u00e3o direta ou filtro para adicionar async<\/code>\u00e0s suas tags de script, mas podemos conseguir isso manipulando a string que o WordPress usa para gerar as tags de script para todos os scripts enfileirados, assim (lembre-se de especificar seu script por seu identificador):<\/p>\n
add_filter('script_loader_tag', function($tag, $handle, $src) {\n    if ('main-script' != $handle) {\n        return $tag;\n    }\n    return str_replace('<script', '<script async', $tag);\n}, 11, 3);<\/code><\/pre>\n
Links \u00fateis de documenta\u00e7\u00e3o<\/h2>\n