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 tornar suas postagens e páginas um pouco sofisticadas.
Agora, você pode saber que tem a capacidade de alternar entre os editores de texto e visual no WordPress para lançar algum 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 edição de 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? Sim, é muito mais fácil, então queremos descrever como fazer isso aqui. Lembre-se de que, embora estejamos tentando tornar esse processo o mais simples possível, é útil ter um pouco de conhecimento de CSS se você quiser descobrir todos os benefícios dos estilos personalizados.
Vamos dar uma olhada em como adicionar estilos personalizados ao editor visual do WordPress.
Adicione estilos personalizados ao editor visual do WordPress adicionando código
Esta primeira opção requer que você saiba um pouco sobre como incorporar e modificar CSS, mas vou lhe dar um pequeno passo a passo 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 quiser sobrecarregar seu site com um plugin.
O objetivo disso é adicionar um novo menu suspenso que inclui estilos personalizados em seu editor visual do WordPress, que permite selecionar elementos em seu editor e, em seguida, aplicar estilos personalizados a eles. Se você estiver desenvolvendo um novo tema, localize seu arquivo functions.php e coloque o código abaixo nesse arquivo ou se estiver trabalhando com um tema já construído, cole este código no arquivo functions.php de um tema filho .
function myprefix_mce_buttons_1( $buttons ) {
array_unshift( $buttons, ‘styleselect’ );
return $buttons;
}
add_filter( ‘mce_buttons_1’, ‘myprefix_mce_buttons_1’ );
Volte ao 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 conectamos ao “mce_buttons_1? Isso coloca o botão do menu de formatos na primeira linha do editor 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 3ª 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 em seu arquivo functions.php que adicionará 2 novos estilos ao menu suspenso Formatos – “Botão Tema” e “Destaque”.
/**
* Add custom styles to the mce formats dropdown
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
*/
function myprefix_add_format_styles( $init_array ) {
$style_formats = array(
// Each array child is a format with it’s own settings – add as many as you want
array(
‘title’ => __( ‘Theme Button’, ‘text-domain’ ), // Title for dropdown
‘selector’ => ‘a’, // Element to target in editor
‘classes’ => ‘theme-button’ // Class name used for CSS
),
array(
‘title’ => __( ‘Highlight’, ‘text-domain’ ), // Title for dropdown
‘inline’ => ‘span’, // Wrap a span around the selected content
‘classes’ => ‘text-highlight’ // Class name used for CSS
),
);
$init_array[‘style_formats’] = json_encode( $style_formats );
return $init_array;
}
add_filter( ‘tiny_mce_before_init’, ‘myprefix_add_format_styles’ );
Você pode alterar os títulos para mostrar nomes diferentes em seu 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, certifique-se de verificar o WordPress Codex para uma explicação mais detalhada dos parâmetros aceitos e valores de retorno.
Agora que você tem novos estilos, você pode destacar o conteúdo em seu editor e aplicar os estilos. Observe, como o formato “Theme Button” tem um parâmetro seletor? Isso significa que o estilo só pode ser aplicado a esse seletor específico (neste caso, a tag “a” ou “link”).
O segundo formato que adicionamos “Destaque” não tem um parâmetro seletor, mas sim um parâmetro “inline” que diz para aplicar o estilo a qualquer texto que você tenha destacado em seu editor e envolvê-lo em um intervalo 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 qualquer marcador no editor.
Portanto, agora você pode usar seus formatos personalizados, mas eles não parecerão diferentes até que você adicione algum CSS personalizado ao seu site para estilizá-los. Você deve localizar a folha de estilo do seu tema (se estiver criando o seu próprio) ou tema filho e colar o seguinte código CSS no arquivo.
.theme-button {
display: inline-block;
padding: 10 15px;
color: #fff;
background: #1796c6;
text-decoration: none;
}
.theme-button:hover {
text-decoration: none;
opacity: 0.8;
}
.text-highlight {
background: #FFFF00;
}
Agora, isso adicionará estilo aos seus novos formatos para o front-end para que, quando aplicado, você possa 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ê está construindo seu próprio tema, então você vai querer criar um novo arquivo css em seu tema chamado “editor-style.css” (você pode nomeá-lo como quiser, apenas certifique-se de editar o snippet abaixo de acordo) com o CSS personalizado adicionado para seus formatos e, em seguida, adicione a função abaixo para carregá-la no backend.
function 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, precisará adicioná-lo ao seu tema filho, apenas certifique-se de fornecer um nome exclusivo para que não entre em conflito com o tema pai ou se o tema pai já tiver um arquivo CSS para no 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 primeiro antes de carregar o arquivo CSS do editor do tema pai e, se o localizar, ele será 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 por conta própria, 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.
Basta procurar, instalar e ativar o plugin TinyMCE Custom Styles e ativá-lo em seu site WordPress.
Vá para Configurações> TinyMCE prof.styles no lado esquerdo do seu painel do WordPress. É aqui que você modifica suas configurações para o plug-in.
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 para clicar na opção Salvar configurações antes de prosseguir para a próxima etapa.
Depois de salvar as configurações, role para baixo para selecionar o botão Adicionar novo estilo.
É aqui que você personaliza a aparência dos seus estilos personalizados. É 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 deseja um seletor, embutido ou tipo de bloco. Sinta-se à vontade para usar a captura de tela acima para preencher as classes e estilos CSS ou criar seus próprios, dependendo do que você planeja usar no menu suspenso. Feito isso, clique em Salvar configurações na parte inferior da página.
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. Ele aparece na segunda linha. Depois de clicar no menu suspenso, ele revelará o novo estilo que você acabou de criar.
Clique na opção Big Blue Button, ou o que você criou, para vê-lo revelado 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 consultando a página do códice do WordPress dedicada a este tópico.
Deixe-nos saber na seção de comentários se você tiver alguma dúvida sobre como adicionar estilos personalizados ao editor visual do WordPress. E sinta-se à vontade para compartilhar quaisquer estilos incomuns que você criou para tornar seu site um pouco melhor!
