COMO FAZER O EDITOR DO WORDPRESS PARECER SEU SITE

Embora o WordPress esteja cada vez mais à beira de se tornar uma estrutura de aplicativos de pleno direito , o editor depostagens humilde   continua a ser a área da interface que os usuários passam a maior parte do tempo.

É uma parte do backend que viu melhorias significativas ao longo dos últimos anos – o recente movimento para a versão 4.0 do TinyMCE   no WordPress 3.9, que  é um destaque – mas ainda há muito espaço para melhorias.

Um dos problemas mais comuns que os usuários têm com o editor é a necessidade de alternar constantemente entre os modos de edição e visualização para ver como o conteúdo realmente parecerá ao vivo.

Neste artigo, vamos abordar esse problema exato e dividir a forma de personalizar o editor de texto do WordPress para procurar e funcionar como o seu design de front-end.

Por que eu gostaria de personalizar o editor?

Quando você está ocupado tirando um rascunho inicial de uma postagem ou página, a aparência final do texto é a última coisa em sua mente. O que importa é diminuir seus pensamentos e – como Steven Pressfield colocou tão elegantemente –  cobrindo a tela .

À medida que você passa para o negócio sério de editar e revisar, o fato de seu conteúdo existir em um contexto torna-se cada vez mais importante. Normalmente, isso se manifesta dependência tão pesado sobre o built-in de visualização botão.

Vamos ser claros – não há nada de intrinsecamente errado com a visualização botão. É uma funcionalidade fantástica para ter ao seu alcance.

Se você está simplesmente pulando para atualizar uma linha ou duas em um artigo, é uma ótima maneira de verificar suas alterações antes de bater  Publicar . Se você precisa dar a um artigo uma revisão completa antes de enviar para revisão, é igualmente útil.

Onde está muito longe do ideal é no corte diário e no impulso de reunir um rascunho principal. Na verdade, quando você está trabalhando em uma peça longa em uma conexão remota potencialmente lenta, ela pode rapidamente se tornar um grande problema por dois motivos importantes:

1. Mudança de contexto: a escrita é sobre entrar em um groove. Uma vez que você está dentro, você quer ficar lá. Ter que mudar constantemente entre as janelas do navegador e diferentes contextos visuais é um assassino para foco e fluxo.
2. Tempo: Todas as ida e volta entre o editor e a janela de visualização se somam ao longo de uma semana de trabalho. Teste você mesmo. Na próxima vez que você estiver trabalhando em uma peça, anote a frequência com que você troca as abas. Esse é o momento em que poderia ter sido passado a polir o conteúdo real.

Ao personalizar a tela de edição para combinar com sua exibição frontal, você remove a necessidade de visualizar constantemente o seu trabalho. Isso torna o editor muito mais uma ferramenta WYSIWYG genuína.

Por exemplo, talvez você esteja preocupado com um parágrafo particular é um pouco longo, dado o generoso tamanho da linha e o tamanho da fonte que seu tema emprega (como visto aqui no WPMU DEV). Personalize seu editor de postagem e os resultados finais estão lá na tela à sua frente enquanto você digita.

Aproveitar o tempo extra para personalizar o backend tem algumas vantagens maiores adicionais, vale a pena salientar:

1. Isso torna muito mais fácil para os membros da equipe não técnica inserir conteúdo em um contexto que lhes seja instantaneamente familiar.
2. Isso faz um excelente toque final de alta qualidade para adicionar quando você está preparando um site para um cliente externo que pode estar vindo para o WordPress pela primeira vez.

E quanto aos editores front-end?

Alguns de vocês podem estar perguntando neste ponto: e os editores de conteúdo de front-end? Não é isso que eles são projetados para fazer? E não havia conversa sobre o plugin do Front-end Editor instalado na próxima versão do WordPress como recurso principal?

Boas perguntas. Vamos levá-los um por vez.

Os editores de front-end são uma característica elegante e uma que está sendo cada vez mais fortemente pressionada pelos concorrentes para o WordPress, como Squarespace e Weebly.

A grande promessa destes editores é que eles deixam os usuários não-técnicos interagirem diretamente com o conteúdo de um site para fazer mudanças. Eles podem ser perfeitos se você está apenas olhando para fazer pequenas mudanças em seções de conteúdo existentes e geralmente é um instante para administradores menos experientes ou proprietários de sites usar, assumindo que estão configurados corretamente.

A desvantagem é a gama restrita de funcionalidades que as soluções normalmente oferecem – tanto em termos de edição em si como de falta de acesso a recursos de postagem avançados, como caixas meta. Eles também colocam uma barreira entre você e a funcionalidade oferecida no resto do administrador do backend.

Depois, há a questão do fluxo de trabalho editorial e do controle a considerar. Um editor de front-end é ótimo se você quiser que as pessoas possam entrar e mudar as coisas imediatamente, mas isso não é sempre o caso.

O ponto final é a questão da complexidade. Juntar um sólido editor de front-end não é uma tarefa trivial. Muitos dos melhores plugins que existem são ofertas comerciais, o que significa que você está adicionando outro nível de dependência paga à sua configuração e que precisa se preocupar com futura compatibilidade com outras partes do seu tema.

Em suma, é uma questão complexa. Para bons argumentos em ambos os lados, recomendamos o caso racional de nosso próprio Chris Knowles contrao caso igualmente apaixonado de Fred Meyer .

Muitos de nós esperavam que uma parte dessa complexidade fosse atenuada pela inclusão do plugin do Front-End Editor no núcleo do WordPress.

Infelizmente, depois de muita emoção inicial, essas esperanças foram destinadas a serem destruídas.

Desde o final de 2013 até o final de novembro de 2014, este plugin estava em desenvolvimento ativo como um Plugin de Recursos,  o que significa que foi programado para a eventual liberação no núcleo.

O projeto, infelizmente, ficou paralisado desde então e foi movido para a lista de Plugins de Recursos Inativos. Infelizmente, é seguro dizer que não estaremos vendo sua aparência no núcleo em breve.

Se você estiver interessado em experimentar um editor de front-end, então recomendamos testar o Editor Front-end (gratuito), o Visual Composer (pago) ou o Live Composer  (pago), mas esteja ciente das possíveis complicações que temos Mencionado acima.

A abordagem que vamos tomar neste artigo, por outro lado, dá-lhe uma maneira simples de contornar esses pontos e chegar ao assunto em questão: fazer o seu conteúdo cantar.

Vamos começar a fazer acontecer.

Configurando o palco

Todo site terá, naturalmente, conteúdo diferente e implementações de temas potencialmente diferentes. Para os propósitos deste artigo, vamos tirar as coisas para lhe dar uma sólida compreensão dos conceitos básicos que você será livre para se inscrever nos requisitos específicos de sua própria instalação.

Estaremos usando uma configuração local do WordPress e começando com uma versão dos dados do teste da unidade de tema do WordPress para ilustrar nossos pontos. Se você está começando a olhar para personalizar o seu próprio ambiente, aproveitar esta abordagem oferece alguns benefícios óbvios:

1. Desenvolvendo localmente, você pode experimentar sem arriscar a interrupção de seus usuários ou colegas de trabalho.
2. Os dados do Teste da Unidade do Tema do WordPress fornecem um conjunto de conteúdo central sensivelmente organizado para testar suas alterações. É a plataforma perfeita para começar com a exploração de mudanças de tema de qualquer tipo, tanto na frente como na traseira.

No nosso caso, depois de baixar e importar o pacote inicial do WP Test  em uma nova instalação local do WordPress, selecionamos Twenty Fifteen como o tema.

Esta combinação nos dá uma série de páginas bem organizadas, tais como Marcação e Formatação e Alinhamento de Imagem , para jogar diretamentecom a caixa.

Se você está seguindo, você pode replicar essa abordagem ou simplesmente ativar seu próprio tema em uma instalação local com o conteúdo atual do site.

Recomendamos o primeiro como fase inicial. O conteúdo fornecido pelo WP Test é uma excelente maneira de verificar o quão completo o estilo do seu tema atual é antes de começar a fazer grandes mudanças nele.

Entendendo o que está acontecendo sob o capô

Agora que temos um conteúdo de amostra sensato para analisar, vamos levar algum tempo para entender o que está acontecendo sob o capô no WordPress antes de olhar para customizar o próprio editor.

Como mencionamos no topo, o WordPress é fornecido com o editor TinyMCE de código aberto como padrão. Isto é, por assim dizer, o fundo da pilha temática.

O TinyMCE tem sua própria folha de estilo que controla como o conteúdo é exibido dentro dele. Por padrão, isso é felizmente inconsciente do mundo exterior. Os desenvolvedores do TinyMCE foram sensíveis o suficiente para abrir espaço para que folhas de estilos adicionais fossem carregadas, no entanto, através de um gancho chamado content_css .

Por sua vez, os desenvolvedores do WordPress foram gentis o suficiente para envolver isso em uma função nativa chamada add_editor_style. Isso foi incluído no núcleo do WordPress desde a versão 3.0.0.

Se você consultar a documentação on-line , você verá que esta função está escondida em wp-includes / theme.php . Nós estaremos olhando formas de chamar essa função diretamente em apenas alguns minutos.

Por padrão, o WordPress usa esta função para verificar a presença de um arquivo CSS no diretório raiz do seu tema chamado editor-style.css  que pode usar para editar o conteúdo do editor.

Então, se você está olhando para personalizar um tema existente, uma das primeiras questões que você precisa fazer é que um arquivo editor-style.cssjá existe no seu tema?

Se tomarmos o tema do Twenty Fifteen como um exemplo, podemos ver que ele realmente inclui esse arquivo. Uma alternância rápida entre as visualizações de visualização e administração da nossa página de Marcação e Formatação mostra que os principais estilos estão sendo replicados fielmente entre os ambientes.

Vamos dar um passo adiante e verificar que o estilo que estamos vendo na janela do editor é definitivamente controlado pelo editor-style.css . Uma rápida viagem ao Inspetor da Web é tudo o que precisamos para  confirmarque este é o caso.

Esperemos que o cenário básico seja relativamente claro nesta fase. Para recapitular:

• O editor do WordPress é alimentado pelo TinyMCE.
• O TinyMCE permite que seu estilo padrão seja substituído.
• O WordPress usa uma função chamada add_editor_stylepara especificar qual arquivo CSS deve ser usado para substituir o estilo padrão.
• Por padrão, o WordPress procura um arquivo chamado editor-style.css na raiz do tema ativo.

A próxima pergunta é como lidar com as suas próprias mudanças.

Fazendo suas próprias mudanças

Como sugerido acima, a primeira coisa que precisa ser esclarecida é a questão de saber se existe um arquivo de folha de estilo do editor padrão na raiz da pasta do seu tema.

Se houver, sugerimos fazer uma cópia no mesmo local e chamá-lo de custom-editor-style.css . Isso lhe dá um lugar limpo para começar a experimentar e uma maneira fácil de reverter para a configuração original.

Se não houver nenhum arquivo no lugar, crie um novo arquivo chamado custom-editor-style.css e coloque-o na raiz da sua pasta de temas.

Conectando seu CSS personalizado

Nosso próximo passo é dizer ao WordPress que procure nosso novo arquivo em vez do padrão. Vamos fazer isso adicionando uma substituição nas funções do nosso tema.php para ligar add_editor_stylee dizer para usar nossa nova folha de estilo.

Abra as funções do seu tema.php , adicione as seguintes linhas no final e salve.

Agora, verifique se o nosso editor está realmente usando a nova folha de estilo. Mais uma vez, uma rápida viagem ao Inspetor é tudo o que precisamos ter certeza. Como você pode ver abaixo, agora estabelecemos uma conexão com o nosso novo arquivo.

Agora vamos fazer algumas mudanças rápidas no arquivo CSS para garantir que eles estejam sendo apanhados no backend.

Antes de tudo, vou fazer com que esses cabeçalhos sejam uma sombra de verde verde, editando custom-editor-style.css .

Os cabeçalhos foram alterados ajustando o seguinte CSS:

E agora vamos adicionar uma borda sutil às nossas imagens.

#tinymce, no caso de você estar pensando, é o ID atribuído automaticamente à <body>tag no editor TinyMCE.

Podemos ver os resultados desta alteração imediatamente através da página Alinhamento de imagem.

Não iremos colocar em qualquer show show CSS no futuro próximo, mas, a partir desses dois exemplos simples, está claro que agora temos controle completo sobre o conteúdo da janela do editor. A borda rosa, aliás, foi criada com o seguinte CSS:

A partir deste ponto, é uma questão de passar por seu CSS existente e certificar-se de que ele combina com o seu editor de maneiras que tenham mais sentido para o seu caso de uso.

Usando a sua folha de estilos frontal existente como base

Se você não possui uma folha de estilo de editor existente para funcionar como fizemos aqui, você também pode importar a folha de estilos de frente frontal existente do seu site para usar como uma base. Vamos dar uma rápida olhada em como fazer isso.

Para importar sua folha de estilo de front-end existente, basta substituir o conteúdo de custom-editor-style.css com o seguinte:

É provável que as coisas pareçam um pouco quebradas, quando você faz isso, mas você tem uma boa separação de preocupações no lugar e uma base sólida para trabalhar.

Indo além

Os próximos passos a seguir dependerão exatamente de quão longe você deseja ir em termos de correspondência com a exibição do front-end para o editor. Sugerimos ter uma boa olhada na folha de estilo editor-style.css que acompanhou o Twenty Fifteen como ponto de partida para mapear sua estratégia CSS.

Também não se esqueça de consultar a documentação do WordPress para obter dicas sobre como adotar esta abordagem com recursos mais avançados, como adicionar estilos personalizados com base no tipo depublicação .

Antes de concluir, devemos mencionar algumas outras personalizações do TinyMCE que você pode querer explorar:

• Controle da exibição do botão no TinyMCE: Uma boa visão geral de nossa própria Raelene Wilson.
• TinyMCE Advanced: Um plugin para adicionar estilos personalizados como botões.

Conclusão

Controlar a exibição da janela do editor no WordPress irá economizar tempo como escritor e adicionar uma camada extra de polimento profissional ao seu tema.

Ao entender como os estilos são aplicados, você está em condições de personalizar tanto ou tão pouco como a situação exige.

Vamos recapitular as etapas:

1. Verifique se o seu tema vem com uma folha de estilo editor- style.css.
2. Crie sua própria folha de estilo personalizada e aponte para o WordPress.
3. Use a folha de estilos do editor existente como base ou importe seu estilo de tema principal.
4. Obtenha estilo.

Esperamos que este artigo o ajude a controlar o seu ambiente de trabalho.