Você deseja adicionar estilos personalizados no editor visual do WordPress? Adicionar estilos personalizados permite aplicar formatação rapidamente sem ir para o editor de texto. Neste artigo, mostraremos como adicionar estilos personalizados ao editor visual do WordPress.
Nota: Este tutorial requer conhecimento básico de CSS.
Quand você vai precisa adicionar um estilo personalizado no Editor Visual do WordPress?
Por padrão, o editor visual do WordPress oferece opções básicas de formatação e estilo. No entanto, às vezes você precisará ter estilos personalizados à mão que permitirão, por exemplo, adicionar botões CSS, conteúdo, ganchos, etc.
Você sempre pode alternar do editor visual para o editor de texto e adicionar código HTML e CSS personalizado. Mas se você usa certos estilos regularmente, seria melhor adicioná-los ao editor visual para que possa reutilizá-los facilmente.
Isso economizará muito tempo e também permitirá que você use sempre os mesmos estilos em todos os lugares do seu site da Web.
Mais importante, você pode editar ou atualizar estilos facilmente, sem precisar editar os artigos em seu site.
Agora vamos descobrir como fazer isso no WordPress.
Método 1: adicionar um estilo personalizado com um plug-in
A primeira coisa que você precisa fazer é instalar e ativar o plug-in " Estilos TinyMCE personalizado ". Para mais detalhes veja nosso guia passo a passo sobre como instalar um WordPress Plugin.
Após a ativação, você deve visitar " Configurações> Configurações »Estilos personalizados TinyMCE Para definir as configurações do plug-in.
O plugin permite que você escolha a localização dos arquivos de folha de estilo. Ele pode usar seu tema ou estilo de tema filho, ou você pode escolher um local personalizado.
Depois disso, você precisa clicar no botão " salve todas as configurações Para armazenar suas configurações.
Agora você pode adicionar seus estilos personalizados. Você precisa rolar para a seção de estilo e clicar no botão Adicionar novo estilo ".
Você deve primeiro inserir um título para o estilo. Este título será exibido no menu suspenso. Então você precisa definir. Seja uma linha, um bloco ou um elemento de seleção.
Depois disso, adicione uma classe CSS e, em seguida, adicione suas regras CSS como mostrado na imagem abaixo.
Depois de adicionar um estilo CSS, basta clicar no botão “salvar todas as configurações” para salvar suas alterações.
Agora você pode editar um artigo existente ou criar um novo. Você perceberá um formato no menu suspenso, na segunda linha do editor visual do WordPress.
Basta selecionar um texto no editor e, em seguida, escolher seu estilo personalizado no menu suspenso para aplicá-lo.
Agora você pode visualizar seu artigo para ver se seus estilos personalizados se aplicam corretamente.
Método 2: adicionar estilos manualmente ao editor visual
Este método requer que você adicione manualmente o código aos seus arquivos do WordPress. Se esta é a primeira vez que você faz isso, confira nosso tutorial sobre como adicionar um WordPress Plugin.
Etapa 1: adicione um estilo personalizado no menu suspenso do Editor Visual do WordPress.
Primeiro, adicionaremos um menu suspenso no editor visual do WordPress. Este menu suspenso nos permitirá selecionar e aplicar nossos estilos personalizados.
Você deve adicionar o seguinte código ao seu arquivo functions.php ou em seu plugin.
função wpb_mce_buttons_2 ($ botões) {array_unshift ($ botões, 'seleção de estilos'); retornar botões $; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');
Etapa 2: como adicionar opções no menu suspenso
Agora você precisará adicionar algumas opções ao menu suspenso que acabou de criar. Você poderá então escolher e aplicar essas opções a partir dos formatos no menu suspenso.
Para este tutorial, adicionaremos três estilos personalizados para criar conteúdo bloco e botões.
Você precisará adicionar o seguinte código ao arquivo "functions.php" do seu functions.php ou um plugin específico.
/ * * Função de retorno de chamada para filtrar as configurações do MCE * / function my_mce_before_init_insert_formats ($ init_array) {// Definir o array style_formats $ style_formats = array (/ * * Cada array filho é um formato com suas próprias configurações * Observe que cada array tem título , bloco, classes e argumentos de invólucro * Título é o rótulo que estará visível no menu Formatos * Bloco define se é um estilo de span, div, seletor ou embutido * As classes permitem que você defina classes CSS * Wrapper se deve ou não adicione um novo elemento de nível de bloco em torno de qualquer elemento selecionado * / array ('title' => 'Bloco de conteúdo', 'bloco' => 'span', 'classes' => 'bloco de conteúdo', 'wrapper' => true,), array ('title' => 'Blue Button', 'block' => 'span', 'classes' => 'blue-button', 'wrapper' => true,), array ('title' => 'Botão vermelho', 'bloquear' => 'span', 'classes' => 'botão vermelho', 'wrapper' => verdadeiro,),); // Insira o array, JSON ENCODED, em 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); return $ init_array; } // Anexar callback para 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');
Agora você pode adicionar uma nova postagem no WordPress e clicar nos formatos no menu suspenso do editor visual. Você notará que seus estilos personalizados agora estão visíveis.
No entanto, sua seleção não fará nenhuma diferença no editor visual do WordPress.
3 Etapa: Adicionar um estilo CSS
Agora, o último passo é adicionar regras de estilo CSS para seus estilos personalizados.
Você precisará adicionar este CSS no arquivo style.css do seu tema ou do tema filho.
.content-block {border: 1px solid #eee; preenchimento: 3px; fundo: #ccc; largura máxima: 250px; flutuar: certo; alinhamento de texto: centro; }. bloco de conteúdo: após {limpar: ambos; }. botão azul {cor de fundo: # 33bdef; -moz-border-radius: 6px; -webkit-border-radius: 6px; raio da borda: 6px; borda: 1px sólido # 057fd0; display: bloco embutido; cursor: ponto; cor: #ffffff; preenchimento: 6px 24px; decoração de texto: nenhum; } botão vermelho {cor de fundo: # bc3315; -moz-border-radius: 6px; -webkit-border-radius: 6px; raio da borda: 6px; borda: 1px sólido # 942911; display: bloco embutido; cursor: ponto; cor: #ffffff; preenchimento: 6px 24px; decoração de texto: nenhum; }
A folha de estilo do editor controla a aparência do seu conteúdo no editor visual. Verifique a documentação para ver como encontrar a localização deste arquivo.
Se o seu tema não tiver um arquivo de folha de estilo, você sempre poderá criar um. Basta criar um novo arquivo CSS e nomeá-lo " Custom-editor-style.css ".
Você precisa fazer o upload deste arquivo para o diretório raiz do seu tema e, em seguida, adicionar este código ao arquivo "functions.php" do seu tema.
função my_theme_add_editor_styles () {add_editor_style ( 'custom-editor-style.css'); } Add_action ( 'init', 'my_theme_add_editor_styles');
Isso é tudo. Você acabou de adicionar seus estilos personalizados no editor visual do WordPress. Agora você pode fazer as personalizações que achar corretas.
Sinta-se livre para compartilhar este tutorial com seus amigos em suas redes sociais favoritas.
