Cómo agregar estilos personalizados al editor visual de WordPress

¿Quieres añadir estilos personalizados en el editor visual de WordPress? La adición de estilos personalizados le permite aplicar rápidamente el formato sin cambiar al editor de texto. En este artículo, le mostraremos cómo añadir estilos personalizados al editor visual de WordPress.

Nota: Este tutorial requiere conocimientos básicos de CSS.

Por qué y cuándo necesita estilos personalizados para el editor visual de WordPress

Por defecto, el editor visual de WordPress viene con algunas opciones básicas de formato y estilo. Sin embargo, a veces puede necesitar sus propios estilos personalizados para añadir botones CSS, bloques de contenido, eslóganes, etc.

Siempre puede cambiar de visual a editor de texto y añadir HTML y CSS personalizados. Pero si usted usa regularmente algunos estilos, entonces sería mejor agregarlos en el editor visual para que pueda reutilizarlos fácilmente.

Esto le ahorrará tiempo al cambiar de un editor de texto a otro y viceversa. También le permitirá utilizar sistemáticamente los mismos estilos en todo su sitio web.

Lo más importante es que puede modificar o actualizar fácilmente los estilos sin tener que editar los mensajes en su sitio web.

Dicho esto, echemos un vistazo a cómo añadir estilos personalizados en el editor visual de WordPress.

Método 1: Añadir estilos personalizados en el Editor Visual usando el Plugin

Lo primero que debe hacer es instalar y activar el plugin TinyMCE Custom Styles. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, debe visitar la página Settings " TinyMCE Custom Styles para configurar la configuración del plugin.

El plugin le permite elegir la ubicación de los archivos de hojas de estilo. Puede usar las hojas de estilo de su tema o de su tema infantil, o puede elegir su propia ubicación personalizada.

Después de eso, debe hacer clic en el botón "Guardar todos los ajustes" para guardar los cambios.

Ahora puede añadir sus estilos personalizados. Necesita desplazarse un poco hacia abajo hasta la sección de estilo y hacer clic en el botón Agregar nuevo estilo.

En primer lugar, debe introducir un título para el estilo. Este título se mostrará en el menú desplegable. A continuación, debe elegir si se trata de un elemento en línea, de un bloque o de un elemento de selección.

Después de eso, agregue una clase CSS y luego agregue sus reglas CSS como se muestra en la captura de pantalla de abajo.

Una vez que haya añadido un estilo CSS, simplemente haga clic en el botón "Guardar todos los ajustes" para guardar los cambios.

Ahora puedes editar un mensaje existente o crear uno nuevo. Notarás un menú desplegable de Formato en la segunda fila del editor visual de WordPress.

Simplemente seleccione algún texto en el editor y luego seleccione su estilo personalizado en el menú desplegable Formatos para aplicarlo.

Ahora puede previsualizar su mensaje para ver que sus estilos personalizados se aplican correctamente.

Método 2: Agregar manualmente estilos personalizados al editor visual de WordPress

Este método requiere que agregue manualmente código a sus archivos de WordPress. Si es la primera vez que agrega código a WordPress, por favor vea nuestra guía para agregar fragmentos de código desde la web a WordPress.

Paso 1: Añadir un menú desplegable de estilos personalizados en WordPress Visual Editor

Primero, añadiremos un menú desplegable de Formatos en el editor visual de WordPress. Este menú desplegable nos permitirá seleccionar y aplicar nuestros estilos personalizados.

Necesitas añadir el siguiente código al archivo functions.php de tu tema o a un plugin específico del sitio.

12345functionwpb_mce_buttons_2($buttons) { array_unshift($buttons, styleselect); return$buttons;}add_filter(mce_buttons_2, wpb_mce_buttons_2);

Paso 2: Añadir opciones de selección al menú desplegable

Ahora tendrá que añadir las opciones al menú desplegable que acaba de crear. A continuación, podrá seleccionar y aplicar estas opciones desde el menú desplegable Formatos.

Por el bien de este tutorial, estamos añadiendo tres estilos personalizados para crear bloques de contenido y botones.

Necesitará agregar el siguiente código al archivo functions.php de su tema o a un plugin específico del sitio.

123456789101112131414151617181920212223242526272829303132333433536373839404142434445/** Función Callback para filtrar los ajustes de MCE*/ functionmy_mce_before_init_insert_formats( $init_array) { // Definir la matriz de formatos de estilo $style_formats= array( /** Cada hijo de la matriz es un formato con sus propios ajustes* Fíjese en que cada matriz tiene título, block, classes, and wrapper arguments* El título es la etiqueta que será visible en el menú Formatos* El bloque define si es un span, Clases le permite definir clases CSS* Wrapper ya sea para añadir o no un nuevo elemento a nivel de bloque alrededor de cualquier elemento seleccionado*/ array (title=> Content Block, block=> ` span, classes=> `content-block),            wrapper=> true, ), array(title=> `Blue Button, block=> ` span, `clases=> `blue-button, `wrapper=> true, ), array(title=> `Red Button, `bloque=> ` span, `classes=> `row-button, wrapper=> true, ), );      // Insertar la matriz, JSON ENCODED, en style_formats $init_array[style_formats] = json_encode( $style_formats); return$init_array; } // Adjuntar la llamada de retorno atiny_mce_before_init add_filter(tiny_mce_before_init, my_mce_before_init_insert_formats);

Ahora puedes añadir una nueva entrada en WordPress y hacer clic en el menú desplegable Formatos en el editor Visual. Notará que sus estilos personalizados ahora son visibles bajo formatos.

Sin embargo, seleccionarlas no hace ninguna diferencia en el editor de mensajes en este momento.

Paso 3: Añadir estilos CSS

Ahora el paso final es añadir reglas de estilo CSS para sus estilos personalizados.

Necesitará agregar este CSS en los archivos style.css y editor-style.css de su tema o tema hijo.

1234567891011121314141516171718192021222324252627282930313233343536.contenido-bloqueo{ borde:1pxsolid#eee; acolchado:3px; fondo:#ccc; ancho máx.:250px; flotación:derecha; texto-alineación:centro;}.contenido-bloqueo:después de { claro:ambos;}...botón azul { color de fondo:#33bdef; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1pxsolid#057fd0; display:inline-block; cursor:pointer; color:#ffffffff; padding:6px24px; text-decoration:none;}.botón rojo { color de fondo:#bc3315; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1pxsolid#942911; display:inline-block; cursor:pointer; color:#ffffffff; padding:6px24px; text-decoration:none;}

La hoja de estilo del editor controla la apariencia de su contenido en el editor visual. Consulte la documentación de su tema para averiguar la ubicación de este archivo.

Si su tema no tiene un archivo de hoja de estilo de editor, siempre puede crear uno. Simplemente cree un nuevo archivo CSS y llámelo custom-editor-style.css.

Necesita cargar este archivo en el directorio raíz de su tema y luego agregar este código en el archivo functions.php de su tema.

1234functionmy_theme_add_editor_styles() { add_editor_style( custom-editor-style.css);}add_action( init, my_theme_add_editor_styles);

Eso es todo. Has añadido con éxito tus estilos personalizados en el editor visual de WordPress. Siéntete libre de jugar con el código añadiendo tus propios elementos y estilos.

Esperamos que este artículo le haya ayudado a aprender a añadir estilos personalizados al editor visual de WordPress. También puede ver nuestra guía sobre cómo añadir estilos personalizados a los widgets de WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.