WPBeginner v6 – Bastidores do design do nosso novo site

Se você visitou o WPBeginner nas últimas semanas, provavelmente notou que temos um novo design de site. Embora ele tenha muitas semelhanças com o anterior, houve muitas mudanças nos bastidores.

Como prometi no boletim informativo, quero compartilhar o processo de pensamento por trás de nosso redesenho, o que aprendemos, o que há de novo no site e, o mais importante, como você pode usar alguns de nossos aprendizados para aprimorar seu site.

Um pouco de história

Criei o WPBeginner em 2009 e, como a maioria dos novos criadores, mudei o design do tema de nosso site quatro vezes nos primeiros três anos.

À medida que minha empresa crescia, percebi que a reformulação do site consumia muito tempo e recursos que poderiam ser mais bem empregados no cumprimento de nossa missão principal:

Portanto, fiz questão de dedicar todo o meu foco à nossa missão principal e nossos negócios cresceram tremendamente.

A última reformulação do WPBeginner foi lançada em 2016, e percorremos um longo caminho desde então.

Veja o que aconteceu nos últimos 5 anos:

• Criamos mais de mil tutoriais gratuitos sobre WordPress no blog WPBeginner e adicionamos centenas de novos tutoriais em vídeo em nosso canal do YouTube.
• Lançamos nossa comunidade WPBeginner Engage no Facebook, que agora é o maior grupo do WordPress no Facebook, com mais de 80.000 membros (a participação é gratuita).
• Lançamos o fundo WPBeginner Growth para investir em alguns de nossos plug-ins favoritos do WordPress, incluindo MemberPress, Pretty Links, Formidable Forms, Uncanny Automator e 6 outros.
• Lançamos dois novos plug-ins do WordPress, o TrustPulse, um plug-in de prova social do WordPress, e o RafflePress, um poderoso plug-in de brindes e concursos do WordPress.
• Adquirimos cinco plug-ins de crescimento do WordPress, incluindo o famoso AIOSEO (plug-in de SEO tudo em um para WordPress), SeedProd (construtor de sites do WordPress do tipo arrastar e soltar), Smash Balloon (plug-in nº 1 de feeds de mídia social), PushEngage (plug-in de notificação por push de site) e AffiliateWP (plug-in de gerenciamento de afiliados para WordPress).
• Também adquirimos cinco plug-ins de plataforma e infraestrutura do WordPress, incluindo o famoso plug-in WP Mail SMTP (para corrigir a capacidade de entrega de e-mails), SearchWP (poderoso plug-in de pesquisa do WordPress), Easy Digital Downloads (popular plug-in de comércio eletrônico para venda de produtos digitais), WP Simple Pay (plug-in fácil para aceitar pagamentos com cartão de crédito) e Sugar Calendar (plug-in simples de calendário de eventos para WordPress).

Coletivamente, nossos plug-ins agora são usados por mais de 19 milhões de sites, e quatro deles estão entre os 20 melhores plug-ins do WordPress de todos os tempos.

Embora todas essas sejam grandes realizações, temos um novo conjunto de desafios que precisam ser enfrentados para que possamos continuar a melhorar e atender à nossa missão.

Isso me leva ao WPBeginner v6.

Design focado na capacidade de descoberta de conteúdo

O WPBeginner começou como um simples blog de tutoriais, mas realmente se tornou a Wikipédia do WordPress.

Nossos usuários nos disseram repetidamente que, quando querem encontrar uma resposta para seus problemas com o WordPress, eles simplesmente pesquisam a palavra-chave no Google e adicionam WPBeginner no final para encontrar a melhor solução.

Para ajudar nossos leitores a encontrar rapidamente a resposta para suas perguntas sobre o WordPress, tornamos o recurso de pesquisa um grande foco em nossa nova página inicial.

Quer você seja um visitante que retorna para pesquisar nossa biblioteca de conteúdo ou um novo leitor que está começando a usar o WordPress, a página inicial do WPBeginner agora facilita a localização do que você está procurando.

Você também notará um widget de pesquisa semelhante em nossa barra lateral em todas as páginas de postagem única, bem como no cabeçalho do nosso site, ao clicar no ícone de pesquisa.

Uma das razões pelas quais o WPBeginner se tornou o maior site de recursos do WordPress para usuários não técnicos é porque explicamos tópicos complexos do WordPress em inglês simples, passo a passo.

No novo design, adicionamos o recurso de pesquisa ao vivo à nossa seção de glossário do WordPress, para que você possa se familiarizar facilmente com o jargão comum do WordPress. Isso é basicamente como um dicionário para termos do WordPress.

Como usuário do WPBeginner, você obtém acesso exclusivo aos melhores descontos para WordPress em plug-ins populares, temas premium, hospedagem e outras ferramentas de marketing.

Nossa equipe realmente fez um ótimo trabalho negociando as melhores ofertas para você, e essa seção cresceu bastante para ter mais de 100 cupons e ofertas.

Devido a uma solicitação popular dos usuários, também adicionamos o Live Search em nossa seção Deals, para que você possa encontrar rapidamente a melhor oferta em seus produtos WordPress favoritos.

Ao entrarmos em 2022, uma grande prioridade para nós é a capacidade de descoberta de conteúdo.

Isso nos ajuda a oferecer a melhor experiência ao usuário, aumenta o tempo no site, aumenta as visualizações de página e reduz nossa taxa de rejeição geral.

Acredito que, em 2022, a otimização da experiência do usuário (UXO) desempenhará um papel fundamental no SEO.

Se você quiser superar seus concorrentes e obter uma vantagem competitiva, recomendo enfaticamente que preste atenção ao UXO.

Ao longo deste artigo, compartilharei dicas sobre como você pode implementar recursos semelhantes em seu site, como fizemos em nosso novo tema.

Como melhorar a pesquisa no WordPress

O recurso de pesquisa padrão do WordPress não é muito avançado, portanto, se você quiser personalizar o algoritmo de classificação e controlar o que aparece em cada pesquisa, recomendo usar o plug-in SearchWP.

Como alternativa, você também pode usar a pesquisa de site personalizada do Google, que usa o algoritmo do Google, mas a desvantagem é que o Google exibirá anúncios em suas páginas de pesquisa, o que não parece muito bom.

Se quiser adicionar a pesquisa ao vivo em seu site, como fizemos na seção Ofertas ou no Glossário, siga este tutorial sobre como adicionar a pesquisa ao vivo AJAX no WordPress.

Outros tutoriais de pesquisa do WordPress que podem ser úteis são: como criar um formulário de pesquisa personalizado no WordPress e como adicionar uma barra de pesquisa no menu do WordPress.

Novo Mega Menu do WordPress

Seguindo o tema da capacidade de descoberta de conteúdo, atualizamos nossos antigos menus suspensos do WordPress para novos Mega Menus de várias colunas.

Isso permite que nossos novos usuários encontrem de forma rápida e fácil nosso melhor conteúdo.

Ele também nos permite destacar melhor nossos novos produtos, as ferramentas de negócios gratuitas que criamos e muito mais.

Como adicionar um mega menu no WordPress

Embora tenhamos criado uma solução personalizada para o WPBeginner, você pode seguir este tutorial sobre como adicionar um mega menu no WordPress para destacar melhor suas páginas principais.

O editor de blocos do WordPress (finalmente)

Em 2019, o WordPress introduziu o superpoderoso editor de blocos (também conhecido como Gutenberg) para criar conteúdo.

Comecei a usá-lo imediatamente em meu blog pessoal, mas como o WPBeginner estava usando um tema antigo com muitos recursos codificados personalizados, a mudança não foi tão fácil.

Portanto, nos últimos dois anos, ficamos presos ao uso do Editor Clássico no site WPBeginner, enquanto todos os nossos sites mais novos receberam os recursos mais recentes e melhores do editor de blocos do WordPress.

Finalmente, com nosso novo tema, agora podemos usar todos os incríveis recursos do editor de blocos do WordPress.

Por exemplo, agora posso adicionar um bloco “Did You Know” muito legal sem escrever nenhum código:

Também reformulamos completamente várias de nossas páginas de destino usando o editor de blocos do WordPress.

Por exemplo, confira nossa nova página de destino de configuração gratuita de blog do WordPress.

Também redesenhamos nossas ferramentas de negócios gratuitas usando o editor de blocos para destacar algumas das ferramentas gratuitas recentes que criamos.

Ainda usaremos o SeedProd para criar páginas de destino totalmente personalizadas quando necessário, pois ele é um construtor de páginas do WordPress do tipo arrastar e soltar.

Embora tenha sido divertido aprender a usar o Gutenberg para criar páginas de destino personalizadas, ele ainda exige MUITA codificação para a configuração antes que as equipes de marketing possam criar uma página de destino personalizada.

Por outro lado, quando você usa um plug-in de construtor de páginas, as equipes de marketing podem criar rapidamente páginas de destino personalizadas, layouts de funil etc. sem nenhuma ajuda da equipe de desenvolvimento.

A equipe principal do WordPress está trabalhando arduamente nos recursos de edição de site completo, mas ainda precisa de muito trabalho antes de poder competir com os recursos avançados que você obtém com construtores de páginas como SeedProd, Divi ou Beaver Builder.

Dito isso, o editor de blocos é muito bom, e há muitos plug-ins de blocos do WordPress que você pode usar para criar elementos de design interessantes para aprimorar seu conteúdo.

Aqui está outro bloco interessante que nosso novo tema tem para destacar os plug-ins em destaque:

O SeedProd é o construtor de páginas de arrastar e soltar mais amigável para iniciantes no WordPress. Ele vem com mais de 150 modelos predefinidos e o recurso de criação de temas permite que você crie temas totalmente personalizados para o WordPress (sem nenhum código). Experimente o SeedProd hoje mesmo “

Nas próximas publicações do blog, tenho certeza de que você verá mais blocos de design de conteúdo que temos para melhorar ainda mais a legibilidade do nosso conteúdo.

Mudança de Yoast para AIOSEO

Durante muito tempo, o site WPBeginner estava usando uma versão muito antiga e personalizada do plug-in Yoast SEO (v 2.3.5).

Para se ter uma ideia, eles estão na versão 17 no momento.

Eu não queria atualizar o Yoast porque a equipe deles havia removido alguns recursos essenciais que eu considerava importantes para SEO.

Também senti que o espaço geral de SEO do WordPress havia parado de inovar.

Então, no início de 2020, adquirimos o AIOSEO, o plug-in original de SEO tudo-em-um, e pedi à minha equipe que o reformulasse completamente.

Estou muito orgulhoso do trabalho que nossa equipe fez, e ele tem todos os recursos de SEO necessários para obter uma vantagem competitiva.

Assim como o editor de blocos, nossos sites mais novos começaram a mudar para o AIOSEO e começaram a ver suas classificações melhorarem, então eu estava ansioso para começar a usá-lo no WPBeginner.

Agora, estamos usando os melhores e mais recentes recursos de SEO do All in One SEO.

Agora temos recursos como mapa do site de vídeo para ajudar a aumentar a classificação do nosso conteúdo com vídeos, mapa do site RSS para ajudar a indexar nosso conteúdo mais rapidamente, módulos avançados de SEO para ter um controle mais preciso sobre o SEO do nosso site e muito mais.

Eu realmente acredito que ele é o melhor plug-in de SEO do mercado e, o mais importante, tem um preço justo para pequenas empresas e agências.

Pretendo escrever um artigo completo nas próximas semanas sobre o motivo da mudança, com uma análise detalhada dos recursos, mas, enquanto isso, você pode experimentar a versão gratuita do All in One SEO ou conferir a versão Pro, que tem todos os recursos avançados que estou usando no WPBeginner.

Melhorias na velocidade do WordPress

Diversos estudos demonstraram que sites mais rápidos melhoram a experiência do usuário, aumentam o tempo no site e as conversões em geral.

Esse também é o motivo pelo qual o Google tornou a velocidade do site um fator de classificação de SEO.

Se você acompanha o site há algum tempo, sabe que sou obcecado por otimização de desempenho.

O site WPBeginner já era bastante rápido graças ao nosso incrível parceiro de hospedagem WordPress SiteGround. Eles oferecem uma solução de hospedagem WordPress altamente otimizada, construída sobre a plataforma de nuvem do Google.

E, é claro, estávamos seguindo as práticas recomendadas de velocidade do WordPress, mas com o novo design do tema, fizemos várias melhorias notáveis na velocidade.

Aqui estão os resultados do Google Page Speed:

Aqui está o resultado da página inicial do GTMetrix e do Pingdom:

E obtivemos esse resultado apesar de adicionarmos novas seções, mais conteúdo à página inicial, imagens mais amplas, etc.

E antes que você pergunte, o site WPBeginner tem 68 plug-ins ativos atualmente.

Então, você deve estar se perguntando como consegui adicionar mais conteúdo ao site e, ao mesmo tempo, reduzir o tamanho da página e tornar tudo mais rápido.

Bem, removi coisas que achava que não eram mais necessárias, e essas são coisas que eu realmente quero que mais proprietários de sites considerem fazer também.

Isso não só ajudará a acelerar seu site, o que ajuda nas classificações de SEO, mas também reduzirá o consumo geral de largura de banda, reduzirá os custos e melhorará a pegada de carbono do seu site.

Como desativar o Gravatar nos comentários do WordPress

O WordPress vem com um serviço integrado de terceiros chamado Gravatar, abreviação de Globally Recognized Avatars (Avatares reconhecidos globalmente).

Isso permite que você veja a foto do perfil ou o avatar de um usuário quando ele deixa um comentário no seu site WordPress.

O desafio é que isso exige que os visitantes do seu site configurem uma conta Gravatar, o que a maioria dos usuários não faz. Portanto, em vez disso, seu site carrega apenas o avatar cinza do homem misterioso, o que não parece bom.

Agora, digamos que você tenha uma publicação de blog popular com 50 comentários em que apenas 10% dos usuários têm uma imagem de Gravatar e 90% não têm. Bem, são 50 imagens adicionais que sua página está carregando e que realmente não agregam valor significativo ao conteúdo.

É por isso que muitos blogs populares começaram a desativar o Gravatar, e estamos fazendo o mesmo no WPBeginner.

Essa simples alteração melhorou drasticamente o tempo de carregamento da página e a pontuação de velocidade do site.

Remoção de fontes personalizadas de terceiros

Vou ser sincero, nunca pensei duas vezes sobre fontes personalizadas no passado.

Foi algo que pareceu normal e fez com que o site tivesse uma boa aparência do ponto de vista da tipografia, pelo menos se você tiver a sorte de ter uma Internet rápida.

No antigo tema WPBeginner, usávamos uma fonte personalizada da Adobe chamada Proxima Nova, uma fonte de ícones popular chamada FontAwesome, e nossos pop-ups do OptinMonster usavam a Source Sans Pro das fontes do Google.

Quando visitei o site de um local remoto com qualidade de Internet ruim, percebi realmente o grande impacto que essas fontes têm sobre o desempenho da experiência do usuário.

Em nosso novo design, eu queria resolver esse problema, para que possamos facilitar o acesso de estudantes e empresários de países em desenvolvimento ao WPBeginner, aprender WordPress e aumentar sua presença on-line.

O novo tema WPBeginner v6 usa as fontes padrão do sistema, que evoluíram muito. Elas têm ótima aparência em todos os dispositivos e, é claro, são super rápidas.

Sem flash de texto sem estilo (FOUT), sem mudança cumulativa de layout (CLS) e com tempo de bloqueio significativamente reduzido.

Se você fizer login no painel do WordPress ou usar o Github, perceberá que nossas fontes são semelhantes, pois ambas as plataformas fizeram a mudança para fontes do sistema mais cedo.

Embora a remoção de fontes personalizadas possa não ser uma solução viável para todos os sites comerciais, acredito que os designers e desenvolvedores devam estar atentos quando se trata de velocidade.

Algumas práticas recomendadas que podem ajudar:

• Em vez de usar duas fontes separadas para o título e o conteúdo, considere usar a mesma fonte para ambos.
• Em vez de usar vários pesos e estilos de fonte diferentes, como fino, regular, semibold, negrito, negrito extra, preto e a versão em itálico de todos eles, considere reduzir os pesos de fonte para apenas dois: regular e negrito.
• Em vez de carregar toda a FontAwesome ou outra biblioteca de fontes de ícones, considere adicionar SVGs diretos dos ícones de que você precisa.

Desativação de fontes personalizadas no OptinMonster

Depois que o tema foi projetado e codificado, eu ainda tinha que resolver mais um problema com as fontes.

Os pop-ups do meu site e os formulários de assinatura de e-mail usam o OptinMonster, e eles ainda estavam carregando fontes do Google.

Agora, desativar o OptinMonster não era uma opção, pois ele me ajuda a obter mais assinantes de e-mail e a aumentar as conversões em nosso site.

Por sorte, é uma das minhas empresas, então pedi à equipe de desenvolvimento uma solução para desativar as fontes do Google.

Acontece que eu não fui o primeiro a solicitar esse recurso, e a OptinMonster já tinha uma solução de API que permite não apenas desativar as fontes do Google, mas também carregar qualquer fonte personalizada da Web que você desejar.

Sou bastante experiente em tecnologia e posso implementar o pequeno trecho que a equipe compartilhou na documentação, mas sei que muitos de nossos clientes não são.

Portanto, agora nossa equipe realmente criou esse recurso dentro do construtor de campanhas (sem necessidade de codificação).

Mas se você se sentir confortável com o código e não quiser desativar manualmente essa configuração para cada campanha, basta seguir o hack que estou usando.

Primeiro, adicione o seguinte snippet JS para desativar o OptinMonster de carregar qualquer fonte da Web em seu site:

<script type="text/javascript">
document.addEventListener('om.Scripts.init', function(event) {
event.detail.Scripts.enabled.fonts= false;
});
</script>

Em seguida, adicione o seguinte CSS em seu arquivo style.css:

html .Campaign * { font-family: "Proxima Nova", Helvetica, "Helvetica Neue", Arial, sans-serif !important; }

É claro que não se esqueça de alterar as fontes para que correspondam às fontes de seu site. Isso basicamente aplicará a família de fontes acima a todas as campanhas da OptinMonster que forem carregadas em seu site.

Mudança do W3 Total Cache para o WP Rocket

Durante muito tempo, eu estava executando uma configuração altamente personalizada do plug-in W3 Total Cache no WPBeginner.

Embora tenha feito o trabalho, não foi páreo para o WP Rocket, que usamos em todos os nossos sites de produtos.

Portanto, com essa reformulação, finalmente mudei para o WP Rocket, que vem com MUITOS recursos excelentes de velocidade do site, principalmente um pré-carregamento de cache confiável e minificação de arquivos.

Esse plug-in é fundamental se você quiser melhorar a velocidade do seu site.

Apenas uma observação rápida: se você estiver usando o ThirstyAffiliates ou o Pretty Links para gerenciar seus links de afiliados, certifique-se de excluí-los do cache.

Basta acessar a guia Advanced Rules (Regras avançadas) e adicionar seu slug de afiliado na configuração Never Cache URLs (Nunca armazenar URLs em cache).

Se você não fizer isso e tiver o pré-carregamento do cache ativado, o WP Rocket tentará armazenar em cache seus links de afiliados, pois eles se parecem com links internos.

Isso pode aumentar artificialmente sua contagem de cliques e afetar suas métricas de afiliado.

Pedi à equipe do WP Rocket para verificar se eles podem detectar automaticamente plug-ins de afiliados populares e preencher previamente a tag de URL excluída para torná-la mais amigável para iniciantes, e espero que eles implementem a sugestão.

O que está por vir?

Tenho grandes planos para 2022 e é por isso que eu queria colocar o novo design do site no ar antes do final deste ano.

Estamos planejando lançar uma seção totalmente nova no WPBeginner que muitos de vocês têm solicitado nos últimos 2 anos.

Ele será lançado em breve, e espero lançá-lo no início do segundo trimestre de 2022.

Também estou planejando fazer mais experiências com o novo editor de blocos para criar uma melhor experiência geral de leitura para você.

Além disso, fique de olho em nosso canal do YouTube, pois faremos algumas coisas muito legais lá em 2022.

Como sempre, quero agradecer a todos vocês pelo apoio e feedback contínuos ao longo dos anos.

Atenciosamente,
Syed Balkhi
Fundador do WPBeginner