🎨 Como adicionar um divisor de forma personalizado no Elementor: um guia do SVG ao filtro
Criar um divisor de secção personalizado no Elementor: preparar o SVG, colocá-lo num tema filho e registá-lo através de…
O código é igualmente necessário tanto para um site com CMS como para um projeto feito de raiz. Esta secção é sobre desenvolvimento sem amarras ao WordPress. Frontend e backend, ferramentas e técnicas prontas a usar. Para quem faz layout, escreve scripts ou instala o Git no computador pela primeira vez.
O frontend é dissecado camada por camada. HTML como esqueleto da página. CSS para o aspeto visual: grelhas com Flexbox e Grid, adaptabilidade, transições suaves e efeitos limpos sem código a mais. JavaScript e jQuery para o comportamento: alternadores, tratamento de cliques, validação de formulários, dinâmica na página. Há análises de tarefas concretas como o método .toggle(), a geração de um número aleatório, um temporizador de contagem decrescente ou o scroll suave até uma âncora. Nada de teoria abstrata. Código pronto para colar e testar.
O backend assenta em PHP. Mostramos como chamar APIs externas (interfaces de programação através das quais os sites trocam dados). Por exemplo, ir buscar a cotação do Bitcoin, o tempo ou o preço de um produto a um serviço de terceiros. Abordamos o envio de formulários por email, o trabalho com JSON, consultas básicas a bases de dados. E também as expressões regulares, aquela linguagem de pesquisa por padrões que muitos receiam sem razão. Validação de email, telefone, limpeza de strings. Explicamos com exemplos vivos, não com sintaxe seca.
O código tem de ser escrito e guardado em algum lado. Por isso, um bloco separado sobre ferramentas. Git e GitHub para controlo de versões e trabalho colaborativo. Instalação do Git no Windows a partir do zero, comandos básicos, primeiro repositório, reversão de alterações, trabalho com ramos. Markdown para documentação e ficheiros README. CodePen para experiências rápidas no navegador. Ambiente local: Laragon, Open Server, XAMPP, o editor Atom. Tudo aquilo com que realmente se trabalha de forma confortável todos os dias.
Quem temos em mente quando escrevemos. O principiante ainda está a perceber como uma tag se distingue de um seletor e copia código sem entender metade das linhas. O experiente conhece as bases, mas procura uma solução curta para uma tarefa pontual, para não reinventar a roda. Ao primeiro, explicamos cada linha e mostramos o resultado no navegador. Ao segundo, damos um snippet pronto e indicamos de imediato onde ele se irá quebrar.
Erros típicos que destacamos. Um script no head em vez do footer, fazendo com que o jQuery não encontre o elemento. Um ponto e vírgula esquecido e aspas de tipos diferentes. Uma expressão regular que captura avidamente mais do que deve. Uma consulta direta à base de dados sem validação dos dados. Mostramos não só código que funciona, mas também as armadilhas à sua volta.
Os materiais são escritos por pessoas que programam de facto, não que recontam tutoriais alheios. Nós próprios tropeçámos nestes mesmos erros e lembramo-nos de onde um principiante irá emperrar. Por isso, cada análise é construída de forma simples. Primeiro, uma solução curta e funcional. Depois, a explicação do porquê de funcionar e onde estão as armadilhas. Sem palha nem cópia-colada da documentação oficial.
Se está a começar, avance do simples para o complexo. Primeiro HTML e CSS. Depois JavaScript e PHP básico. E só depois Git, APIs e expressões regulares. Cada texto responde a uma pergunta concreta, em vez de tentar cobrir tudo de uma vez.
A secção está ligada à categoria WordPress. Quando o código diz respeito especificamente ao motor do WP, hooks, functions.php ou plugins, encaminhamo-lo para lá. Aqui fica tudo o que é universal e útil em qualquer projeto. Um snippet de CSS assenta igualmente bem numa landing page, num blog e numa loja online.
O conteúdo é atualizado regularmente de acordo com as normas e versões mais recentes das ferramentas. As linguagens evoluem, as técnicas antigas tornam-se obsoletas, surgem novas. Mantemos os exemplos funcionais, em vez de deixar código com dez anos a acumular pó. Faz layout, escreve scripts ou está a aprender Git? Volte aqui sempre que precisar de perceber código ou de encontrar uma solução pronta a usar.
Criar um divisor de secção personalizado no Elementor: preparar o SVG, colocá-lo num tema filho e registá-lo através de…
Google Apps Script para seleção múltipla em células: barra lateral com caixas de verificação, dois ficheiros, sem…
Escrever meta boxes para WordPress: instalar o CMB2, configurar campos em PHP, integrar com o seu tema e mostrar dados…
Guia passo a passo para criar janelas modais no WordPress: da escolha de um plugin ao CSS e JavaScript puro. Código…
Coleções de snippets testados de HTML, CSS e JS com pré-visualização ao vivo e filtragem por tags: do React ao…
Aprenda a definir um modelo personalizado para CPTs no WordPress usando o ficheiro single-{post_type}.php ou o filtro…
MatchMedia, resize e jQuery: três formas de detetar a largura do ecrã em JavaScript. De MediaQueryList nativa a…
Intersection Observer, AOS ou ScrollReveal, que ferramenta escolher para animar blocos ao fazer scroll. Uma comparação…
As imagens de fundo do Elementor não suportam loading="lazy". Três formas de implementar o carregamento lazy: função…
📦 Testámos 14 serviços CDN ativos para gerar imagens de placeholder: de blocos coloridos a renderização com IA. Todos…