How to Add Custom Styles to the WordPress Visual Editor

Cómo agregar estilos personalizados al editor visual de WordPress

Eche un vistazo a su editor visual de WordPress. Hay opciones estándar para formatear y diseñar su contenido, pero no muchas en términos de personalización para que sus publicaciones y páginas se vean un poco elegantes.

Editor de WordPress

Ahora, es posible que sepa que tiene la opción de alternar entre los editores de texto y visuales de WordPress para agregar CSS para crear cosas como botones y bloques de texto, pero es una molestia, y si no tiene mucha experiencia en editando código, el editor de texto parece un poco intimidante.

¿No sería más fácil si pudiera crear sus propios estilos personalizados, colocarlos en un menú desplegable en el editor de WordPress y elegir usarlos siempre que lo necesite? Sí, es mucho más fácil, por eso queremos explicar cómo hacerlo aquí. Tenga en cuenta que, si bien intentamos que este proceso sea lo más fácil posible, es útil tener un poco de conocimiento de CSS si desea experimentar todos los beneficios de los estilos personalizados.

Veamos cómo agregar estilos personalizados al editor visual de WordPress.

Agregue estilos personalizados al editor visual de WordPress agregando código

Esta primera opción requiere que sepas un poco sobre cómo incorporar y modificar CSS, pero te daré una pequeña perspectiva para ayudarte a aprender los conceptos básicos para que puedas usar ese conocimiento en el futuro. Esta es una buena opción si no desea cargar su sitio con un complemento.

El objetivo es agregar un nuevo menú desplegable que incluya estilos personalizados en su editor visual de WordPress, lo que le brinda la posibilidad de seleccionar elementos en su editor y luego aplicarles estilos personalizados. Si está desarrollando un nuevo tema, busque su functions.php y coloque el código a continuación en ese archivo o si está trabajando con un tema ya incorporado, pegue este código en el archivo functions.php de un tema hijo.

function myprefix_mce_buttons_1( $buttons ) {
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
}

add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );

Vuelva al editor en una de sus publicaciones de WordPress y ahora debería ver un nuevo botón “Formatos” en la fila superior del editor. ¿Observa cómo conseguimos el “mce_buttons_1? Esto coloca el botón del menú de formatos en la primera línea del editor mce. También puede utilizar el filtro “mce_buttons_2” para colocarlo en la segunda fila o “mce_buttons_3” para colocarlo en la tercera fila.

Entonces, ahora que ha habilitado el elemento del menú, es hora de agregar sus estilos personalizados para usar en sus publicaciones. Tome el código de abajo y péguelo en su functions.php archivo que agregará 2 nuevos estilos a la lista desplegable de formatos: “Botón de tema” y “Resaltar”.

/**
 * Add custom styles to the mce formats dropdown
 *
 * @url https://codex.wordpress.org/TinyMCE_Custom_Styles
 *
 */
function myprefix_add_format_styles( $init_array ) {
	$style_formats = array(
		// Each array child is a format with it's own settings - add as many as you want
		array(
			'title'    => __( 'Theme Button', 'text-domain' ), // Title for dropdown
			'selector' => 'a', // Element to target in editor
			'classes'  => 'theme-button' // Class name used for CSS
		),
		array(
			'title'    => __( 'Highlight', 'text-domain' ), // Title for dropdown
			'inline'   => 'span', // Wrap a span around the selected content
			'classes'  => 'text-highlight' // Class name used for CSS
		),
	);
	$init_array['style_formats'] = json_encode( $style_formats );
	return $init_array;
} 
add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );

Puede cambiar los títulos para mostrar diferentes nombres en su menú desplegable, agregar / eliminar elementos de la tabla, etc. Puede modificar casi cualquier cosa en este código para revelar sus propios estilos de formato personalizados, asegúrese de verificar el Códice de WordPress para obtener una explicación más detallada de los parámetros aceptados y los valores de retorno.

Ahora que tiene algunos estilos nuevos, puede resaltar el contenido en su editor y aplicar los estilos. ¿Observa cómo el formato “Botón de tema” tiene una configuración de selector? Esto significa que el estilo solo se puede aplicar a ese selector específico (en este caso, la etiqueta “a” o “enlace”). El segundo formato que agregamos “Resaltar” no tiene un parámetro selector, sino un parámetro “en línea” que le dice que aplique el estilo a cualquier texto que haya resaltado en su editor y lo envuelva. En un rango con su clase única nombre. Puede ver un ejemplo de nuestro tema Total WordPress sobre cómo usamos formatos para que los usuarios puedan fácilmente aplicar una lista de verificación mira todas las viñetas en el editor.

lista de control

Ahora puede usar sus formatos personalizados, pero no serán diferentes hasta que agregue CSS personalizado a su sitio para diseñarlos. Debe ubicar la hoja de estilo para su tema (si está creando el suyo propio) o tema hijo y pegar el siguiente código CSS en el archivo.

.theme-button {
	display: inline-block;
	padding: 10 15px;
	color: #fff;
	background: #1796c6;
	text-decoration: none;
}
.theme-button:hover {
	text-decoration: none;
	opacity: 0.8;
}
.text-highlight {
	background: #FFFF00;
}

Ahora, esto agregará estilo a sus nuevos formatos para la interfaz, de modo que una vez aplicado pueda verlos en vivo. ¡Hurra! ¿Pero no sería bueno ver también sus estilos en el editor real cuando se aplican? Para hacer esto, necesitará usar la función ‘hoja de estilo del editor’ en WordPress. Si está creando su propio tema, querrá crear un nuevo archivo css en su tema llamado “editor-style.css” (puede nombrarlo como desee, solo asegúrese de editar el fragmento a continuación en consecuencia) con el CSS personalizado agregado para sus formatos, luego agregue la función a continuación para cargarlo en el backend.

function myprefix_theme_add_editor_styles() {
    add_editor_style( 'editor-style.css' );
}
add_action( 'init', 'myprefix_theme_add_editor_styles' );

Si está trabajando con el tema de otra persona, deberá agregarlo en su tema secundario, solo asegúrese de darle un nombre único para que no entre en conflicto con su tema principal o si su tema principal ya tiene un archivo CSS para el editor, puede copiarlo y pegarlo en su tema secundario (sin agregar el código PHP anterior) y luego agregar su nuevo CSS porque WordPress primero verificará el tema secundario antes de cargar el archivo CSS desde el editor del tema principal y si lo ubica , lo hará cargarlo desde el tema hijo.

Agregue estilos personalizados al editor visual de WordPress con un buen complemento

Si no tiene tiempo para jugar con el código o no puede resolverlo usted mismo, hay buenas noticias. Hay un complemento que le permite completar exactamente lo que acabamos de hacer sin tener que preocuparse por el código.

Complemento de estilos personalizados TinyMCE

Simplemente busque, instale y active el Complemento de estilos personalizados TinyMCE y actívelo en su sitio de WordPress.

Configuración de estilos personalizados de TinyMCE

Ir a Configuración> Estilos profesionales de TinyMCE en el lado izquierdo de su panel de WordPress. Aquí es donde cambia la configuración del complemento.

Configuración de estilos personalizados de TinyMCE

El complemento le permite elegir dónde se ubican sus hojas de estilo o dónde desea colocarlas. Se recomienda crear un nuevo directorio personalizado. Seleccione la tercera opción y asigne un nombre a su directorio, luego desplácese hacia abajo en la página para hacer clic en su Guardar ajustes opción antes de continuar con el siguiente paso.

Estilos personalizados TinyMCE Agregar nuevo

Una vez que haya guardado la configuración, desplácese hacia abajo para seleccionar el botón Agregar nuevo estilo.

Opciones de estilo personalizado de TinyMCE

Aquí es donde puede personalizar cómo desea que se vean sus estilos personalizados. Básicamente es un editor web simple que genera el código CSS por ti. Escriba un título para lo que desea mostrar en el menú desplegable. Elija si desea un selector, un tipo en línea o un tipo de bloque. Siéntase libre de usar la captura de pantalla anterior para completar las clases y estilos de CSS, o cree los suyos propios dependiendo de lo que planee usar en el menú desplegable. Cuando termine, haga clic en Guardar configuración en la parte inferior de la página.

Formato de estilos personalizados de TinyMCE

Ahora es el momento de ver cómo se ve el nuevo estilo personalizado en su editor. Abra una nueva publicación o página y busque el menú desplegable Formatos en el lado izquierdo del editor visual. Aparece en la segunda línea. Una vez que haga clic en el menú desplegable, revelará el nuevo estilo que acaba de crear.

Se utilizó el formato de estilos personalizados de TinyMCE

Haga clic en la opción Big Blue Button, o lo que sea que haya creado, para verlo revelado en su editor. Para usarlo, simplemente resalte el texto que desea formatear, luego haga clic en su opción y ¡listo!

Conclusión

¡Eso es todo por el momento! Siempre puede obtener más información sobre el uso de nuevos estilos consultando el Página del Codex de WordPress dedicado a este tema.

Háganos saber en la sección de comentarios si tiene alguna pregunta sobre cómo agregar estilos personalizados al editor visual de WordPress. ¡Y siéntete libre de compartir cualquier estilo inusual que hayas creado para hacer que tu sitio sea un poco más bonito!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba