¿Alguna vez has deseado poder crear tus propios botones de formato en WordPress, como un estilo de nota especial o un formato de cita de marca? Eso es exactamente lo que hacen los estilos personalizados.
He pasado considerable tiempo probando diferentes enfoques para estilos personalizados en WordPress, desde simples adiciones de CSS hasta soluciones más avanzadas.
Esta experiencia me ha ayudado a identificar las formas más prácticas de mejorar tu editor con opciones de formato personalizadas que cualquiera en tu equipo puede usar.
Hoy, te guiaré sobre cómo agregar estilos personalizados a tu editor visual de WordPress. Aprenderás qué son los estilos personalizados, por qué son útiles e instrucciones paso a paso para agregarlos a tu sitio, todo basado en mi experiencia de prueba en el mundo real.✨
💡 Resumen rápido: La mejor manera de agregar estilos personalizados
La forma más efectiva de agregar estilos personalizados al editor de bloques de WordPress es agregando un fragmento de código PHP a tu sitio. Esto te permite registrar nuevas variaciones de estilo para bloques como botones, encabezados y citas.
Para el método más seguro y fácil, recomiendo usar el plugin WPCode para insertar el código. Esto evita el riesgo de editar directamente el archivo functions.php de tu tema.
Aquí tienes un resumen rápido de lo que cubriré en este artículo:
- ¿Qué son los estilos personalizados y cómo pueden cambiar la forma en que usas WordPress?
- Cómo agregar estilos personalizados al editor visual de WordPress (Editor de bloques)
- Extra: Cómo agregar estilos personalizados a los widgets de WordPress
- Preguntas frecuentes sobre estilos personalizados
¡Ahora sumerjámonos de lleno!
¿Qué son los estilos personalizados y cómo pueden cambiar la forma en que usas WordPress?
En términos simples, un estilo personalizado es un atajo de formato prediseñado dentro del editor de WordPress.
Resuelve el problema de ajustar manualmente fuentes, colores y diseños cada vez que creas contenido, lo que puede consumir mucho tiempo y generar inconsistencias.
Por ejemplo, puedes crear una fuente personalizada para los encabezados, elegir un color de fondo para las cajas de aviso o aplicar un estilo consistente para los testimonios.
Piénsalo como una plantilla para los elementos de diseño. En lugar de ajustar manualmente el relleno, las fuentes o los colores cada vez, eliges tu estilo personalizado y se aplica instantáneamente tu diseño preferido.
Por ejemplo, digamos que tienes un blog de negocios y siempre incluyes una recomendación de producto o un descargo de responsabilidad al final de tus publicaciones. En lugar de darle estilo cada vez, podrías crear un estilo personalizado llamado 'Consejo de producto' o 'Nota importante' y aplicarlo al instante.
Esto te ahorra tiempo y asegura que todo se mantenga pulido, especialmente si trabajas con un equipo o publicas mucho contenido.
Dicho esto, veamos cómo agregar fácilmente estilos personalizados al editor visual de WordPress.
Cómo agregar estilos personalizados al editor visual de WordPress (Editor de bloques)
Si deseas agregar estilos personalizados en el editor de bloques, la forma más efectiva de hacerlo es usando código PHP. Pero ten en cuenta que este enfoque es más adecuado para usuarios intermedios de WordPress.
Esto se debe a que necesitarás editar el archivo functions.php de tu tema, y incluso el error más pequeño puede dañar tu sitio. Dicho esto, puedes usar un plugin fácil de usar para principiantes para simplificar el proceso.
Siempre recomiendo WPCode para este tipo de personalización. En mi opinión, es el mejor plugin de fragmentos de código de WordPress del mercado. Lo he probado a fondo y lo he encontrado como la forma más fácil y segura de agregar código personalizado sin riesgo de errores.
Para obtener más información, consulta la reseña completa de WPCode de mi equipo.
📌 Nota importante: Independientemente de tu nivel de habilidad, siempre recomiendo crear una copia de seguridad completa de tu sitio antes de manipular cualquier código importante. Consulta nuestra guía sobre cómo hacer una copia de seguridad de tu sitio web de WordPress para obtener instrucciones sobre cómo hacerlo.
Ten en cuenta que el fragmento de código que usaré está configurado por defecto para agregar estilos personalizados al bloque de Botón. Pero con solo unos pocos ajustes menores, puedes usarlo fácilmente para admitir otros bloques como:
- 🔷 Encabezados con estilos elegantes o contorneados
- 💬 Bloques de Cita, Cita destacada y Verso
- 🗂️ Bloques de Archivos o Categorías
- ➕ Y más
Esto te da mucha flexibilidad para diseñar estilos reutilizables en todo tu sitio.
Primero, necesitas instalar y activar el plugin WPCode. Si necesitas ayuda, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.
📌 Nota: WPCode también tiene un plan gratuito que puedes usar. Sin embargo, actualizar a la versión pro te da acceso a funciones como una biblioteca en la nube de fragmentos de código, la función de fragmentos de bloque, lógica condicional inteligente y más.
Una vez que actives el plugin, dirígete a la página Fragmentos de código » +Agregar fragmento desde el panel. Aquí, haz clic en el botón ‘Usar fragmento’ debajo de la opción ‘Agregar tu código personalizado (Nuevo fragmento)’.
Esto te dirigirá a la página ‘Crear fragmento personalizado’, donde tienes que nombrar tu fragmento de código. Este nombre será solo para tu identificación y no se mostrará a ningún usuario.
Luego, elige Fragmento de PHP del aviso que aparece después de hacer clic en la opción ‘Tipo de código’ en la esquina derecha.
Después de eso, si quieres crear un estilo personalizado para un botón, agrega el siguiente código personalizado en el cuadro ‘Vista previa del código’.
// Function to enqueue and register styles for both frontend and editor
function my_custom_button_styles() {
// Register the style only once
wp_register_style(
'my-custom-button-styles',
false
);
// Add inline styles
wp_add_inline_style(
'my-custom-button-styles',
<<<CSS
.is-style-fancy-button .wp-block-button__link {
background-color: #f0c040;
color: #fff;
border: none;
border-radius: 15px;
padding: 10px 20px;
}
.is-style-outline-button .wp-block-button__link {
background-color: transparent;
color: #333;
border: 2px solid #333;
border-radius: 5px;
padding: 10px 20px;
}
CSS
);
// Enqueue the style for both frontend and editor
wp_enqueue_style('my-custom-button-styles');
}
// Function to add custom styles for Gutenberg editor
function my_custom_gutenberg_button_styles() {
// Call the general styles function for the editor
my_custom_button_styles();
// Enqueue inline script for the editor to register block styles
wp_add_inline_script(
'wp-blocks',
<<<JS
wp.domReady(function() {
wp.blocks.registerBlockStyle('core/button', {
name: 'fancy-button',
label: 'Fancy Button'
});
wp.blocks.registerBlockStyle('core/button', {
name: 'outline-button',
label: 'Outline Button'
});
});
JS
);
}
// Hook the styles function to frontend
add_action('wp_enqueue_scripts', 'my_custom_button_styles');
// Hook the custom block style registration
add_action('enqueue_block_editor_assets', 'my_custom_gutenberg_button_styles');
Este fragmento de código agrega dos estilos personalizados al bloque de Botones en WordPress.
La gran ventaja es que puedes adaptar este código para crear estilos para otros bloques también. Sin embargo, requiere un poco más que simplemente cambiar la palabra 'botón'. Para que funcione correctamente, necesitas actualizar dos partes clave del código:
- El Nombre del Bloque (Slug): En la parte de JavaScript del código, encontrarás
'core/button'. Este es el nombre oficial del bloque de Botón de WordPress. Necesitas reemplazarlo con el slug del bloque que deseas estilizar (por ejemplo,'core/heading'). - Los Selectores CSS: El código CSS (como
.is-style-fancy-button .wp-block-button__link) está escrito específicamente para el HTML del bloque de Botón. Otros bloques tienen una estructura diferente, por lo que necesitarás escribir nuevas reglas CSS para apuntarlos correctamente.
También puedes ajustar el CSS para cambiar el color de fondo, ajustar el radio del borde y hacer otros cambios de estilo para que coincidan con tus necesidades.
💡 Consejo de Experto: Si dudas en personalizar el código tú mismo, un asistente de IA como ChatGPT puede ser un buen punto de partida. Sin embargo, obtener el código correcto requiere darle una indicación muy clara y detallada.
Por ejemplo, en lugar de una solicitud simple, podrías proporcionar una indicación como esta:
Here is a PHP, CSS, and JS snippet that adds custom styles to the 'core/button' block in WordPress. Please adapt it to target the 'core/heading' block instead. The new style should be named 'Green Highlight' and it should add a light green background color.
Sin embargo, recomiendo siempre probar el código generado por IA en un sitio de staging antes de agregarlo a tu sitio web en producción. Esto te permite detectar cualquier error potencial sin riesgo.
Ahora, procede a cambiar el interruptor de 'Inactivo' a 'Activo'.
Finalmente, haz clic en el botón ‘Guardar fragmento’ para almacenar tus cambios.
A continuación, abre una entrada en el editor de bloques y agrega el bloque para el cual has añadido estilos personalizados.
Por ejemplo, si has añadido estilos personalizados para el bloque de Botones, procede a insertarlo en tu entrada.
Una vez que lo hagas, verás los estilos personalizados disponibles en la sección 'Estilos' del panel del bloque.
Después de eso, haz clic en el botón 'Actualizar' o 'Publicar' para guardar tus cambios.
Luego, visita tu sitio web de WordPress para ver los estilos personalizados en acción.
Extra: Cómo agregar estilos personalizados a los widgets de WordPress
Ahora que has aprendido a agregar estilos personalizados al editor visual de WordPress, veamos otra personalización útil: agregar estilos personalizados a los widgets de WordPress.
Personalizar widgets con colores, fuentes o diseños únicos ayuda a asegurar que coincidan con el diseño general de tu sitio, mejorando la experiencia del usuario.
La forma más fácil de agregar estilos personalizados a los widgets de WordPress es usando un fragmento de código CSS, que puedes agregar con un plugin como WPCode.
Puedes simplemente agregar CSS personalizado que apunte a widgets específicos y ajustar cosas como tamaños de fuente, colores de fondo, relleno e incluso bordes.
Esto es perfecto para asegurarte de que tus widgets coincidan con tu diseño general sin tener que ser demasiado técnico.
Para empezar, consulta nuestro tutorial sobre cómo agregar estilos personalizados a los widgets de WordPress.
Preguntas frecuentes sobre estilos personalizados
Aquí tienes algunas preguntas que nuestros lectores han hecho con frecuencia sobre cómo agregar estilos personalizados al editor visual de WordPress:
¿Puedo agregar estilos personalizados sin usar un plugin?
Sí, es posible agregar el código directamente al archivo functions.php de tu tema. Sin embargo, desaconsejo firmemente este método para principiantes.
Un pequeño error en ese archivo puede dañar tu sitio, y tus personalizaciones se perderán cuando actualices tu tema. Usar WPCode es el enfoque más seguro y confiable.
¿Estos estilos personalizados funcionarán con cualquier tema de WordPress?
Generalmente, sí. El código utilizado en este tutorial registra estilos con el editor principal de WordPress, por lo que debería ser compatible con cualquier tema moderno y bien codificado.
En casos raros, un tema con CSS muy agresivo o mal escrito podría anular tus estilos personalizados, pero esto no es común.
¿Cómo encuentro el nombre correcto (slug) para otros bloques que quiero estilizar?
Una forma fácil de encontrar el slug de un bloque es ir al editor de WordPress, seleccionar el bloque que te interesa y luego hacer clic en el menú de tres puntos en la barra de herramientas del bloque.
En la parte inferior de ese menú, haz clic en 'Copiar tipo de bloque'. Esto copiará el slug del bloque (por ejemplo, core/image, core/quote) a tu portapapeles, que luego puedes pegar en el fragmento de código.
¿Puedo crear más de dos estilos personalizados para el mismo bloque?
Absolutamente. En la parte de JavaScript del fragmento de código, puedes simplemente duplicar la función wp.blocks.registerBlockStyle(...) por cada nuevo estilo que quieras agregar.
Solo asegúrate de darle a cada uno un nombre y una etiqueta únicos. También necesitarás agregar las reglas CSS correspondientes para cada nuevo estilo que registres.
Espero que este artículo te haya ayudado a aprender cómo agregar estilos personalizados en el editor visual de WordPress. También podrías querer ver nuestra guía para principiantes sobre cómo crear un bloque personalizado de WordPress y nuestra comparación entre padding y margin en WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Toufic Ahemmed
Estos tipos son geniales. Me ayudan la mayor parte del tiempo. Muchas, muchas gracias.
Soporte de WPBeginner
Glad we could help
Administrador
Aslan French
Este artículo debería actualizarse teniendo en cuenta Gutenberg, ya que este tipo de funcionalidad se ha agregado recientemente a la API de texto enriquecido.
Soporte de WPBeginner
Hola Aslan,
Gracias por la sugerencia. Definitivamente revisaremos los artículos antiguos una vez que Gutenberg esté disponible.
Administrador
Mehrdad
Muchas gracias.
Este artículo realmente me ayudó.
sabbi
Esto agrega clases a una etiqueta p, ¿verdad?
¿Hay alguna forma de crear etiquetas propias?
O otra cosa: ¿un formato personalizado elegido sobrescribirá una etiqueta h elegida previamente con una p? Sería necesario evitar que un cliente se meta en problemas cuando haga clic en los estilos predeterminados Y personalizados.
Britany
Desafortunadamente, esto no me ayudó en absoluto. ¿Hay algún artículo que explique qué significa cada uno de los campos que tienes que completar?
Todo lo que necesito es una forma de aplicar el mismo formato a las citas en las páginas de notas de mi podcast. Cada cita tiene la misma fuente (que he configurado como un estilo de encabezado), en negrita y centrada.
Me canso de aplicar manualmente cada parte del formato a cada cita y solo quiero una forma de hacer clic en un botón y terminar.
Syams
Por favor, dime cómo agregar una nueva fuente al editor visual de WP.
Moya Nicholson
Gracias. Realmente útil.
stanley
Necesito modificar mi tema de WP
Ayúdame por favor
Sandy Connolly
¡¡¡GRACIAS POR ESTO!!! ¡¡¡OMG!!!! ¡Qué útil al entregar un sitio a un cliente que quiere poder agregar su propio contenido basándose en nuestro diseño!
Marcin
Hola, desarrollo WordPress todos los días y hago todo con WP, pero este fragmento de código es uno de los más útiles que he visto en mucho tiempo… ¡Es exactamente lo que al editor WYSIWYG predeterminado le faltaba (ahora puedo decir: le faltaba)! Permite hacer cosas asombrosas dentro del campo de contenido. ¡Gracias por compartir!
Foxglove
He estado usando este plugin por un tiempo, pero ya no está disponible en wordpress.org — aparentemente ya no se actualiza ni se soporta. ¿Alguien conoce alguna alternativa aparte del método manual que describes?
Lisa McMahon
Aquí hay una versión actualizada/bifurcada del plugin original mencionado en el artículo: TinyMCE Custom Styles
Soporte de WPBeginner
Hola Lisa, gracias por señalar esto. Hemos actualizado el artículo con la versión actualizada/bifurcada.
Administrador
Shubha Das
Quiero agregar p en lugar de span. Pero cuando cambio el nombre del bloque span a p, no funciona.
‘title’ => ‘Nota’, ‘block’ => ‘p’, ‘classes’ => ‘nota’, ‘wrapper’ => true,
MacKenzie
Encontré esto realmente útil y siento que casi lo tengo, pero aún no funciona del todo. Mi texto se etiqueta correctamente con las etiquetas span y class en el editor cuando se selecciona, pero ninguno de los estilos que puse en la hoja de estilos se está aplicando a la nota publicada.
Frank
Siempre me pongo nervioso y siento náuseas si algún cliente necesita ajustes en WordPress. Genial, este menú desplegable de estilos, PERO, como alguien dijo antes, es completamente inútil si los estilos no se pueden retirar después y solo se suman, suman, suman...
Estoy acostumbrado a estas soluciones a medias en WordPress – normalmente también hay soluciones complementarias a medias para reparar la primera. ¿Pero aquí?
¿Cómo sugerirías eliminar los ESTILOS PERSONALIZADOS agregados a través del menú desplegable de estilos? La vista de código no es aceptable para mi cliente.
Sería increíblemente afortunado si alguien hubiera encontrado una manera de hacer eso y compartiera este conocimiento (y por sacar la catástrofe llamada WordPress de mi alcance por (espero) mucho tiempo).
¡Muchas gracias de antemano!
Frank
Chris
Haz clic de nuevo en el estilo en el menú desplegable. Hecho.
Shafi ken
Gracias por el útil tutorial. Gracias
K Shazzad
Whole tutorial worked flawlessly for me. Thanks a bunch
Stef
Probé este plugin pero me di cuenta de que cuando cambias un estilo personalizado, no actualiza los que ya insertaste. Tienes que volver a insertarlos, porque la función agrega el estilo en línea y no a través de la hoja de estilos.
Phil
Gracias por el útil tutorial. ¿Hay alguna penalización de rendimiento al usar el plugin en lugar de codificarlo a mano? Gracias,
Soporte de WPBeginner
No, pero para reutilizar elementos este método es bastante práctico. También es útil si estás creando un sitio para un cliente y quieres que pueda agregar cosas desde el editor visual.
Administrador
Sei
¡Gracias por el tutorial!
¿Hay alguna forma de agregar dos anotaciones a la vez? Por ejemplo, obtener algo como texto
Sei
De acuerdo, tus comentarios convierten HTML. Quiero decir, me gustaría obtener tanto las marcas 'h1' como 'span' alrededor de mi texto haciendo clic en un solo estilo.
Lily
He logrado hacer las clases personalizadas y los elementos se muestran con las clases correctas en el editor de texto y en la página, pero la clase no se aplica en el editor visual, lo que hace muy poco claro si funcionó o no para el usuario. ¿Hay alguna forma de solucionar eso?
Bonnie Dasher-Andersen
He agregado dos estilos personalizados. Cuando voy a editar una página, tengo dos menús de Formato, cada uno con las mismas entradas (los dos estilos que creé). Cuando intento aplicar estos estilos, no sucede nada. Puedo ver la etiqueta en la vista de Texto, pero cuando veo la página, el estilo no se ha aplicado.
¿Alguna sugerencia? Necesito resolver esto para un cliente que actualizará este sitio de WP y no es muy hábil.
Marcello
Tuve el mismo problema, donde las etiquetas no se aplicaban al código. Lo solucioné configurando 'wrapper' en 'false'. No sé las razones técnicas, solo probé y funcionó. ¡Espero que ayude!
hugotom
Tuve el mismo problema de que la hoja de estilos no se graba.
Solución
Si ya tienes estas hojas de estilo de grabación en el archivo functions.php, deberías agregarlas justo ahí stylesheet custom-editor-style.css
Ejemplo:
function styles_theme(){ wp_enqueue_style(‘bootstrap_css’, get_template_directory_uri() . ‘/sources/bootstrap/bootstrap.min.css’); wp_enqueue_style(‘main_css’, get_template_directory_uri() . ‘/style.css’); wp_enqueue_style(‘theme_css’, get_template_directory_uri() . ‘/custom/css/theme.css’); wp_enqueue_style(‘editor_css’, get_template_directory_uri() . ‘/custom-editor-style.css’); // AQUÍ };
Raphael Landau
He usado esto y también he tenido el problema de que el estilo/clase se implementa a todo el Párrafo. Esto se debe a que estableces el formato de estilo como "block". (‘block’ => ‘span’,).
Visitando rápidamente el codex oficial de Wordpress, se descubren muchas más opciones para el formato de estilo.
http://codex.wordpress.org/TinyMCE_Custom_Styles
Dado que span es un estilo en línea por defecto, deberías reemplazar 'block' con 'inline', ¡y listo! Tu estilo debería funcionar como esperas.
así que en resumen:
array( ‘title’ => ‘Tu Título’, ‘inline’ => ‘span’, ‘classes’ => ‘tu-clase’, ‘wrapper’ => true, ),
nemaha
¡Hola! Genial tutorial, ¡muchas gracias! Yo también tengo el problema de que el estilo (un span) se aplica a todo el párrafo. Lo que pretendo hacer: escribir un titular y formatearlo como encabezado 1, luego marcar solo una palabra específica dentro de ese titular para añadir un estilo personalizado. ¿Alguna actualización sobre cómo solucionar esto? ¡Gracias!
bekee
Yo también tengo el problema de que aplica el estilo a todo el párrafo, no solo al elemento seleccionado. ¿Alguna actualización sobre esto? ¡Gracias!
Debbie
Tengo el mismo problema. Resalto una palabra, pero afecta a todo el párrafo.
James
Encuentro un par de problemas. Parece que funciona, pero no como se esperaba. No servirá para alguien que no sepa de código.
1. Resalta una sola palabra en un párrafo para agregar un pero el se agrega a todo el párrafo, no solo a la palabra resaltada.
2. No hay forma de eliminar el css sin editar código. ¡Mi cliente no sabe de código! Incluso intenté crear una clase de .nada pero la nueva clase solo se agrega a otras, no reemplaza la clase existente.
Personal de WPBeginner
Consulta nuestra guía sobre cómo solucionar problemas comunes de imágenes en WordPress.
Sheikh Zuhaib Siddiqui
Hola, tengo un error al agregar medios. Cuando intento subir cualquier medio, solo sigue cargando y no aparece ningún medio y puedo subir medios... ¿Me pueden decir cuál es el error aquí?
Pero esto está funcionando bien... solo hay un error en el cargador de medios. Por favor, proporciónenme esta solución.
Marlice
Hola. Gracias por este gran tutorial. Tengo un problema con el contenido que ya está en el editor. Si marco una palabra o una parte de texto y elijo un estilo (por ejemplo, "botón azul" - de tu código) se aplica no solo a la palabra o parte de texto marcada. En cambio, marca todo el contenido y le pone un span con la clase .botón azul. Lo intenté varias veces con otras páginas y publicaciones, siempre lo mismo: si el contenido ya estaba allí y lo marqué, entonces todo el contenido obtiene la clase span. Esto no sucede si envuelvo un texto nuevo editado en la página/publicación, entonces todo funciona bien. ¿Alguien más tiene este fenómeno?
Gracias,
Ute
John-Henry Ross
Hola. Probé este método y funciona de maravilla, es exactamente lo que estaba buscando, gracias. Solo quiero saber si hay alguna forma de agregar estilos a una subcarpeta en lugar de solo agregarlo bajo un botón de formato. Por ejemplo, agregar una subcarpeta de encabezados con todos los estilos de encabezados, agregar un submenú de div con estilos de div, etc.
dave
¡Gracias!
También es genial mostrar 2 métodos... mis clientes se encogen de miedo al manejar cualquier código.
I will sometimes use custom fields to “force” safe additional styles, but the TinyMCE can be handled by some people, so I’ll kee that in mind.
Ciao, Dave
Personal de WPBeginner
no necesitas agregar el punto
classes’ => ‘.alert-blue’,
Debería ser
classes’ => ‘alert-blue’,
Jeff Gaudette
Lamentablemente, esto no funcionó. Eliminé el punto, pero todavía no se aplica nada en el editor. Sé que no eres un servicio de ayuda, pero aquí tienes una captura de pantalla por si te interesa: http://screencast.com/t/JI0zMvcH
¡Gracias por todo lo genial que publicas!
Personal de WPBeginner
¿Puedes pegar el código que agregaste en tu archivo functions.php? También pega el CSS que estás usando para estos botones.
Jeff Gaudette
Claro. Funciones:
/*
* Función de devolución de llamada para filtrar la configuración de MCE
*/
function my_mce_before_init_insert_formats( $init_array ) {
// Define el array style_formats
$style_formats = array(
// Cada hijo de array es un formato con su propia configuración
array(
‘title’ => ‘Alerta’,
‘block’ => ‘span’,
‘classes’ => ‘entry p.alert-blue’,
‘wrapper’ => true,
),
array(
‘title’ => ‘Alerta Azul’,
‘block’ => ‘p’,
‘classes’ => ‘alert-blue’,
‘wrapper’ => true,
),
array(
‘title’ => ‘Botón Azul’,
‘block’ => ‘span’,
‘classes’ => ‘alert-blue-button’,
‘wrapper’ => true,
),
);
// Insertar el array, codificado en JSON, en ‘style_formats’
$init_array[‘style_formats’] = json_encode( $style_formats );
return $init_array;
}
// Adjuntar la función de retorno a ‘tiny_mce_before_init’
add_filter( ‘tiny_mce_before_init’, ‘my_mce_before_init_insert_formats’ );
CSS
.alert-blue{
background: none repeat scroll 0 0 #E7F4FD;
border: 1px solid #C5D7E3;
color: #3A5971;
font-size: 18px;
line-height: 24px;
text-align: center;
margin: 0 0 15px !important;
padding: 15px 25px;
width: auto;
}
Personal de WPBeginner
¿Agregaste el CSS en tu hoja de estilos?
Asegúrate de que las reglas de estilo que agregues en tu CSS coincidan con las clases que agregas en la función de devolución de llamada para filtrar la configuración de MCE.
Kemi O
TinyMCE Advanced Professsional Formats and Styles solo es compatible hasta la versión 3.6.1 de WP
Keely Worth
¡Evito el Editor Visual como la peste! Solo lo uso si tengo que cambiar a él para usar el botón de shortcode integrado de un tema. De lo contrario, nunca lo uso.
Blair2004
He probado el primer método, hay nuevos estilos disponibles, pero, mientras selecciono uno, no pasa nada...
Jeff Gaudette
Estoy intentando hacer esto con un bloque y no tengo suerte. El código es:
array(
‘title’ => ‘Alerta Azul’,
‘block’ => ‘p’,
‘classes’ => ‘.alert-blue’,
‘wrapper’ => true,
),
Funciona cuando uso span, pero esto requiere una clase span, ¡la cual no puedo usar!
Cuando uso el código anterior, no pasa nada en el editor de wp. Selecciono el texto, hago clic en la opción de formato Alert Blue y no pasa nada: http://screencast.com/t/dijujZ2ZdqBy
¿Algún consejo?