Adding custom styles in WordPress visual editor

Cómo agregar estilos personalizados al editor visual de WordPress

¿Quieres agregar estilos personalizados en el editor visual de WordPress? Agregar estilos personalizados le permite aplicar formato rápidamente sin tener que ir al editor de texto. En este artículo, le mostraremos cómo agregar estilos personalizados al editor visual de WordPress.

Agregar estilos personalizados en el editor visual de WordPress
Notar: Este tutorial requiere conocimientos básicos de CSS.

Por que y cuando necesita estilos personalizados para WordPress Visual Editor

De forma predeterminada, el editor visual de WordPress viene con opciones básicas de formato y estilo. Sin embargo, a veces es posible que necesite sus propios estilos personalizados para agregar botones CSS, bloques de contenido, lemas, etc. Siempre puede cambiar de editor visual a editor de texto y agregar HTML y CSS personalizados. Pero si usa ciertos estilos con regularidad, sería mejor agregarlos en el editor visual para que pueda reutilizarlos fácilmente. Le ahorrará tiempo al cambiar de un editor de texto a un editor visual. También le permitirá utilizar constantemente los mismos estilos en todo su sitio web. Lo más importante es que puede cambiar o actualizar fácilmente los estilos sin tener que editar las publicaciones en su sitio web. Dicho esto, veamos cómo agregar estilos personalizados en el editor visual de WordPress.

Método 1: agregue estilos personalizados en el editor visual usando el complemento

Lo primero que debe hacer es instalar y activar el complemento TinyMCE Custom Styles. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Tras la activación, debe visitar Configuración »Estilos personalizados de TinyMCE página para configurar los ajustes del complemento.
Configuración de estilos personalizados de TinyMCE
El complemento le permite elegir la ubicación de los archivos de la hoja de estilo. Puede usar su tema o las hojas de estilo del tema de su hijo, o puede elegir su propia ubicación personalizada. Después de eso, debe hacer clic en el botón «Guardar todas las configuraciones» para guardar los cambios. Ahora puede agregar sus estilos personalizados. Debe desplazarse un poco hacia abajo hasta la sección de estilo y hacer clic en el botón Agregar nuevo estilo. Primero debe ingresar 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 bloque o de selector. Después de eso, agregue una clase CSS y luego agregue sus reglas CSS como se muestra en la captura de pantalla a continuación.
Agregar un nuevo estilo personalizado
Una vez que haya agregado un estilo CSS, simplemente haga clic en el botón «Guardar todas las configuraciones» para guardar los cambios. Ahora puede editar un mensaje existente o crear uno nuevo. Verá un menú desplegable Formato en la segunda línea del editor visual de WordPress.
Menú de estilo personalizado en TinyMCE
Simplemente seleccione un texto en el editor, luego seleccione su estilo personalizado en el menú desplegable Formatos para aplicarlo. Ahora puede obtener una vista previa de su publicación para ver si sus estilos personalizados se aplican correctamente.

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

Este método requiere que agregue código manualmente a sus archivos de WordPress. Si es la primera vez que agrega código a WordPress, consulte nuestra guía sobre cómo agregar fragmentos de la web en WordPress.
Paso 1: agregue un menú desplegable de estilos personalizados en el Editor visual de WordPress
Primero, agregaremos un menú desplegable de Formatos en el editor visual de WordPress. Este menú desplegable nos permitirá seleccionar y aplicar nuestros estilos personalizados. Debe agregar el siguiente código al archivo functions.php de su tema oa un complemento específico del sitio. function wpb_mce_buttons_2 ($ botones) {array_unshift ($ botones, ‘styleselect’); devolver $ botones; } add_filter (‘mce_buttons_2’, ‘wpb_mce_buttons_2’);

Paso 2: agregue opciones de selección al menú desplegable
Ahora deberá agregar las opciones al menú desplegable que acaba de crear. A continuación, puede seleccionar y aplicar estas opciones en el menú desplegable Formatos. Para los propósitos de este tutorial, estamos agregando tres estilos personalizados para crear un bloque de contenido y botones. Deberá agregar el siguiente código al archivo functions.php de su tema oa un complemento específico del sitio. / * * Función de devolución de llamada para filtrar los parámetros de MCE * / function my_mce_before_init_insert_formats ($ init_array) {// Define style_formats array $ style_formats = array (/ * * Cada matriz secundaria es un formato con sus propios parámetros * Tenga en cuenta que cada matriz tiene un título, bloque, clases y argumentos de envoltura * El título es la etiqueta que estará visible en el menú Formatos * El bloque define si es un estilo span, div, selector o en línea * Las clases le permiten definir CSS * Clases de envoltura si se agregan o no un nuevo elemento de nivel de bloque alrededor de todos los elementos seleccionados * / array (‘título’ => ‘Bloque de contenido’, ‘bloque’ => ‘intervalo’, ‘clases’ => ‘bloque de contenido’, ‘envoltorio’ => verdadero, ), matriz (‘título’ => ‘Botón azul’, ‘bloque’ => ‘intervalo’, ‘clases’ => ‘botón azul’, ‘envoltorio’ => verdadero,), matriz (‘título’ => ‘Botón rojo’, ‘bloque’ => ‘intervalo’, ‘clases’ => ‘botón rojo’, ‘envoltorio’ => verdadero,),); // Inserte la matriz, JSON ENCODED, en ‘style_formats’ $ init_array[‘style_formats’] = json_encode ($ formatos_estilo); return $ init_array; } // Adjuntar una devolución de llamada a ‘tiny_mce_before_init’ add_filter (‘tiny_mce_before_init’, ‘my_mce_before_init_insert_formats’); Ahora puede agregar una nueva publicación en WordPress y hacer clic en el menú desplegable Formatos en el editor visual. Notará que sus estilos personalizados ahora son visibles en formatos. Sin embargo, seleccionarlos no hace ninguna diferencia en el editor de publicaciones en este momento.
Paso 3: agregue estilos CSS
Ahora, el último paso es agregar reglas de estilo CSS para sus estilos personalizados. Deberá agregar este CSS en los archivos style.css y editor-style.css de su tema o tema hijo. .content-block {borde: 1px sólido #eee; relleno: 3px; fondo: #ccc; ancho máximo: 250px; Flotar derecho; alineación de texto: centro; } .content-block: after {clear: both; } .blue-button {color de fondo: # 33bdef; -moz-border-radius: 6px; -webkit-border-radius: 6px; radio del borde: 6px; borde: 1px sólido # 057fd0; pantalla: bloquear en línea; cursor: puntero; color: #ffffff; relleno: 6px 24px; decoración de texto: ninguna; } .red-button {color de fondo: # bc3315; -moz-border-radius: 6px; -webkit-border-radius: 6px; radio del borde: 6px; borde: 1px sólido # 942911; pantalla: bloquear en línea; cursor: puntero; color: #ffffff; relleno: 6px 24px; decoración de texto: ninguna; }

Estilos personalizados en el editor de publicaciones de WordPress
La hoja de estilo del editor controla la apariencia de su contenido en el editor visual. Consulte la documentación de su tema para conocer la ubicación de este archivo. Si su tema no tiene un archivo de hoja de estilo del editor, siempre puede crear uno. Simplemente cree un nuevo archivo CSS y asígnele el nombre custom-editor-style.css. Debe cargar este archivo en el directorio raíz de su tema y luego agregar este código al archivo functions.php de su tema. function my_theme_add_editor_styles () {add_editor_style (‘estilo-editor-personalizado.css’); } add_action (‘init’, ‘my_theme_add_editor_styles’); Es todo. Ha agregado con éxito sus estilos personalizados en el editor visual de WordPress. Siéntase libre de jugar con el código agregando sus propios elementos y estilos. Esperamos que este artículo le haya ayudado a aprender cómo agregar estilos personalizados al editor visual de WordPress. También puede consultar nuestra guía sobre cómo agregar estilos personalizados a los widgets de WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply