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 pasar por el editor de texto. En este artículo, le mostraremos cómo agregar 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

De forma predeterminada, el editor visual de WordPress incluye algunas opciones básicas de formato y estilo. Sin embargo, a veces es posible que necesite estilos personalizados para agregar botones CSS, bloques de contenido, lemas, etc.

Siempre puede cambiar entre el editor visual y de texto y agregar HTML y CSS personalizados. Pero si usa algunos estilos con regularidad, sería mejor agregarlos en el editor visual para que pueda reutilizarlos fácilmente.

Esto le permitirá ahorrar tiempo en alternar entre editores de texto y visuales. También le permitirá utilizar constantemente los mismos estilos en todo su sitio web.

Más importante aún, puede cambiar o actualizar estilos fácilmente sin tener que editar publicaciones en su sitio web.

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

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

Lo primero que debe hacer es instalar y activar el archivo. Estilos personalizados de TinyMCE conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, debe visitar Configuración »Estilos personalizados de TinyMCE página para configurar los ajustes del plugin.

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

A continuación, debe hacer clic en el botón «Guardar todas las configuraciones» para almacenar los cambios.

Ahora puede agregar sus propios 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 aparecerá en el menú desplegable. A continuación, debe elegir si es un elemento en línea, bloque o selector.

Luego agregue una clase CSS y luego agregue sus reglas CSS como se muestra en la captura de pantalla a continuación.

Después de agregar un estilo CSS, simplemente haga clic en el botón «Guardar todas las configuraciones» para almacenar los cambios.

Ahora puede editar una publicación existente o crear una nueva. Verá un menú desplegable de Formato en la segunda línea del editor visual de WordPress.

Simplemente seleccione un texto en el editor y 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: agregue manualmente estilos personalizados al editor visual de WordPress

Este método requiere agregar 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 código de la web a 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 o al plugin específico del sitio.

function wpb_mce_buttons_2($buttons) {
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');

Paso 2: agregue las opciones de selección al menú desplegable

Ahora deberá agregar las opciones al menú desplegable recién creado. Luego podrá seleccionar y aplicar estas opciones desde el menú desplegable Formatos.

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

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

/*
* Callback function to filter the MCE settings
*/

function my_mce_before_init_insert_formats( $init_array ) {  

// Define the style_formats array

	$style_formats = array(  
/*
* Each array child is a format with it's own settings
* Notice that each array has title, block, classes, and wrapper arguments
* Title is the label which will be visible in Formats menu
* Block defines whether it is a span, div, selector, or inline style
* Classes allows you to define CSS classes
* Wrapper whether or not to add a new block-level element around any selected elements
*/
		array(  
			'title' => 'Content Block',  
			'block' => 'span',  
			'classes' => 'content-block',
			'wrapper' => true,
			
		),  
		array(  
			'title' => 'Blue Button',  
			'block' => 'span',  
			'classes' => 'blue-button',
			'wrapper' => true,
		),
		array(  
			'title' => 'Red Button',  
			'block' => 'span',  
			'classes' => 'red-button',
			'wrapper' => true,
		),
	);  
	// Insert the array, JSON ENCODED, into 'style_formats'
	$init_array['style_formats'] = json_encode( $style_formats );  
	
	return $init_array;  
  
} 
// Attach callback to '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 bajo los formatos.

Sin embargo, seleccionarlos no hace ninguna diferencia en el editor de publicaciones en este momento.

Paso 3: agregue estilos CSS

Ahora, el paso final es agregar reglas de estilo CSS para sus estilos personalizados.

Deberá agregar este CSS en los archivos style.css y editor-style.css del tema o del tema hijo.

.content-block { 
    border:1px solid #eee; 
    padding:3px;
    background:#ccc;
    max-width:250px;
    float:right; 
    text-align:center;
}
.content-block:after { 
    clear:both;
} 
.blue-button { 
	background-color:#33bdef;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 24px;
	text-decoration:none;
}

.red-button {
	background-color:#bc3315;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #942911;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 24px;
	text-decoration:none;
}

La hoja de estilo del editor controla la apariencia del 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 del editor, siempre puede crear uno. Simplemente cree un nuevo archivo CSS y asígnele un 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( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

Eso 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.