Javascript do WordPress: um guia para iniciantes

Se você perguntar a um milhão de desenvolvedores da web o que é JavaScript, receberá um milhão de respostas diferentes. Quase tudo que é interativo na web é feito usando JavaScript.

Como um sistema de gerenciamento de conteúdo (CMS) moderno, o WordPress e muitos de seus plug-ins contam parcialmente com JavaScript para fazer o trabalho. Ao contrário do que possa parecer, JavaScript não tem relação com a linguagem de programação Java. É chamado assim apenas para fins de marketing.

Vamos mergulhar em tudo que você precisa saber para aproveitar o poder combinado de JavaScript e WordPress.

O que é JavaScript?

Há muito tempo, a Internet dependia exclusivamente de HTML e CSS. Essa combinação permite um estilo muito básico de conteúdo. No entanto, muito pouco poderia ser feito para tornar o conteúdo dinâmico e criar aplicativos da web estava fora de questão.

Como a manutenção dos servidores era muito mais cara, os desenvolvedores decidiram escrever JavaScript para operar na máquina cliente. Escrito de maneira semelhante a outras linguagens de programação funcionais, o JavaScript pode transformar dados em funções, processá-los e produzir dados.

Os navegadores da Web têm um mecanismo JavaScript que sabe como executar o código JavaScript. Por exemplo, o mecanismo de JavaScript no Chrome é v8, enquanto o mecanismo de JavaScript do FireFox é SpiderMonkey. Por esse motivo, o Javascript depende de navegadores para “entender” como interpretar, tratar e manipular a exibição de dados.

Os aspectos técnicos do JavaScript

Interessado em saber mais sobre a tecnologia por trás do JavaScript? Existem alguns diferenciadores importantes a saber para aqueles que têm experiência em outros tipos de desenvolvimento. Primeiro, o JavaScript é independente de tipo, como o PHP. Isso significa que suas variáveis ​​não têm um tipo definido e qualquer variável pode ser atribuída a quase qualquer tipo de valor.

A maioria das linguagens modernas é “orientada a objetos”, o que significa que contam com “classes” reutilizáveis ​​que representam um objeto literal. O mais próximo que o JavaScript chega disso é por meio de “protótipos”. Essas estruturas de dados podem ser reutilizadas e podem conter certos valores, mas sua funcionalidade e usabilidade são muito mais limitadas do que as linguagens construídas em torno do conceito orientado a objetos, como Java.

O que o JavaScript faz?

Devido ao enorme apoio da comunidade e ao investimento de grandes empresas como o Facebook e até mesmo a Netflix, o JavaScript pode fazer muito mais do que operar em navegadores da web. JavaScript pode fazer algo tão simples como pegar o ano atual para exibir ao lado do símbolo de copyright em um site da Web e um trabalho mais complexo, como fazer a maior parte do processamento para um editor de imagens online.

Em suma, o JavaScript faz quase tudo o que o desenvolvedor deseja que ele faça na máquina do cliente. O JavaScript armazena em cache localmente na máquina cliente quando o cliente visita um site que o usa.

Embora os dados confidenciais devam ser tratados no servidor, muitos aplicativos baseados na web utilizam fortemente o JavaScript para aproveitar o poder de processamento da máquina cliente. Agora que estamos na era de “estruturas” infinitas que tornam o desenvolvimento de vários tipos de conteúdo muito mais rápido, as possibilidades são infinitas.

O JavaScript é seguro?

Como a maioria dos protocolos e linguagens mais antigas, o JavaScript não foi construído inicialmente com a segurança em mente. Isso é perfeitamente razoável para se perguntar, considerando o quão prevalentes os ataques cibernéticos se tornaram.

Existem extensões de navegador como “NoScript” que simplesmente bloqueiam a execução de todo o código JavaScript. Contanto que você siga a regra geral da web e não visite sites não confiáveis, não há problema em permitir a execução de JavaScript.

Por ser uma linguagem de programação, é claro que usuários mal-intencionados podem abusar dela para atacar seu computador. Os navegadores modernos detectarão automaticamente a maioria desses ataques. Se você está preocupado com a segurança do WordPress JavaScript, pode ficar tranquilo com um plug-in de segurança do WordPress que coloca a maioria dos aspectos da segurança do site no piloto automático.

Dois principais tipos de ataque de JavaScript

O ditado “mantenha seus amigos por perto e seus inimigos mais perto” é pertinente quando se trata de desenvolvimento e segurança. É muito importante entender como os bandidos tiram proveito do JavaScript para que você possa frustrar seus esforços!

Cross Site Scripting (XSS)

Cross-site scripting (XSS) é um tipo de ataque de malware executado explorando vulnerabilidades entre sites em qualquer site WordPress. Na verdade, é a maneira mais comum de sites do WordPress serem hackeados porque há muitos plug-ins do WordPress com vulnerabilidades de XSS.

Um ataque de script entre sites é usado se uma página permite que dados sejam enviados nela. Nesse ataque, o usuário mal-intencionado coloca o código JavaScript nos dados a serem enviados em uma página acessível ao público.

Se nenhuma medida de mitigação estiver em vigor, esse código malicioso realmente executa o código JavaScript no computador de qualquer pessoa que visite essa página. É por isso que é importante “higienizar” a entrada. Isso significa que, antes de ser publicado, você remove coisas como colchetes e aspas que tornariam o código inútil.

Cross Site Request Forgery (CSRF)

Esse tipo de ataque tira proveito de páginas da Web nas quais você já pode estar conectado. O cenário mais comum envolveria você estar conectado ao seu banco.

Digamos que você esteja conectado à sua conta bancária, mas decida entrar em um site de torrent que tenha CSRF pronto para uso. O CSRF, na ausência de atenuações do navegador, adota o padrão de link para fazer coisas como transferências bancárias para todos os grandes bancos e, em seguida, as executa em sua máquina em segundo plano.

Um cenário que realmente aconteceu com um grande site e um grande banco foi que o link do banco para transferir dinheiro se parecia com: www.bankwithbadsecurity.com/transfer&amount=1000&toAccount=12345 para transferir $ 1.000 para uma conta de número 12345 .

Para o banco, parece que você a solicitou e, como a solicitação viria do seu endereço IP, é difícil provar que você não a iniciou. Felizmente, a maioria dos navegadores modernos detecta e evita isso automaticamente.

Posso usar JavaScript dentro do WordPress?

Sim, você pode usar JavaScript ao desenvolver para WordPress. Lembre-se de que o WordPress é um sistema de gerenciamento de conteúdo flexível que possui dois modos de edição. Um deles permite que você edite o código diretamente, e o outro permite que você use um editor semelhante ao que você pode ver em um processador de texto, também conhecido como editor “WYSIWYG”. Na versão mais recente do WordPress, o editor WYSIWYG é chamado Gutenberg.

Lembre-se de que você também pode usar JavaScript ao desenvolver extensões para WordPress. Enquanto o lado do servidor do WordPress é PHP, o lado do cliente é quase 100% do tempo JavaScript.

Devo aprender JavaScript para WordPress?

A resposta a essas perguntas depende do que você pretende fazer com o WordPress. Se você deseja apenas algumas páginas estáticas geradas usando a plataforma, provavelmente não terá problemas sem aprender JavaScript.

Por outro lado, é muito fácil começar a usar o JavaScript, e você também aprenderá muito sobre como o HTML e o CSS funcionam. No entanto, além do treinamento em WordPress, você vai querer trabalhar no aprendizado de JavaScript se quiser fazer um site dinâmico e memorável.

Um aviso rápido: se você é um desenvolvedor web iniciante, não espere dominar o JavaScript em questão de dias. JavaScript é conhecido por ter mensagens de erro muito vagas e é frequentemente criticado por ser um “código espaguete”. Isso significa que, ao longo dos anos, os desenvolvedores acumularam muitos códigos sem organizá-los adequadamente. Além disso, a maioria dos desenvolvedores aprende a programar em estruturas que usam JavaScript, mas são sintaticamente um pouco diferentes.

Você deve investir tempo especialmente no aprendizado de JavaScript se for um freelancer ou uma agência que gerencia sites de clientes. Embora existam ferramentas de primeira linha que permitem que você gerencie vários sites WordPress, nenhum plug-in pode fazer os sites para você!

Além disso, se você deseja ser um desenvolvedor da web, aprender JavaScript é benéfico para estas carreiras:

• Desenvolvedor front-end
• Desenvolvedor de back-end
• Desenvolvedor Full-stack

Além disso, aprender JavaScript, junto com HTML, CSS e PHP mais avançados, serve como uma base WP sólida que provavelmente reduzirá seus custos indiretos. Você não precisará mais pagar contratados externos, prejudicando seus resultados financeiros, para realizar tarefas que, na realidade, podem levar minutos para serem concluídas. Depois de dominar o JavaScript, você pode passar para estruturas populares, como React e Angular, para criar aplicativos realmente únicos e responsivos dentro do WordPress.

Como faço para escrever JavaScript ao codificar no WordPress?

Mesmo que adicionar JavaScript a um site WordPress não seja tão simples quanto adicionar CSS e HTML, não demorará muito para começar. Existem duas maneiras diferentes de abordá-lo e cada uma tem um propósito diferente.

Método 1: em todas as páginas

Se você deseja executar o mesmo script em todas as páginas do seu site WordPress, adicionar o código manualmente a cada página seria muito tedioso, para dizer o mínimo. O local adequado para inserir JavaScript no HTML é no cabeçalho e rodapé da página.

Existem alguns plug-ins gratuitos que pegam seu JavaScript personalizado e o colocam no cabeçalho e / ou rodapé de cada página do seu site WordPress. Os administradores do WordPress adoram esses plug-ins porque eles funcionam perfeitamente com o Google Analytics, garantindo que cada página acessada seja contada, ajudando a aumentar a classificação de SEO mais rapidamente.

Método 2: JavaScript diferente em cada página

Digamos que você esteja executando um site WordPress que possui uma ferramenta diferente em cada página que depende de pelo menos uma “biblioteca” para funcionar. Forçando todo o seu JavaScript para carregar em cada página, especialmente quando não é necessário, irá acessar para baixo simplesmente lento para o seu site. O bom senso nos diz que desacelerar a experiência dos visitantes não é a melhor maneira de conquistar negócios!

Existem muitos tutoriais na web que apresentam métodos extremamente complicados de realizar esse processo. Embora seja verdade que isso pode ser feito fazendo edições complexas em seu arquivo functions.php, não há necessidade real de adotar essa abordagem, a menos que você goste de dores de cabeça.

Em vez disso, instale o plugin Code Embed em seu site. Isso permitirá que você adicione JavaScript e incorpore onde quiser na página.

Usando o plugin CodeEmbed

Depois de instalar o plugin Code Embed, vá em Screen Options e clique na caixa de seleção que diz “Custom Fields”. Isso permitirá que você adicione seu JavaScript à página.

Na página de edição, você verá uma caixa que diz “Campos personalizados”, com uma opção para “Inserir novos” campos personalizados. Clique nele e você terá caixas de texto vazias para inserir o nome do seu código JavaScript, bem como para o próprio código.

Para evitar conflitos com códigos WordPress existentes, você deve começar o nome do seu código JavaScript com as letras maiúsculas “CODE”. Algo como “CODEtimer” seria suficiente. Em seguida, você adicionará o JavaScript real na outra caixa. Certifique-se de incluir as tags de abertura e fechamento do script !

Assim que terminar, basta clicar no botão que diz “Adicionar campo personalizado”. Por fim, identifique onde na página você deseja que o código JavaScript seja executado. Por exemplo, se o código carregar um cronômetro, encontre em sua página onde você gostaria de inseri-lo. Você então usará a sintaxe exata [[CODEtimer]] para que o WordPress insira seu JavaScript lá, e pronto!

Como faço para incluir meus arquivos JavaScript e CSS no WordPress?

Embora o WordPress tenha temas integrados, muitos desenvolvedores da web preferem ter um design mais exclusivo e usarão seu próprio CSS. Você também precisará de uma maneira de armazenar esses arquivos JavaScript.

Nesta parte, você precisará ir ao Gerenciador de Arquivos e localizar o arquivo chamado “functions.php”. Observe que ele estará na pasta onde o tema base do seu site está localizado.

Adicionando CSS a functions.php

Depois de acessar o arquivo functions.php , siga estas etapas:

1. Em uma nova linha, crie uma função vazia adicionando a função de código
   addMyCSS () {#Fill This In Later}
2. “Registre” seu arquivo CSS com WordPress usando a função integrada chamada wp_register_style na próxima etapa
3. Remova o preenchimento que colocamos no código e, em vez disso, coloque wp_register_style ('name_of_css_style', plugins_url ('file-location.css', __ FILE__));
4. Já dissemos ao WordPress como chamar nosso estilo CSS e onde ele está. Agora é hora de “enfileirar” o estilo ou dizer ao WordPress que estamos prontos para usá-lo.
5. Permanecendo dentro do bloco de funções addMyCSS , adicione o código wp_enqueue_style ('name_of_css_style'); logo abaixo do código que inserimos na última etapa.
6. Há uma etapa final, mas primeiro, certifique-se de que você está FORA de toda a função que criamos e na parte geral do arquivo PHP.
7. Fora de addMyCSS , simplesmente adicione a seguinte linha: add_action ('wp_enqueue_scripts', 'name_of_css_style'); . Isso informa ao WordPress para acionar o carregamento desse arquivo no carregamento da página.

Você pode estar se perguntando por que temos wp_enqueue_scripts na função add_action para uma folha de estilo. Esta é simplesmente a maneira como o WordPress sempre implementou o recurso.

Adicionando arquivos JavaScript ao WordPress

Agora que examinamos o processo de geração de uma função, registro de um arquivo e adição de uma ação, essa parte deve ser moleza!

1. Faça uma função em functions.php chamada addMyJS assim como fizemos com addMyCSS .
2. Usaremos a função wp_register_script , mas é um pouco mais complexa. Possui cinco “parâmetros” (os itens colocados entre parênteses). Veja abaixo o que é cada parâmetro.
3. wp_register_script (1. Seu nome de script, 2. plugins_url (location_of_script.js, __FILE__), 3. array de dependências JS, geralmente array (jquery), 4. (Opcional) versão de seu arquivo JS entre aspas simples, 5. deve ser verdadeiro se quiser o JS no rodapé, falso se quiser no cabeçalho);
4. Aqui está um exemplo prático de algum JavaScript para executar no rodapé de um tema: wp_register_script ('timer_js', plugins_url ('timer_file.js', __FILE__), array ('jquery'), '1.0', true);
5. Novamente, FORA de nossa função addMyJS , “enfileire” seu script colocando-o em sua área geral do PHP: add_action ('wp_enqueue_scripts', 'addMyJS');

Pode parecer complexo, mas quando você pegar o jeito, levará menos de um minuto, então não tenha medo!

Quais plug-ins posso usar para adicionar JavaScript ao WordPress?

Existem muitos plug-ins totalmente gratuitos apenas para essa finalidade. Cada um funciona ligeiramente diferente, então você experimenta alguns antes de se comprometer. Aqui estão cinco principais para experimentar.

• ASync - exclusivamente, este plugin carrega seus arquivos JS e CSS separadamente do resto da sua página. Isso pode ser especialmente útil se houver um erro de codificação que, de outra forma, interromperia indefinidamente o carregamento da sua página.

• JS em Widgets - Só precisa adicionar algumas linhas de códigos para algo como o Google Analytics? Este plugin facilita o trabalho e permite que pequenos trechos sejam adicionados aos seus sites WordPress.

• Zia CSS / JS Helper - Este é de longe o melhor para aqueles que têm experiência com o desenvolvimento web clássico em HTML / CSS / JS. Isso torna a funcionalidade de edição do WordPress igual à edição de um site por meio do gerenciador de arquivos cPanel. Você pode utilizar CSS e JavaScript embutidos para adicionar rapidamente trechos de código, criar e gerenciar arquivos externos e muito mais.

Sempre faça backup do seu site primeiro!

Embora a grande maioria dos plug-ins do WordPress não faça mal ao seu site, sempre há uma chance de você ter problemas. Antes de instalar quaisquer plug-ins adicionais ou modificar seu site, faça um backup do seu site usando um plug-in de backup do WordPress que pode lidar com backups completos de sua instalação do WordPress, como BackupBuddy. Economize horas de possível retrabalho e garanta que todo o seu trabalho árduo não seja desperdiçado.

Posso utilizar APIs do WordPress usando JavaScript?

Como você deve saber, o WordPress tem uma extensa série de APIs ou interfaces de programação de aplicativos. APIs são essencialmente funções do lado do servidor que você pode utilizar em linguagens como JavaScript. O método mais novo e moderno para os desenvolvedores aprenderem a funcionalidade da API do WordPress é por meio da página Referência de código das APIs do WordPress.

É aqui que obtemos as “funções integradas” que usamos anteriormente. Poderíamos continuar por dias sobre cada função nas APIs e como elas funcionam em conjunto com o JavaScript. No entanto, esse é um tópico avançado que simplesmente requer tempo individual e dedicação para aprender.

Existem bibliotecas JavaScript sob medida para WordPress?

Sim! Reconhecendo que muitos desenvolvedores não dominam todo o conteúdo da API do WordPress, muitos programadores criaram bibliotecas JavaScript que podem ser facilmente incorporadas, usando qualquer um dos plug-ins que discutimos antes.

A maioria das bibliotecas JavaScript são encontradas no GitHub e são totalmente gratuitas. Existem centenas de milhares de bibliotecas JavaScript compatíveis com o WordPress, desde uma que adiciona efeitos divertidos ao WordPress até uma que permite fazer um site com um layout muito semelhante ao Pinterest!

A biblioteca mais conhecida usada com WordPress (e a maioria dos sites) é chamada jQuery. O jQuery elimina a complexidade do JavaScript e, uma vez que você pegue o jeito, estará escrevendo funções com rapidez e facilidade.

Ajuda! Meu JavaScript do WordPress não está funcionando!

Uma das partes menos afortunadas do JavaScript é que os erros não são óbvios. E adicionar WordPress em cima disso pode tornar tudo muito confuso.

Alguns erros podem ser causados ​​tão facilmente quanto uma aspa esquecida. Outros podem ser causados ​​por erros graves de codificação que não são facilmente identificados. Então, como os desenvolvedores profissionais percebem a diferença?

Existem duas chaves principais para a solução de problemas: a função JavaScript console.log e o console de depuração do navegador. O console do Chrome em particular é ótimo para isso.

console.log

Isso pode ser usado para ver qual é o valor de uma variável em um determinado ponto em uma função e garantir que partes das funções estão realmente sendo alcançadas. Em um arquivo JavaScript, você simplesmente colocaria algo como console.log ("teste"); .

O console de depuração

Dependendo do navegador usado, a configuração do console será diferente. Geralmente, você só precisa pressionar F12 para abri-lo e clicar na guia “Console”.

O console mostrará em qual linha, de qual arquivo JavaScript, houve um erro. Geralmente mostra o “stacktrace” completo, ou a série de arquivos a serem percorridos até encontrar o culpado. É aqui também que as mensagens do console.log são impressas.

Resumindo: JavaScript + WordPress

Existem ferramentas profissionais que lhe darão muito mais conhecimento, mas geralmente custam um bom dinheiro. A boa notícia é que, à medida que você se torna o próximo maior desenvolvedor de JavaScript para WordPress do mundo, as ferramentas aumentam com você!

Kristen Wright

Kristen tem escrito tutoriais para ajudar os usuários do WordPress desde 2011. Normalmente, você pode encontrá-la trabalhando em novos artigos para o blog do iThemes ou desenvolvendo recursos para o #WPprosper. Fora do trabalho, Kristen gosta de fazer um diário (ela escreveu dois livros!), Fazer caminhadas e acampar, cozinhar e aventuras diárias com sua família, na esperança de viver uma vida mais presente.