O método mais eficaz para adicionar scripts embutidos no WordPress

Publicados: 2022-06-16

Scripts embutidos são duas palavras simples que causam arrepios na espinha dos desenvolvedores. Scripts embutidos são uma maneira fácil de adicionar JavaScript (JS), CSS e HTML no texto do seu post do WordPress. Embora eles possam ser usados para muitos propósitos, um uso geral é fazer alterações em tempo real quando você publica um novo artigo do WordPress. Alguns podem argumentar que não é necessário, mas isso garantirá que seu site funcione sem problemas e com eficiência.

Uma coisa que a maioria dos usuários do WordPress ignora é complementar os scripts em seus sites. Se você deseja implementar um texto embutido em uma única página ou em todo o seu site, há muitas maneiras de fazer isso com o WordPress. Adicionar scripts inline ao seu site WordPress pode ser tão simples assim que você entender os métodos adequados para fazê-lo corretamente. Esta postagem do blog discutirá as maneiras mais eficazes de adicionar scripts embutidos no WordPress com facilidade. Continue lendo para aprender mais.

Adicionando via Wp_print_scripts

Se você deseja adicionar textos inline do WordPress, a função wp_print_scripts ou/e admin_print_scripts do WordPress é sua resposta. O WordPress wp_print_scripts pode exibir tags de texto no cabeçalho de um documento, o que normalmente é feito ao incluir arquivos JS ou CSS. Esta função do WordPress permitirá que você torne seu site mais interativo ou adicione novas funcionalidades. Como em qualquer função do WordPress, existem algumas regras simples a serem seguidas antes de usá-la em seu site.

Esta função estabelece três variáveis com base nas opções do plugin WordPress e as exibe no front-end (a seção head) usando o gancho admin_print_scripts. Para adicionar os caracteres sequenciais à área Admin, você também pode substituir wp_print_scripts pela função admin_print_scripts e chamá-la de day.

Quando o WordPress é instalado pela primeira vez, ele vem com muitos textos que são adicionados automaticamente ao site. Isso pode levar a um aumento no tempo de carregamento e no uso da CPU em seu servidor. Uma maneira de combater isso é usando a função wp_print_scripts, então você só carrega textos quando eles são necessários ou desejados. Dito isso, vamos dar uma olhada rápida em alguns prós e contras de usar a função wp_print_script para adicionar caracteres inline em sua postagem do WordPress:

Prós:

É sempre fácil adicionar qualquer texto inline à “seção principal” das páginas do WordPress;
O código que você adicionar não terá nenhuma restrição, o que significa que você pode adicionar variáveis JS, funções, métodos, condicionais ou qualquer coisa que você queira adicionar ao seu site.

Contras:

Não há uma maneira específica de associar seu código adicionado a scripts registrados;
Na maioria dos casos, o código de saída em vários fatores pode não ser uma maneira real e consistente de controlar a localização do código de saída. No entanto, você sempre pode utilizar o parâmetro <priority> em <add_action> para controlar a localização do seu código adicionado.

Use a função wp_add_inline_script()

Recentemente, o WordPress lançou uma nova função aplicada para adicionar JavaScript inline às postagens do WordPress. No entanto, essa nova integração é compatível, começando com a versão 4.5 do WordPress, e é uma maneira mais proeminente de adicionar textos inline em comparação com outras opções disponíveis. Estamos definindo a função wp_add_inline_script() e você espera que ela faça o trabalho perfeitamente. Mesmo o desenvolvedor WordPress mais experiente pode confirmar esse fato.

A função wp_add_inline_script() é uma maneira de adicionar caracteres inline ao seu site sem editar nenhum código na página do WordPress. Isso permite que você faça alterações em tempo real sem precisar de acesso FTP ou ter que usar um plug-in. Essa função também é uma das integrações essenciais que você pode usar para personalizar seu site WordPress. O procedimento permite que você adicione textos inline dentro do código do seu site, o que significa que eles serão adicionados diretamente nas tags HTML da sua página. Isso permite muito mais personalização do que usar arquivos JS externos ou links para outros sites.

Prós:

A função wp_add_inline_script() é uma maneira valiosa de adicionar caracteres inline ao seu blog WordPress;
Pode ser uma maneira fácil e conveniente para os desenvolvedores adicionarem código JS sem alterar o tema do WordPress ou os arquivos de plug-in ou editar o arquivo de modelo header.php;
Isso pode ser útil para adicionar scripts como o código do Google Analytics. Isso evita que você edite o arquivo header.php sempre que houver uma atualização com os recursos ou configurações do Google Analytics.

Contras:

A única desvantagem da função wp_add_inline_script() é que ela só está disponível a partir da versão 4.5 do WordPress.

Use a função wp_localize_script()

A função wp_localize_script() é um utilitário útil do WordPress para adicionar caracteres inline a páginas individuais em seu site WordPress. É perfeito se você precisar de funcionalidades rápidas e temporárias em seus sites, como um evento ou promoção. Esta função aceita um número variável de argumentos e gera uma lista de strings JS adicionadas ao cabeçalho do documento. Fazer isso pode ser útil se, por exemplo, você estiver usando jQuery e quiser o código do script apenas em determinadas páginas.

Wp_localize_script() enfileira seu arquivo JS e fornece a ele um ID/identificador de “shapeSpace_script”, que define um array associativo que contém suas variáveis. Por fim, essas variáveis JS são passadas para wp_localize_script() para serem incluídas em linha com o shapeSpace_script registrado. Como resultado, permite aplicar qualquer variável JS como shapeSpace.varl, entre outras. Esta função é dedicada à localização de variáveis JS para uso com tradução e internacionalização de idiomas. No entanto, a maioria dos desenvolvedores do WordPress o usa como uma maneira comum de adicionar caracteres inline aos seus sites.

Prós:

Wp_localize_script() habilita a associação “read:require” com seu script registrado existente. Isso significa que ele fornece uma maneira excelente e consistente de controlar a localização relativa da saída de texto personalizada do seu site.

Contras:

A única desvantagem é que você só pode adicionar variáveis JS ( var = 'value' ). Portanto, é impossível adicionar outros scripts inline como funções, condicionais, equações, entre outros, usando wp_localize_script().

Usar fallback

Como mencionado anteriormente, métodos específicos como wp_add_inline_script() estão disponíveis apenas a partir da versão 4.5 do WordPress ou superior. No entanto, juntando tudo, você pode criar um método à prova de falhas de adicionar caracteres inline aos seus arquivos do WordPress, independentemente da versão do WordPress que estiver usando. A maneira mais eficaz de fazer isso é por meio de três funções no plug-in de postagem da seção principal (front-end).

A primeira coisa essencial a fazer é enfileirar seu arquivo JS e chamar a função a seguir para adicionar linhas inline através da função wp_add_inline_script(). A terceira função é o fallback para qualquer coisa mais antiga que a versão 4.5. Isso, sem dúvida, funcionará no WordPress 4.5 e em qualquer versão distinta. É aqui que a verdadeira magia acontece. Você pode prosseguir com o método de fallback que fará seu trabalho na variante do WordPress de sua escolha voltando para 2.1 ou qualquer outra coisa.

Prós:

Você pode ter vários arquivos JS em seu site sem adicionar solicitações HTTP adicionais para carregá-los de uma só vez. Isso significa que você poderá reduzir o tempo de carregamento dos visitantes do seu site.
Se um script falhar, outros scripts dentro da mesma funcionalidade de fallback ainda funcionarão porque estão sendo carregados de forma assíncrona de diferentes threads devido à dependência entre eles.

Contras:

Quando o script falha, o usuário verá um espaço vazio em vez do código em alguns casos. Isso pode parecer que não é grande coisa, mas é uma coisa crucial a ser observada como desenvolvedor do WordPress.

Uma recapitulação sobre como adicionar scripts embutidos no WordPress

A limitação de técnicas alternativas disponíveis à sua disposição torna a função wp_add_inline_script() o método superior para adicionar caracteres inline do WordPress. Esta é considerada a solução mais eficaz hoje em dia e, ao contrário da crença popular, esta função pode ser utilizada em qualquer versão do WordPress se você usar a técnica de fallback. Para sua informação, abaixo está uma rápida recapitulação das maneiras mais eficazes de adicionar scripts inline no núcleo do WordPress:

wp_add_inline_script() permite adicionar qualquer código JS a qualquer script registrado;
wp_print_scripts ou admin_print_scripts permite que você instale qualquer código no front-end ou na seção de cabeçalho;

wp_localize_script() também permite adicionar variáveis JS a qualquer script registrado;
Fallback permite que você crie uma técnica completa que funciona precisamente com qualquer versão do WordPress.

Nota: Se você deseja adicionar estilo/CSS inline em vez de JavaScript, o WordPress fornece um conjunto de funções “adicionar estilo” que se assemelham às usadas para adicionar scripts. Por exemplo, confira wp_print_styles e wp_add_inline_styles.

Conclusão

Os scripts embutidos são uma maneira rápida e fácil de adicionar funcionalidades ao seu site WordPress. Ao escrever o script em JavaScript, você pode criar um script embutido que faça o que você quiser na página sem exigir plugins ou códigos adicionais. Este tutorial descreve os métodos mais eficazes para adicionar scripts embutidos no WordPress.

Você é um editor do WordPress com alguma experiência em adicionar scripts a sites WP? Qual método você recomendaria para um desenvolvedor iniciante que deseja fazer o trabalho rapidamente? Sinta-se à vontade para usar a seção de comentários para compartilhar sua opinião e fazer perguntas preocupantes.

Biografia do autor:

Arthur é especialista em marketing digital e blogueiro de negócios. Ele desenvolve startups interessantes através de várias mídias sociais e compartilha sua experiência com clientes para melhor promover seus negócios. Nas horas vagas, Arthur estuda japonês e escreve artigos sobre tendências de transformação digital.