Cómo Añadir Estilo Personalizado al Editor de WordPress

Cómo Añadir Estilo Personalizado al Editor de WordPress

WordPress incluye un editor visual con herramientas de estilización predeterminadas que te ayuda en crear contenido organizado y bien estructurado, resaltando texto, y añadiendo cabeceras gerárquicas, que no sólo dan presentación vistosa al contenido, sino también que orienta a los lectores, y ayuda al mismo tiempo que los motores de búsqueda entiendan la semántica de cada página. Hoy te mostraremos cómo darle un toque y añadir estilo personalizado al editor de WordPress

Editor de WordPress

El editor que viene con WordPress de forma predeterminada es TinyMCE, que se usa generalmente para editar contenido de páginas y entradas. Este editor incluye una variedad de botones para estilizar tu contenido, pero que no son los únicos, ya que puedes agregar tus propios botones en la barra del editor para mejorar su funcionamiento.

Si eres una persona exigente, y quieres sacarle todo el provecho a WordPress, para mejorar tu editor y añadir estilo personalizado al editor visual, entonces esto es lo que vamos a hacer. Es preferible contar con conocimientos esenciales sobre CSS, que es el lenguaje de estilización que usa WordPress, para beneficiarse de lo que ofrece este gran editor.

En este artículo te mostraremos cómo añadir estilo personalizado al editor de WordPress de varias formas, con el fin de ayudarte a elegir el método más sencillo o más acorde a tus necesidades.

Añadir Estilo Personalizado al Editor con Código

Primer método que utilizaremos para darle un toque personalizado a tu editor visual de WordPress es un poco avanzado, ya que requiere de conocimientos en cómo editar archivos en WordPress de forma correcta.

Antes de hacer modificaciones en cualquier archivo, es recomendable crear una copia de respaldo backup de tu sitio web con la base de datos y guardarlos en alguna ubicación segura fuera del servidor.

En el editor visual de WordPress hay opciones ocultas que se pueden mostrar de forma relativamente sencilla mediante un poco de código, que lo que hace realmente no es crear nuevas opciones al editor, sino simplemente activar los elementos u opciones ya existentes de forma pasiva en el ecosistema de WordPress.

function botones_wpbody( $buttons ) {
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
}
add_filter( 'mce_buttons_3', 'botones_wpbody' );

Con este código que debes agregar al archivo de functions.php de tu tema actual, o en el tema hijo de tu sitio web, una vez guardado el archivo, muestra un botón oculto de Formatos, que contiene una lista desplegable de gran variedad de botones para formatear texto de la entrada.

Personalizar Código

Este código añade el botón en la tercera línea del editor, si quieres que aparezca en la primera sólo cambias el gancho del filtro mce_buttons_3 al número de la línea deseada, por ejemplo mce_buttons_1 para ver el botón en la primera línea de la barra del editor.

Pero ¿qué pasa si quieres un estilo personalizado de formatos? En WordPress hay la solución, con un código lo que hacemos añadir nueva opción al botón “Formatos” para poner una estilización más personalizada como en este ejemplo.

function wpbody_estilo_personalizado( $init_array ) {
	$style_formats = array(
		array(
			'title'    => __( 'Resaltador', 'text-domain' ),
			'inline'   => 'span',
			'classes'  => 'resaltador-wpbody'
		),
	);
	$init_array['style_formats'] = json_encode( $style_formats );
	return $init_array;
} 
add_filter( 'tiny_mce_before_init', 'wpbody_estilo_personalizado' );

Cuando copias y pegas el código en el archivo functions.php y lo guardas, aparece un texto con el título que hemos creado “Resaltador” dentro de un elemento <span> y con la clase personalizada .resaltador-wpbody para estilizar el texto del elemento con CSS.

.resaltador-wpbody {
    background: #7f9cc7;
    border-left: 5px solid #ddd;
    padding: 20px;
    color: #eee;
}

Copias y pegas este estilo en el archivo style.css del tema actual o si usas tema hijo en el archivo dedicado a la estilización para que tenga efecto a la hora de aplicar este estilo personalizado al contenido de tu sitio web.

Puedes también crear un archivo dedicado a tu propio estilo CSS con este código que sirve para registrar y cargar un nuevo archivo de estilo en el ecosistema de WordPress.

function archivo_estilo_wpbody() {
    add_editor_style( 'estilo-editor.css' );
}
add_action( 'init', 'archivo_estilo_wpbody );

Después de añadir este código a tu archivo de functions.php creas otro archivo en la carpeta raíz de tu tema actual con el nombre de estilo-editor.css que usarás sólo para añadir estilo personalizado a tu editor de WordPress.

Para información más profundizada sobre cómo añadir estilo personalizado en el editor TinyMCE de WordPress, puedes visitar la página oficial de codex de WordPress sobre estilos en el editor que está en inglés.

Añadir Estilo Personalizado al Editor con Plugin

El método más sencillo, para la mayoría de los usuarios, es añadir estilo personalizado al editor de WordPress mediante un plugin. Bueno, para ello vamos a utilizar el plugin TinyMCE Custom Styles, cuyo nombre describe exactamente lo que hace.

Cuando instalas y activas el plugin, aparece una página en el submenú en Ajustes » TinyMCE Custom Styles para ajustar la configuración y crear los archivos personalizados del estilo tanto para el tema como para el editor TinyMCE.

Crear tu Propio Estilo

La opción más recomendada para crear los archivos de estilo es creándolos en el directorio de wp-content de tu instalación para que las actualizaciones automáticas no sobreescriban el estilo personalizado en los archivos.

Agregar nuevo estilo CSS con el plugin TinyMCE en WordPress

Después procedes a crear tu propio estilo, das clic en el botón Agregar nuevo estilo y rellenas los formularios con el tipo de elemento y la estilización pertienente para tu sitio web, un ejemplo de cómo utilizarlo en la imagen inferior.

Añadir estilo personalizado al editor de WordPress TinyMCE con plugin

Y como puedes apreciar un resultado de una estilización muy básica que hemos creado como especie de título resaltado. El plugin te da toda la libertar para crear estilo personalizado que imaginas de forma limpia y rápida.

Con esto terminas de añadir tu propio estilo personalizado al editor de WordPress. Tienes dos alternativas entre las cuales elegir, la primera con algunos requerimientos técnicos más avanzados que la seguda en donde usas el plugin,

Si te interesa este artículo, no se te olvide compartirlo y seguirnos por la página nuestra en facebook o google+ donde publicamos a diario contenido actualizado sobre la seguridad y optimización de WordPress.

DEJAR COMENTARIO

Favor escribir tu comentario!
Favor ingresar tu nombre aquí