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

Agregue estilos personalizados en el editor visual de WordPress

notas: Este tutorial requiere un conocimiento básico de trabajo de CSS.

Por qué y cuándo necesita un estilo personalizado para el editor visual de WordPress

De forma predeterminada, 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 agregar botones CSS, bloques de contenido, pancartas y más.

Siempre puede cambiar de un editor visual a un editor de texto y agregar HTML y CSS personalizados. Pero si usa mucho algunos estilos, es una buena idea agregarlos al editor visual para que pueda reutilizarlos fácilmente.

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

Lo mejor de todo es que puede ajustar o actualizar estilos fácilmente sin editar publicaciones en su sitio web.

Habiendo dicho todo eso, echemos un vistazo a cómo agregar estilos personalizados en el editor visual de WordPress.

Método 1: use un complemento para agregar estilos personalizados en el editor visual

Lo primero que debe hacer es instalar y activar el complemento de estilo personalizado TinyMCE. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.

Después de la activación, debe acceder Ajustes » Estilos personalizados de TinyMCE página para configurar los ajustes del complemento.

Configuración de estilo personalizado de TinyMCE

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

Después de eso, debe hacer clic en el botón “Guardar todas las configuraciones” para almacenar sus cambios.

Ahora puede agregar estilos personalizados. Debe desplazarse un poco hacia abajo hasta la sección de estilos y hacer clic en el botón Agregar nuevo estilo.

Primero, debe ingresar un título para el estilo. El título aparecerá en el menú desplegable. A continuación, debe elegir si se trata de un elemento en línea, un elemento de bloque o un elemento 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 nuevos estilos personalizados

Después de agregar estilos CSS, simplemente haga clic en el botón “Guardar todas las configuraciones” para guardar los cambios.

Ahora puede editar publicaciones existentes o crear otras nuevas. Notarás el menú desplegable de formato en la segunda fila del editor visual de WordPress.

Menú de estilo personalizado en TinyMCE

Simplemente seleccione un texto en el editor y elija su estilo personalizado en el menú desplegable Formato para aplicarlo.

Ahora puede obtener una vista previa de su publicación para ver si sus estilos personalizados se han aplicado correctamente.

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

Este método requiere que agregue manualmente el código a su archivo 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 web a WordPress.

Paso 1: agregue un menú desplegable de estilo personalizado en el editor visual de WordPress

Primero, agregaremos un menú desplegable de formato al 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 un complemento 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 opciones de selección al menú desplegable

Ahora necesita agregar opciones al menú desplegable que acaba de crear. Luego podrá seleccionar y aplicar estas opciones desde el menú desplegable Formato.

A los efectos de este tutorial, hemos agregado tres estilos personalizados para crear botones y bloques de contenido.

Debe agregar el siguiente código al archivo functions.php de su tema o un complemento 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 Formato en el editor visual. Notará que sus estilos personalizados ahora están visibles en Formato.

Sin embargo, seleccionarlos ahora no tiene ningún efecto en el editor de publicaciones.

Paso 3: Agrega estilos CSS

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

Debe agregar este CSS a los archivos style.css y editor-style.css de su tema o tema secundario.

.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;
}

Estilos personalizados en el editor de publicaciones de WordPress

Las hojas de estilo del editor controlan cómo se ve su contenido en el editor visual. Consulte la documentación de su tema para averiguar dónde se encuentra 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 asígnele un nombre custom-editor-style.css.

Debe cargar este archivo en el directorio raíz de su tema y 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 estilos personalizados al editor visual de WordPress. Siéntase libre de usar 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 te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.