Desenvolvimento Web CMS com WordPress e DIVI, Programação de Plugins

Introdução ao WordPress

Os Sistemas de Gerenciamento de Conteúdo (CMS) facilitam significativamente a criação e administração de websites. Sem conhecimentos de programação, empresas e indivíduos podem gerenciar conteúdo, adaptar o design e tornar os websites interativos. Os CMS mais conhecidos são WordPress, Joomla, Drupal, Contao e TYPO3, sendo o WordPress o sistema mais utilizado de longe, impulsionando cerca de 43% de todos os websites globalmente.

Eu mesmo comecei com Joomla, depois usei Contao e mudei para WordPress por boas razões. Entre meus clientes, ainda vejo frequentemente sites TYPO3 na área profissional, mas eles exigem mais tempo de aprendizado devido ao TypoScript e, portanto, não oferecem uma entrada rápida para todos os usuários e, em particular, para desenvolvedores web. Assim, também é mais difícil encontrar alguém para assumir extensões ou manutenção.

Enquanto os sistemas funcionarem de forma estável e atenderem a todos os requisitos técnicos (versão PHP atual, atualizações de segurança, GDPR, desempenho), não há razão para um redesenvolvimento completo. Geralmente, os sites duram cerca de 4 a 6 anos antes de serem fundamentalmente redesenhados.

Hospedagem com all-inkl.com e outros

O WordPress basicamente não exige muito. PHP e MySQL/MariaDB são suficientes, e assim os sites WordPress podem ser executados em praticamente todos os provedores. No entanto, hoje em dia espera-se um pouco mais – por exemplo:

• um domínio de desenvolvimento/staging
• gerenciamento de e-mail confortável
• Certificados LetsEncrypt para HTTPS, incluindo renovação automática
• Acessos FTP/SFTP ou gerenciador de arquivos web
• backups automáticos e restauração fácil
• suporte rápido e gratuito
• memória RAM suficiente e versões PHP atuais (por exemplo, 8.1/8.2+)
• a possibilidade de fazer suas próprias configurações de DNS
• uma migração rápida e a disponibilização de códigos de autenticação com um clique
• um assistente de instalação simples para WordPress e outros

Um provedor preferido há muitos anos é all-inkl.com (Link de Afiliado), que impressiona com preços de pacotes muito justos e um excelente suporte. Quem deseja apenas hospedar sistemas CMS estará muito bem servido.

Quem precisa adicionalmente de MongoDB, Node.js ou Express deve alugar um servidor/VPS próprio ou procurar provedores que ofereçam essas funções. No entanto, 99% de todos os sites clássicos ainda não precisam disso. No entanto, ferramentas baseadas em IA estão cada vez mais criando aplicações individuais – como web-apps, APIs ou automações. nuonu.com também é uma dessas aplicações, que estende o WordPress com seus próprios plugins e oferece funções muito individuais.

Por que WordPress e DIVI?

O WordPress oferece uma interface amigável, uma vasta seleção de extensões (plugins) e temas, além de uma comunidade muito forte. Seja um blog, um site corporativo, uma landing page ou uma loja online – com o WordPress, praticamente todos os tipos de sites podem ser implementados. A instalação e a configuração básica são rápidas, e graças a construtores de páginas como o DIVI, até mesmo leigos podem criar layouts profissionais.

Vantagens do DIVI como Page Builder

O DIVI se destaca de muitos outros construtores de páginas por poder ser usado como um tema + construtor completo, sem a necessidade de um tema adicional. Isso significa:

• Design completo de uma única fonte – sem dependências adicionais de tema.
• Opções de design flexíveis com um editor visual de arrastar e soltar.
• Opções de edição do lado do cliente diretamente na página (edição de frontend).
• Excelente adaptação responsiva para desktops, tablets e dispositivos móveis.
• Layouts e módulos pré-fabricados, que aceleram significativamente a criação de novas páginas.

Novo: DIVI 5 – Desempenho e Segurança Futura

O DIVI 5 é mais do que uma atualização normal: o construtor foi completamente reconstruído internamente e colocado sobre uma base moderna e significativamente mais leve. Isso garante tempos de carregamento visivelmente mais rápidos, menos código desnecessário e uma base melhor para futuras funções.

• Novo sistema central leve – o construtor foi desenvolvido do zero e trabalha de forma mais eficiente em termos de recursos.
• Tempos de carregamento mais rápidos e editor responsivo – especialmente páginas complexas com muitos módulos se beneficiam da nova arquitetura.
• Menos shortcodes, código mais limpo – isso facilita a manutenção a longo prazo, a migração e tem um impacto positivo no SEO.
• Novas funções de design como variáveis de design, unidades estendidas, linhas aninhadas e breakpoints ajustáveis individualmente para layouts responsivos ainda mais precisos.
• Melhor gerenciamento de grandes projetos – o DIVI 5 é projetado para sites extensos com muitos modelos, elementos globais e layouts de biblioteca.

Situação atual conosco: O site nuonu.com já está rodando na versão Beta do DIVI 5. Todos os projetos de clientes que hoje são implementados com DIVI 4 podem ser migrados de forma gradual e controlada após o lançamento final do DIVI 5 – idealmente, primeiro em um ambiente de staging. Assim, os sites existentes permanecem estáveis, mas podem aproveitar as vantagens de desempenho e conforto da nova versão, assim que for sensato e seguro.

A Estrutura Geral de Sites Modernos

Os sites atuais são claramente estruturados, impactantes e, acima de tudo, precisam ser responsivos. Os seguintes aspectos são cruciais:

• Cores e fontes devem ser consistentes com o design corporativo.
• Logotipo e espaçamentos devem ser integrados harmoniosamente ao layout.
• Cabeçalho e menu individuais para uma navegação intuitiva.
• Rodapé estruturado, que contém links legais, perfis de mídia social e opções de contato.
• Definir página inicial, para que a página principal seja definida via “Configurações > Leitura”.

Requisitos Legais: Impressum, Proteção de Dados e Consentimento de Cookies

Todo site precisa de um aviso legal (Impressum) e uma política de privacidade. Além disso, é necessária uma ferramenta funcional de consentimento de cookies para cumprir o GDPR e o TTDSG. Um exemplo disso é Reel Cookie Consent, que pode ser testado e estendido com scripts próprios para, por exemplo, integrar o Matomo de forma compatível com o GDPR.

Matomo em Uso de Subdomínio

O Matomo pode ser operado tanto no domínio principal quanto em um subdomínio. As vantagens do uso de um subdomínio são:

• Melhor controle e segurança dos dados – os dados permanecem completamente no próprio servidor.
• Configuração amigável à privacidade, pois os dados não são transmitidos a terceiros.
• Opções próprias de opt-out para usuários, para cumprir os requisitos do GDPR.

Plugins Essenciais para um Site WordPress-

Para um site WordPress profissional e funcional, certos plugins são, em nossa opinião, quase indispensáveis (a lista pode variar dependendo do projeto, é claro):

• RankMath – Plugin de SEO com suporte a Schema, redirecionamentos e muitas ajudas on-page
• Happy Files – Gerenciamento de arquivos com pastas para mídias, posts, páginas e muito mais.
• Reel Cookie Consent – Gerenciamento de cookies (ou alternativas como Real Cookie Banner, Borlabs Cookie ou Complianz)
• DIVI Supreme – Módulos e efeitos avançados para DIVI
• WP Armour – Proteção contra spam de formulários
• AIOS (All in One Security) – Plugin de segurança abrangente para endurecimento de login, sistema de arquivos e firewall

Configuração de Segurança no WordPress

Após a instalação, as configurações de segurança devem ser otimizadas imediatamente:

• Ativar AIOS e WP Armour para proteção contra ataques de força bruta, spam e ataques simples de bots.
• Alterar o nome de usuário padrão do administrador para dificultar ataques direcionados.
• Autenticação de dois fatores para maior segurança (opcional, mas recomendado).
• Configurar backups regulares (por exemplo, com Duplicator, UpdraftPlus ou BackWPup) e testar a restauração.

Adaptação das Configurações de Mídia do WordPress

Por padrão, o WordPress armazena mídias em pastas divididas mensalmente. Isso é útil para blogs, mas muitas vezes impraticável para sites corporativos. Portanto, é recomendável desativar a estrutura de pastas automática em “Configurações > Mídia” e organizar a biblioteca de mídia com uma ferramenta como Happy Files.

Fase de Design após a Instalação Básica

Após a instalação básica, começa o design propriamente dito:

• Definir cores, fontes e espaçamentos – globalmente no DIVI como base de design (ou no DIVI 5 adicionalmente via variáveis de design).
• Criar cabeçalho e menu individuais para tornar a navegação intuitiva.
• Personalizar rodapé, que contém aviso legal, política de privacidade, links de mídia social e opções de contato.
• Tornar números de telefone clicáveis com tel: e endereços de e-mail com mailto:.
• Criar página inicial e, em seguida, defini-la como página principal em “Configurações > Leitura”.

Com esta estrutura, os clientes recebem um guia claro para construir seu site de forma moderna, legalmente segura e funcional. Se forem necessárias mais adaptações, os plugins e ferramentas mencionados podem ser configurados individualmente.

Processo de Desenvolvimento Conjunto

Para nós, é importante envolver o cliente – se desejado – o mais cedo possível no desenvolvimento. Isso inclui a decisão e aprovação da aparência visual, mas também a criação de páginas, menus, o gerenciamento de dados de SEO, uploads de mídia e muito mais. Quanto mais o cliente puder fazer por si mesmo, melhor – e mais fácil será a manutenção independente posteriormente.

Logotipo e Favicon

Frequentemente, designs desatualizados ou inexistentes estão disponíveis. Neste caso, também criamos logotipos e favicons como arquivo vetorial e PNG transparente. Graças ao Midjourney e ao Illustrator, podemos fornecer uma seleção de logotipos 2D e 3D, se desejado. Também cuidamos da escolha do nome, incluindo a verificação e registro de domínios livres ou sua transferência.

Links de Mídia Social

O DIVI vem com um módulo próprio com logotipos prontos e legalmente seguros de muitos provedores de mídia social. Links globais também podem ser armazenados no Dashboard em DIVI > Opções do Tema. Cabeçalho com logotipo, menu e rodapé personalizado você também pode ver nesta página.

Criação de Conteúdo SEO

A partir de agora, começamos a criar página por página – e o RankMath deve ser considerado imediatamente. Título, Descrição, og:image, h1, h2, h3… Títulos e textos amigáveis ao SEO e de fácil leitura com destaques significativos, bem como material de imagem expressivo e bem otimizado. SEO first significa: O conteúdo não é apenas feito sob medida para os visitantes, mas também para motores de busca e mídias sociais. O que deve ser considerado e quais ferramentas você precisa para isso, você encontra no guia de nossa Estratégia de SEO.

Finalização de todos os Conteúdos e Dados de SEO

A criação pode levar diferentes tempos por página. Algumas páginas exigem configurações adicionais, como formulários e seu envio seguro via SSL ou configurações especiais de rastreamento/consentimento. Em média, deve-se contar com cerca de uma hora ou mais por página. Somente quando todas as páginas estiverem prontas e o último link testado, o site estará pronto para um teste ao vivo.

Fase de Teste com Otimizações de Desempenho

Um site pronto é sempre uma experiência – mas agora ele precisa ser extensivamente testado. Verificamos:

• todos os links internos e externos,
• todas as recomendações do RankMath,
• exibição em redes sociais (por exemplo, com o Facebook Debugger / URL Debuggers),
• tempos de carregamento com testes de velocidade (por exemplo, PageSpeed Insights, GTmetrix, WebPageTest).

Somente quando todos os erros forem eliminados e o site convencer nos testes de desempenho, ele será finalmente lançado ao vivo.

Geração de Sitemap e Registro no Google Search Console

O ato final da criação é o registro no Google Search Console. O sitemap gerado pelo RankMath ou WordPress é depositado para que o Google possa indexar todos os conteúdos relevantes de forma estruturada.

Monitoramento de Curto e Longo Prazo

Após alguns dias, o site deve aparecer nos resultados de busca. Com site:domain.de ou diretamente no Google Search Console, verificamos se todos os conteúdos importantes foram realmente listados. O mais tardar agora, quaisquer erros devem ser notados e corrigidos.

A partir de agora, também podemos visitar regularmente nosso subdomínio Matomo e avaliar o sucesso do site ao vivo. Dependendo do interesse dos visitantes, o conteúdo pode ser expandido, os termos de busca aprimorados e novas landing pages criadas. Assim, o site não permanece estático, mas se desenvolve com os objetivos da empresa.

Entrada no Google Business

Quem cuida da criação e otimização de websites também deve dar uma olhada no Google Business, Maps, Imagens, Vídeos, Notícias etc... Somos prestadores de serviços e também responsáveis por quais dados um visitante vê. Muitas vezes, são exatamente esses dados que chamam a atenção de um visitante para o site ou que geram uma ligação.