Se voc\u00ea \u00e9 um desenvolvedor WordPress, j\u00e1 ouviu falar de palavras como wp_enqueue_script, wp_enqueue_style e wp_enqueue_scripts. Esses s\u00e3o os m\u00e9todos que devemos usar para incluir JavaScript e CSS no WordPress.<\/p>\n
Quando se trata de WordPress, n\u00e3o se deve usar script e tags de link para adicionar arquivos JavaScript e CSS.<\/p>\n
Para um site, \u00e9 comum usar diferentes tipos de efeitos, anima\u00e7\u00f5es para melhorar a experi\u00eancia do usu\u00e1rio. Existem muitos plug-ins prontos dispon\u00edveis na internet que nos permitem adicionar controles deslizantes, formul\u00e1rios de contato, carrossel etc. Quando usamos esses recursos externos, precisamos usar os arquivos JS e CSS fornecidos por eles. Ao usar os m\u00e9todos fornecidos pelo WordPress, podemos controlar as p\u00e1ginas nas quais esses plug-ins podem ser usados \u200b\u200bapenas. Por exemplo, se estivermos exibindo o controle deslizante na p\u00e1gina inicial, n\u00e3o h\u00e1 necessidade de incluir os arquivos JS e CSS do controle deslizante em outra p\u00e1gina. \u00c9 sempre uma boa pr\u00e1tica incluir JS e CSS apenas quando necess\u00e1rio. Essa \u00e9 uma boa pr\u00e1tica usada para melhorar o desempenho do site e fazer com que ele carregue mais r\u00e1pido.<\/p>\n
Vamos supor que temos os arquivos custom.js e custom.css que precisam ser adicionados ao nosso site. Para isso, precisamos colocar o c\u00f3digo abaixo.<\/p>\n
add_action('wp_enqueue_scripts', 'include_js_css');\nfunction include_js_css() {\n\u00a0\u00a0\u00a0\u00a0wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true);\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('my-custom-script');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_register_style( \"my-custom-style\", get_stylesheet_directory_uri(). \"\/css\/custom.css\", array(), false, \"all\" );\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_style( \"my-custom-style\" );\n}<\/code><\/pre>\nNota<\/strong>: O terceiro par\u00e2metro na fun\u00e7\u00e3o wp_register_script. Passamos array (‘jquery’), o que significa que nosso custom.js depende do arquivo jquery.js. Voc\u00ea pode criar um array emapy aqui se o seu script n\u00e3o tiver depend\u00eancias.<\/p>\nO \u00faltimo par\u00e2metro \u00e9 definido como verdadeiro, o que significa incluir o arquivo custom.js em um rodap\u00e9 (antes do final da tag body).<\/p>\n
Explica\u00e7\u00e3o dos par\u00e2metros para a fun\u00e7\u00e3o wp_register_script ()<\/h3>\n
$ handle<\/strong> (obrigat\u00f3rio): nome do script. Deve ser \u00fanico.
\n$ src<\/strong> (obrigat\u00f3rio): URL completo do script ou caminho do script relativo ao diret\u00f3rio raiz do WordPress.
\n$ deps<\/strong> (Opcional): Uma matriz de script registrado que manipula este script depende.
\nValor padr\u00e3o: array ()
\n$ ver<\/strong> (Opcional): String que especifica o n\u00famero da vers\u00e3o do script, se houver, que \u00e9 adicionado ao URL como uma string de consulta para fins de impedimento de cache. Se a vers\u00e3o for definida como falsa, um n\u00famero de vers\u00e3o \u00e9 adicionado automaticamente igual \u00e0 vers\u00e3o atual instalada do WordPress. Se definido como nulo, nenhuma vers\u00e3o ser\u00e1 adicionada. O valor padr\u00e3o \u00e9 false
\n$ in_footer<\/strong> (Opcional): Se o script deve ser enfileirado antes do fechamento da tag do corpo em vez de no cabe\u00e7alho. Padr\u00e3o ‘falso’.<\/p>\nExplica\u00e7\u00e3o dos par\u00e2metros para a fun\u00e7\u00e3o wp_register_style ()<\/h3>\n
$ handle<\/strong> (obrigat\u00f3rio): nome da folha de estilo. Deve ser \u00fanico.
\n$ src<\/strong> (obrigat\u00f3rio): URL completo da folha de estilo ou caminho da folha de estilo relativo ao diret\u00f3rio raiz do WordPress.
\n$ deps<\/strong> (Opcional): Uma matriz de manipuladores de folha de estilo registrados depende desta folha de estilo.
\nValor padr\u00e3o: array ()
\n$ ver<\/strong> (Opcional): String que especifica o n\u00famero da vers\u00e3o da folha de estilo, se houver, que \u00e9 adicionado ao URL como uma string de consulta para fins de impedimento de cache. Se a vers\u00e3o for definida como falsa, um n\u00famero de vers\u00e3o ser\u00e1 adicionado automaticamente igual \u00e0 vers\u00e3o atual instalada do WordPress. Se definido como nulo, nenhuma vers\u00e3o ser\u00e1 adicionada. Valor padr\u00e3o: false
\n$ media<\/strong>(Opcional): A m\u00eddia para a qual esta folha de estilo foi definida. Aceita tipos de m\u00eddia como ‘todos’, ‘imprimir’ e ‘tela’, ou consultas de m\u00eddia como ‘(orienta\u00e7\u00e3o: retrato)’ e ‘(largura m\u00e1xima: 640px)’. Valor padr\u00e3o: ‘all’.<\/p>\n\u00c9 tudo sobre como incluir JavaScript e CSS no WordPress. Se voc\u00ea tiver alguma d\u00favida ou sugest\u00e3o, deixe coment\u00e1rios abaixo.<\/p>\n