WPBeginner v6 – Nos bastidores do nosso novo design de site

Se você visitou o WPBeginner nas últimas semanas, provavelmente notou que temos um novo design de site. Embora tenha muitas semelhanças com o último, há muita coisa que mudou nos bastidores.

Como prometi no boletim informativo, quero compartilhar o processo de pensamento por trás do 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 melhorar seu site.

Um pouco de fundo

Comecei o WPBeginner em 2009 e, como a maioria dos novos criadores, mudei o design do tema do nosso site quatro vezes nos primeiros 3 anos.

À medida que meu negócio crescia, percebi que os redesenhos de sites consomem muito tempo e recursos que poderiam ser mais bem gastos no cumprimento de nossa missão principal:

Por isso, fiz questão de dedicar todo o meu foco à nossa missão principal e nosso negócio cresceu 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 do 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 plugins favoritos do WordPress, incluindo MemberPress, Pretty Links, Formidable Forms, Uncanny Automator e outros 6.
• Lançamos dois novos plugins do WordPress, o TrustPulse, um plugin de prova social do WordPress, e o RafflePress, um poderoso plugin de sorteio e concurso do WordPress.
• Adquirimos cinco plugins de crescimento do WordPress, incluindo o famoso AIOSEO (plugin de SEO completo para WordPress), SeedProd (construtor de sites WordPress de arrastar e soltar), Smash Balloon (plugin de feeds de mídia social nº 1), PushEngage (plugin de notificação por push do site) e AffiliateWP (plugin de gerenciamento de afiliados para WordPress).
• Também adquirimos cinco plug-ins de infraestrutura e plataforma WordPress, incluindo o famoso plug-in WP Mail SMTP (para corrigir a entrega de e-mail), SearchWP (poderoso plug-in de pesquisa do WordPress), Easy Digital Downloads (plugin de comércio eletrônico popular para vender produtos digitais), WP Simple Pay (plugin fácil para aceitar pagamentos com cartão de crédito) e Sugar Calendar (plug-in de calendário de eventos simples para WordPress).

Coletivamente, nossos plugins agora são usados ​​por mais de 19 milhões de sites , e 4 de nossos plugins estão entre os 20 melhores plugins do WordPress de todos os tempos.

Embora todas essas sejam grandes conquistas, temos um novo conjunto de desafios que precisam ser enfrentados, para que possamos continuar a melhorar e servir nossa missão.

Isso me leva ao WPBeginner v6.

Design focado na descoberta de conteúdo

O WPBeginner começou como um simples blog tutorial, mas realmente se tornou a Wikipedia para WordPress.

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

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

Seja você um visitante recorrente que vem 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 torna mais fácil encontrar o que 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, quando você 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 a linguagem 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 do WordPress em plugins populares, temas premium, hospedagem e outras ferramentas de marketing.

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

Devido a pedidos de usuários populares, também adicionamos o Live Search em nossa seção de ofertas, para que você possa encontrar rapidamente a melhor oferta em seus produtos WordPress favoritos.

À medida que entramos em 2022, uma grande prioridade para nós é a descoberta de conteúdo.

Isso nos ajuda a oferecer a melhor experiência do 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 crítico no SEO.

Se você deseja vencer seus concorrentes e obter uma vantagem competitiva, recomendo fortemente prestar atenção ao UXO.

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

Como melhorar a pesquisa do WordPress

O recurso de pesquisa padrão do WordPress não é muito poderoso, portanto, se você deseja 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 que não parecem muito bons.

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

Outros tutoriais de pesquisa do WordPress que você pode achar úteis são como criar um formulário de pesquisa personalizado do WordPress e como adicionar uma barra de pesquisa no menu do WordPress.

Novo mega menu do WordPress

Seguindo o tema da 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 rápida e facilmente nosso melhor conteúdo.

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 construído uma solução personalizada para o WPBeginner, você pode seguir este tutorial sobre como adicionar um mega menu no WordPress para destacar melhor suas principais páginas.

O Editor de Blocos do WordPress (Finalmente)

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

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

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

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

Por exemplo, agora posso adicionar um bloco “Você sabia” muito legal sem escrever nenhum código:

Também redesenhamos 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 de blog WordPress gratuita.

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 completamente personalizadas quando necessário, porque é um construtor de páginas WordPress adequado de arrastar e soltar.

Embora tenha sido divertido aprender a usar o Gutenberg para criar páginas de destino personalizadas, ainda é necessário que muita codificação seja feita para a configuração antes que as equipes de marketing possam criar uma página de destino personalizada.

Considerando que, quando você está usando um plug-in do construtor de páginas, as equipes de marketing podem criar rapidamente páginas de destino personalizadas, layouts de funil, etc., sem qualquer ajuda da equipe de desenvolvimento.

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

Com isso dito, o editor de blocos é incrível, e há muitos plugins de blocos do WordPress que você pode usar para criar elementos de design interessantes para aprimorar seu conteúdo.

Aqui está outro bloco legal que nosso novo tema tem para destacar plugins em destaque:

O SeedProd é o construtor de páginas de arrastar e soltar mais amigável para iniciantes para WordPress. Ele vem com mais de 150 modelos pré-fabricados, e seu recurso de construtor de temas permite que você crie temas WordPress completamente personalizados (sem nenhum código). Experimente o SeedProd hoje »

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

Mudando de Yoast para AIOSEO

Por muito tempo, o site WPBeginner estava usando uma versão muito antiga e personalizada do plugin Yoast SEO (v 2.3.5).

Para colocar em perspectiva, eles estão na versão 17 agora.

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

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

Então, no início de 2020, adquirimos o AIOSEO, o plug-in de SEO all-in-one original, e minha equipe o reformulou completamente.

Estou super orgulhoso do trabalho que nossa equipe fez e tem todos os recursos de SEO que você precisa 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 seus rankings 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 nossa classificação de conteúdo com vídeos, mapa do site RSS para ajudar nosso conteúdo a ser indexado 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 é o melhor plugin de SEO do mercado e, o mais importante, tem um preço justo para pequenas empresas e agências.

Planejo escrever um artigo completo nas próximas semanas sobre por que mudamos 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 todo o poderoso recursos que estou usando no WPBeginner.

Melhorias de velocidade do WordPress

Vários estudos mostraram que sites mais rápidos melhoram a experiência do usuário, aumentam o tempo no site e as conversões gerais.

É também por isso que o Google fez da velocidade do site um fator de classificação de SEO.

Agora, 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 que estávamos seguindo as práticas recomendadas de velocidade do WordPress, mas com nosso novo design de tema, fizemos várias melhorias notáveis ​​de velocidade.

Aqui estão nossos resultados do Google Page Speed:

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

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

E antes que você pergunte, o site WPBeginner tem 68 plugins ativos atualmente.

Então você deve estar se perguntando como eu consegui adicionar mais conteúdo no site enquanto reduzia o tamanho da página e tornava tudo mais rápido?

Bem, eu removi coisas que senti que não precisávamos mais, e essas são coisas que eu realmente quero que mais proprietários de sites considerem fazer também.

Isso não apenas 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á custos e melhorará a pegada de carbono do seu site.

Desativando o Gravatar dos comentários do WordPress

O WordPress vem com um serviço de terceiros embutido chamado Gravatar, abreviação de Avatares reconhecidos globalmente.

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

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

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

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

Essa simples mudança melhorou drasticamente nossos tempos de carregamento de página e pontuação de velocidade do site.

Removendo fontes personalizadas de terceiros

Serei honesto, nunca pensei duas vezes em fontes personalizadas no passado.

Era algo que parecia normal e fazia o site parecer bom do ponto de vista da tipografia, pelo menos se você tiver a sorte de ter uma internet rápida.

No antigo tema WPBeginner, usamos uma fonte personalizada da Adobe chamada Proxima Nova, uma fonte de ícone popular chamada FontAwesome, e nossos pop-ups OptinMonster estavam usando o Source Sans Pro das fontes do Google.

Quando visitei o site de um local remoto com baixa qualidade de internet, realmente percebi o tamanho do impacto de desempenho dessas fontes na 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 em países em desenvolvimento ao WPBeginner, aprender WordPress e aumentar sua presença online.

O novo tema WPBeginner v6 usa as fontes padrão do sistema que percorreram um longo caminho. Eles ficam ótimos em todos os dispositivos e, claro, são super rápidos.

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

Se você fizer login no painel do WordPress ou usar o Github, notará que nossas fontes são semelhantes porque ambas as plataformas mudaram para fontes do sistema anteriormente.

Embora a remoção de fontes personalizadas possa não ser uma solução viável para todos os sites de negócios, é definitivamente algo que acredito que designers e desenvolvedores devem estar atentos quando se trata de velocidade.

Algumas práticas recomendadas que podem ajudar:

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

Desativando fontes personalizadas no OptinMonster

Uma vez que o tema foi projetado e codificado, ainda tive 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 ainda estavam carregando as fontes do Google.

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

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

Acontece que não fui o primeiro a solicitar esse recurso, e o OptinMonster já tinha uma solução de API que permite não apenas desabilitar as fontes do Google, mas também carregar qualquer fonte da web personalizada 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.

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

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

Primeiro, adicione o seguinte trecho de JS para desabilitar 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, não se esqueça de alterar as fontes para corresponder às fontes do seu site. Isso basicamente aplicará a família de fontes acima a todas as campanhas do OptinMonster que carregam em seu site.

Mudou de W3 Total Cache para WP Rocket

Por muito tempo, eu estava executando uma configuração altamente personalizada do plugin W3 Total Cache no WPBeginner.

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

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

Este plugin é crucial se você deseja melhorar a velocidade do seu site.

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

Basta ir à guia Regras Avançadas e adicionar seu slug de afiliado na configuração Nunca armazenar em cache URLs.

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 inflar artificialmente suas contagens de cliques e impactar suas métricas de afiliados.

Eu pedi à equipe do WP Rocket para ver se eles podem detectar automaticamente plugins de afiliados populares e pré-preencher a tag de URL excluída para torná-lo mais amigável para iniciantes, e espero que eles implementem a sugestão.

O que vem a seguir?

Tenho grandes planos para 2022, por isso queria colocar o novo design do site ao vivo antes do final deste ano.

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

Está chegando em breve e espero lançá-lo no início do segundo trimestre de 2022.

Também estou planejando experimentar mais no novo editor de blocos para criar uma melhor experiência geral de leitura para você.

Fora isso, fique de olho no nosso canal do YouTube, pois vamos fazer coisas muito legais por lá em 2022.

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

Sinceramente,
Syed Balkhi
Fundador do WPBeginner

O post WPBeginner v6 – Nos bastidores do nosso novo design de site apareceu pela primeira vez no WPBeginner.