Ir para o conteúdo principal

Como preparar seu site para Gutenberg

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Gutenberg está chegando em breve ao WordPress. O seu site está pronto? Embora ainda não saibamos exatamente qual será a forma, esse novo sistema de conteúdo será adicionado ao WordPress no futuro. Vamos dar uma olhada nos possíveis impactos que isso poderia ter no seu site e como identificar e corrigir as áreas problemáticas com antecedência.

gutenberg wordpress

Gutenberg é um projeto WordPress que visa dar aos usuários mais flexibilidade na criação de seu conteúdo. Essencialmente, o projeto visa substituir o editor atual, que opera principalmente como um processador de texto, por uma interface mais visual e estruturada. Atualmente, o Gutenberg é um plug-in e oferece aos usuários a capacidade de editar seu conteúdo da mesma maneira que o Visual Composer ou outros editores arrastam e soltam, mas de maneira simplificada e muito intuitiva.

Para saber mais sobre Gutenberg, cliquez ici.

Gutenberg é uma empresa enorme e provavelmente atingirá muitos pontos de extremidade em seu site. Estas são as três áreas que exploraremos em busca de possíveis problemas:

  • Seu tema: Gutenberg vem com seu próprio conjunto de estilos de conteúdo. O seu tema é compatível? Como será Gutenberg uma vez ativo?
  • Seus plugins: É possível que o Gutenberg interaja com seus outros plugins inesperadamente. Vamos ver o que isso poderia ser e o que precisa ser feito para resolver os problemas que surgirem.
  • Seu conteúdo: Gutenberg afetará a maneira como seu conteúdo é exibido. Veremos como isso pode alterar a aparência de suas páginas e analisaremos algumas soluções em potencial, se você encontrar problemas.

Antes de começar, é uma boa ideia configurar uma área de teste na qual você possa experimentar o Gutenberg sem comprometer o site principal. Idealmente, você deve criar sua própria área de teste ou criar uma cópia local do seu site. Para obter mais informações sobre como executar qualquer uma dessas tarefas, consulte o seguinte tutorial: Como instalar o WordPress localmente.

Se isso não for possível, você pode executar os testes diretamente no seu site. Observe que isso pode ser arriscado, pois habilitaremos e desabilitaremos várias partes do seu site. Se você fizer o teste ao vivo, crie um backup do seu site antes de começar.

Depois de saber onde você vai testar, vá para o diretório de plugins e localize Gutenberg. Depois de instalado e ativado, continue lendo.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Agora que o Gutenberg está instalado, vamos dar uma olhada na primeira seção do seu site que pode ser afetada: seu tema. Se já houver problemas importantes nesse estágio, como erros no banco de dados ou no Painel do WordPress, vá para a seção O que fazer quando há muitos problemas.

Como o Gutenberg interage principalmente com o conteúdo do site, basta testar algumas coisas - para nossa sorte.

A primeira é que Gutenberg vem com sua própria folha de estilos e um conjunto de estilos. Verifique cada um dos diferentes tipos de páginas e modelos usados ​​no seu site para garantir que eles sempre apareçam corretamente. O principal objetivo aqui é focar os elementos na área de conteúdo principal de suas páginas, especialmente os blocos de conteúdo e imagem. Se houver problemas, é provável que os estilos de Gutenberg tenham precedência sobre os do seu site.

Para corrigir isso, você precisará identificar de onde vem o problema. Normalmente, esse será um seletor de CSS com base em um elemento HTML ou uma prioridade no estilo Gutenberg em suas próprias classes. De qualquer forma, tente identificar onde o erro ocorre. Em seguida, determine por que os estilos de Gutenberg substituem o seu e corrija seu código para dar prioridade a ele.

Tente fazer correções em seu próprio tema (ou melhor ainda, em um tema filho ou área especificada para CSS no seu tema), em vez de modificar Gutenberg. Se você editar diretamente um dos arquivos no Gutenberg, é provável que seja substituído quando o plug-in for atualizado.

Da mesma forma, você desejará executar no seu painel de uma vez por todas os mesmos testes. As opções de temas e outras seções personalizadas geradas pelo seu tema parecem ser os maiores culpados até agora. Depois de identificar os problemas de estilo nessas áreas, geralmente é possível corrigi-los alterando ou criando um tema filho e ajustando o CSS para esse local.

Depois de testar seu tema, os plugins no seu site são os seguintes. Especificamente, fique de olho nos plug-ins que fornecem os códigos de acesso usados ​​em seu conteúdo (por exemplo, Gravity Forms), nos plug-ins que afetam a aparência do seu conteúdo (por exemplo, plug-ins de acessibilidade que afetam o tamanho do texto) e no plug-ins que inserem diretamente elementos em sua página (como Campos personalizados avançados).

Para auditar essa área, comece coletando uma lista de todos os códigos de acesso que você usa, bem como as páginas nas quais eles existem. Com sua lista em mãos, visite cada uma dessas páginas para ver se elas funcionam conforme o esperado. Se você estiver com problemas de estilo, é provável que tenha o mesmo problema de antes e precise reajustar seus estilos.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

No entanto, se o código abreviado for exibido e não o conteúdo esperado (ou seja, sua página exibirá o [Shortcode]em vez de fazer a coisa certa), há outra solução. Nesse caso, você pode olhar para o bloco em que o código abreviado está e confirmar que não é considerado texto (pesquise e remova rótulos indesejados ao redor do código abreviado). Se o problema persistir, mover o código de acesso para um tipo de bloco mais apropriado deve reiniciar tudo.

Esse problema decorre do mesmo problema com o qual já lidamos: substituições de estilo. Identifique os elementos afetados e corrija o CSS.

A última área que examinaremos para questões conflitantes é a criação de elementos. Qualquer plug-in que insira elementos HTML em uma página sem usar códigos de acesso é suspeito aqui, por exemplo, quando o PHP extrai campos personalizados do plug-in Advanced Custom Fields.

O slide mais comum com a criação de elementos gira em torno de blocos incompatíveis. Como Gutenberg fornece seus próprios estilos, é possível que, se seus itens forem criados dentro de um bloco não intencional, eles não sejam exibidos corretamente. A correção para isso é garantir que seu código adicione elementos ao bloco em que você deseja que eles estejam.

Não é tão urgente quanto os outros problemas de que falamos, mas pode haver algumas complicações na maneira como seu conteúdo é exibido. A maioria desses problemas virá de pequenas mudanças de estilo ou bloqueio de organização. Para corrigir isso, você terá que jogar com o sistema de bloqueio até obter a página da maneira que deseja.

O que fazer quando há muitos problemas

Você encontrou um problema que não pôde resolver com as sugestões deste tutorial? Não entre em pânico! Ainda há tempo para que o Gutenberg seja integrado ao núcleo do WordPress.

Primeiro, observe qual é o erro e quais etapas levaram ao erro. Quanto mais informações você coletar, melhor. Envie todas essas informações para a equipe de Gutenberg. Com sorte, eles poderão determinar o problema e corrigi-lo em uma versão futura.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Se você estava trabalhando em um site intermediário, neste momento, é tudo o que você pode fazer por enquanto. Continue verificando as notas de versão para ver se seu problema foi resolvido ou trabalhe para resolvê-lo.

Se você estava trabalhando no seu site ao vivo, desativar o Gutenberg deve colocar tudo de volta ao normal. Caso contrário, é hora de voltar para esse backup que você fez no início do tutorial!

Gutenberg pretende ser uma grande mudança no ambiente do WordPress, que busca mudar o conteúdo para melhor. Antes de atingir a ramificação principal, verifique se o site funcionará com as novas alterações. Se você tiver algum problema além dos listados aqui, melhores soluções ou correções para algo neste tutorial, deixe um comentário abaixo.

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
3 ações
ação2
chilrear
Enregistrer1