Como adicionar estilos personalizados ao editor visual do WordPress

Como adicionar estilos personalizados ao editor visual do WordPress

Dê uma olhada no seu editor visual do WordPress. Existem algumas opções padrão para formatar e estilizar seu conteúdo, mas não muito em termos de personalização para deixar suas postagens e páginas um pouco mais sofisticadas.


Editor do WordPress

Agora, você pode saber que tem a capacidade de alternar entre os editores de texto e visual do WordPress para lançar CSS para criar coisas como botões e blocos de texto, mas isso é uma dor, e se você não tiver muita experiência em editar código, o editor de texto parece um pouco intimidador.

Não seria mais fácil se você pudesse criar seus próprios estilos personalizados, colocá-los em um menu suspenso no editor do WordPress e optar por usá-los sempre que precisar deles? Sim, é muito mais fácil, por isso queremos descrever como fazer isso aqui. Lembre-se de que, embora estejamos tentando tornar esse processo o mais simples possível, ajuda a ter um pouco de conhecimento de CSS, se você quiser descobrir todos os benefícios de estilos personalizados.

Vamos dar uma olhada em como adicionar estilos personalizados ao editor visual do WordPress.

Adicionar estilos personalizados ao WordPress Visual Editor adicionando código

Essa primeira opção exige que você saiba um pouco sobre como incorporar e modificar o CSS, mas mostrarei algumas dicas para ajudá-lo a aprender o básico, para que você possa usar esse conhecimento no futuro. Esta é uma boa opção se você não deseja sobrecarregar seu site com um plug-in.

O objetivo disso é adicionar um novo menu suspenso que inclua estilos personalizados no seu editor visual do WordPress, que permite selecionar elementos em seu editor e aplicar estilos personalizados a eles. Se você estiver desenvolvendo um novo tema, localize seu functions.php e insira o código abaixo nesse arquivo ou, se você estiver trabalhando com um tema já incorporado, cole esse código nas funções de um tema filho.php.

função myprefix_mce_buttons_1 (botões $) {
array_unshift (botões $, 'seleção de estilos');
retornar botões $;
}

add_filter ('mce_buttons_1', 'meuprefixo_mce_buttons_1');

Volte para o editor em uma de suas postagens do WordPress e agora você verá um novo botão “Formatos” na linha superior do editor. Observe como nos ligamos aos “mce_buttons_1? Isso coloca o botão do menu de formatos na primeira linha do editor de mce. Você também pode usar o filtro “mce_buttons_2” para colocá-lo na segunda linha ou “mce_buttons_3” para colocá-lo na terceira linha.

Então, agora que você ativou o item de menu, é hora de adicionar seus estilos personalizados para usar em suas postagens. Pegue o código listado abaixo e cole-o no seu functions.php arquivo que adicionará 2 novos estilos ao menu suspenso Formatos – “Botão Tema” e “Destaque”.

/ **
* Adicione estilos personalizados ao menu suspenso dos formatos mce
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
função myprefix_add_format_styles ($ init_array) {
$ style_formats = array (
// Cada filho de matriz é um formato com suas próprias configurações - adicione quantas quiser
matriz (
'title' => __ ('Botão Tema', 'domínio de texto'), // Título para o menu suspenso
'selector' => 'a', // Elemento a ser segmentado no editor
'classes' => 'theme-button' // Nome da classe usada para CSS
),
matriz (
'title' => __ ('Highlight', 'text-domain'), // Título da lista suspensa
'inline' => 'span', // Agrupa uma extensão ao redor do conteúdo selecionado
'classes' => 'text-realce' // Nome da classe usada para CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
retornar $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

Você pode alterar os títulos para mostrar nomes diferentes no menu suspenso, adicionar / remover itens da matriz, etc. Você pode modificar praticamente qualquer coisa neste código para revelar seus próprios estilos de formato personalizados. Codex WordPress para uma explicação mais aprofundada dos parâmetros aceitos e valores de retorno.

Agora que você tem novos estilos, pode realçar o conteúdo no seu editor e aplicar os estilos. Observe como o formato “Botão Tema” possui um parâmetro seletor? Isso significa que o estilo só pode ser aplicado a esse seletor específico (nesse caso, a tag “a” ou “link”). O segundo formato que adicionamos “Highlight” não possui um parâmetro seletor, mas um parâmetro “inline”, que diz para aplicar o estilo a qualquer texto que você destacou em seu editor e envolvê-lo em um espaço com seu nome de classe exclusivo. Você pode ver um exemplo do nosso tema Total WordPress sobre como usamos formatos, para que os usuários possam aplicar facilmente uma aparência de lista de verificação a quaisquer marcadores no editor.

lista de controle

Portanto, agora você pode usar seus formatos personalizados, mas eles não parecerão diferentes até que você adicione CSS personalizado ao seu site para estilizá-los. Você deve localizar a folha de estilo do seu tema (se estiver criando seu próprio) ou tema filho e colar o seguinte código CSS no arquivo.

.botão de tema {
display: bloco embutido;
estofamento: 10 15 px;
cor: #fff;
fundo: # 1796c6;
decoração de texto: nenhuma;
}
.botão de tema: passe o mouse {
decoração de texto: nenhuma;
opacidade: 0,8;
}
.destaque do texto {
fundo: # FFFF00;
}

Agora, isso adicionará estilo aos seus novos formatos para o front-end; assim, quando aplicado, você poderá vê-los ao vivo. Yay! Mas não seria legal também ver seus estilos no editor real quando eles estão sendo aplicados? Para fazer isso, você precisará usar a função “editor stylesheet” no WordPress. Se você estiver criando seu próprio tema, criará um novo arquivo css no seu tema chamado “editor-style.css” (você pode nomear o que quiser, apenas certifique-se de editar o snippet abaixo de acordo) com o CSS personalizado adicionado aos seus formatos e adicione a função abaixo para carregá-la no back-end.

função myprefix_theme_add_editor_styles () {
add_editor_style ('editor-style.css');
}
add_action ('init', 'myprefix_theme_add_editor_styles');

Se você estiver trabalhando com o tema de outra pessoa, será necessário adicioná-lo ao tema filho, apenas dê um nome exclusivo para que não entre em conflito com o tema principal ou se o tema principal já tiver um arquivo CSS para o editor, você pode copiá-lo e colá-lo no seu tema filho (sem adicionar o código PHP acima) e adicionar seu novo CSS porque o WordPress verificará o tema filho antes de carregar o arquivo CSS do editor do tema pai e, se ele o localizar carregue-o a partir do tema filho.

Adicione estilos personalizados ao editor visual do WordPress com um bom plug-in

Se você não tem tempo para brincar com o código ou não consegue entender sozinho, há boas notícias. Existe um plugin que permite que você complete exatamente o que acabamos de fazer acima, sem ter que mexer no código.

Plugin de estilos personalizados do TinyMCE

Basta procurar, instalar e ativar o Plug-in de estilos personalizados do TinyMCE e ative-o no seu site WordPress.

Configurações de estilos personalizados do TinyMCE

Vamos para Configurações> TinyMCE prof.styles no lado esquerdo do seu painel do WordPress. É aqui que você modifica suas configurações para o plugin.

Configurações de estilos personalizados do TinyMCE

O plug-in permite que você escolha onde estão suas folhas de estilo ou onde deseja colocá-las. É recomendável que você crie um novo diretório personalizado. Selecione a terceira opção e dê um nome ao seu diretório e, em seguida, desça a página e clique Salvar configurações antes de prosseguir para a próxima etapa.

Estilos personalizados TinyMCE Adicionar novo

Depois de salvar as configurações, role para baixo para selecionar o botão Adicionar novo estilo.

Opções de estilos personalizados do TinyMCE

É aqui que você personaliza como deseja que seus estilos personalizados sejam. É basicamente um editor simples baseado na Web que gera o código CSS para você. Digite um Título para o que você deseja que apareça no menu suspenso. Escolha se você deseja um seletor, embutido ou tipo de bloco. Sinta-se à vontade para usar a captura de tela acima para preencher as classes e os estilos CSS ou criar seus próprios, dependendo do que você planeja usar no menu suspenso. Depois de concluído, clique em Salvar configurações na parte inferior da página.

Formato de estilos personalizados TinyMCE

Agora é hora de ver como o novo estilo personalizado fica no seu editor. Abra uma nova postagem ou página e localize o menu suspenso Formatos no lado esquerdo do editor Visual. Aparece na segunda linha. Depois de clicar no menu suspenso, ele revelará o novo estilo que você acabou de criar.

Formato de estilos personalizados do TinyMCE em uso

Clique na opção Big Blue Button, ou o que você criou, para vê-la revelada em seu editor. Para usá-lo, basta destacar o texto que deseja formatar, clicar na sua opção e pronto!

Conclusão

É tudo por agora! Você sempre pode aprender mais sobre como usar novos estilos, verificando as Página de codex do WordPress dedicado a este tópico.

Na seção de comentários, informe-nos se você tiver alguma dúvida sobre como adicionar estilos personalizados ao editor visual do WordPress. Sinta-se livre para compartilhar qualquer estilo incomum que você tenha criado para tornar seu site um pouco melhor!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map