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. Seu site está pronto? Embora ainda não saibamos exatamente que forma será necessária, esse novo sistema de conteúdo será adicionado ao WordPress no futuro. Vamos dar uma olhada nos possíveis impactos que isso pode ter em seu site e como identificar e corrigir áreas problemáticas com antecedência.

gutenberg wordpress

Gutenberg é um projeto WordPress que visa dar aos usuários mais flexibilidade na concepção de seu conteúdo. Essencialmente, o projeto visa substituir o editor atual, que funciona principalmente como um processador de texto, com uma interface mais visual e estruturada. Atualmente, o Gutenberg é um plugin, e dá 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 uma maneira simplificada e muito intuitiva.

Para saber mais sobre Gutenberg, cliquez ici.

Gutenberg é uma grande empresa e provavelmente atingirá muitos endpoints 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 para o conteúdo. Seu tema é compatível? Com o que Gutenberg se parecerá uma vez ativo?
  • Seus plugins: É possível que o Gutenberg possa interagir com seus outros plugins inesperadamente. Veremos o que isso poderia ser e o que precisa ser feito para resolver os problemas que surgem.
  • Seu conteúdo: O Gutenberg irá afetar a maneira como o seu conteúdo é exibido. Veremos como isso pode mudar a aparência de suas páginas e analisar algumas possíveis soluções caso encontre problemas.

Antes de começar, é uma boa ideia configurar uma área de teste onde você possa experimentar Gutenberg sem colocar em risco seu 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ê poderá realizar os testes diretamente no seu site. Observe que isso pode ser arriscado, pois ativamos e desativamos várias partes do seu site. Se você estiver fazendo o teste ao vivo, certifique-se de criar um backup do seu site antes de começar.

Uma vez que você sabe onde vai testar, vá ao diretório do plugin e encontre o Gutenberg. Uma vez 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 neste estágio, como erros de banco de dados ou problemas com o Painel do WordPress, pule 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 - felizmente para nós.

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 ​​em seu site para garantir que eles sempre apareçam corretamente. O principal objetivo aqui é focar nos elementos da área de conteúdo principal de suas páginas, especialmente os blocos de conteúdo e imagem. Se você vir problemas, é provável que os estilos de Gutenberg tenham precedência sobre os do seu site.

Para corrigir isso, você precisará identificar de onde o problema está vindo. Normalmente, este será um seletor CSS baseado em um elemento HTML ou uma prioridade de estilo Gutenberg em suas próprias classes. De qualquer forma, tente identificar onde o erro ocorre. Então, determine por que os estilos de Gutenberg substituem o seu e corrija seu código para dar prioridade.

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

Da mesma forma, você deseja executar no seu painel de uma vez por todas os mesmos testes. As opções temáticos e outras seções personalizadas geradas pelo seu tema parece ser os maiores culpados até agora. Depois de ter identificado problemas de estilo nessas áreas, normalmente você pode corrigi-los, alterando ou criando um tema criança e ajustar a CSS lá.

Depois de testar o seu tema, os plugins do seu site são os seguintes. Especificamente, manter um olho em plugins que fornecem códigos de acesso que você usa em seu conteúdo (por exemplo, Gravidade Forms), plugins que afetam a aparência do seu conteúdo (por exemplo, plugins de acessibilidade que afetam o tamanho do texto) e plugins que inserem diretamente elementos em sua página (como Advanced Custom Fields).

Para auditar essa área, comece coletando uma lista de todos os códigos de acesso usados, 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ê está tendo problemas de estilo, provavelmente você está tendo o mesmo problema de antes e precisa 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 de acesso for exibido e não o conteúdo esperado (isto é, sua página exibirá [Shortcode]em vez de fazer a coisa certa), há outra solução. Neste caso, você pode olhar para o bloco onde está o shortcode e confirmar que ele não é considerado texto (procure e remova rótulos indesejados ao redor do shortcode). Se o problema persistir, mover o shortcode 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 criação de elemento 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.

Isso não é tão urgente quanto os outros problemas de que falamos, mas pode haver algumas complicações na forma como seu conteúdo é exibido. A maioria desses problemas virá de pequenas mudanças de estilo ou organização de blocos. Para corrigir isso, você terá que jogar com o sistema de blocos até chegar a sua página do jeito que você quer.

O que fazer quando há muitos problemas

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

Primeiro, observe qual é o erro e quais etapas levaram ao erro. Quanto mais informações você puder 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 de teste, nesse momento, isso é tudo que você pode fazer por enquanto. Continue verificando as notas da versão para ver se o problema foi resolvido ou resolva você mesmo.

Se você estava trabalhando em seu site ao vivo, desligar Gutenberg deve colocar tudo de volta ao normal. Se não, então é hora de voltar para este backup que você fez no início do tutorial!

Gutenberg pretende ser uma grande mudança no ambiente WordPress, que procura mudar o conteúdo para melhor. Antes de chegar ao ramo 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, por favor, deixe um comentário abaixo.

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.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

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