Añadir un botón con formatos en el editor de WordPress

Añadir un botón con formatos en el editor de WordPress

Muy buenas tardes a tod@s.

Voy a escribir sobre un pequeño snippet de código que suelo usar en casi todos mis proyectos WordPress y que facilita mucho la vida a la hora de ser ágil usando el editor de texto. Se trata de habilitar un selector en la 2ª barra de herramientas que nos permitirá de rápida sencilla añadir estilos y formatos al texto sin tener que recurrir al editor html.

Eso si, estos formatos y estilos deberemos definirlos previamente tanto en el archivo functions.php de nuestro tema hijo (para los que no sepan que es un tema hijo en WordPress o el archivo functions.php…) como en nuestra hoja de estilos .css. Lo más habitual es utilizar el archivo style.css del propio tema hijo, o el editor integrado que suelen traer los configuradores de todos los themes de wordpress modernos.

Vamos al lío… Como os he comentado antes, tendremos que añadir una serie de líneas al archivo functions.php de nuestro tema hijo, debajo del resto del código, y es recomendable dejar comentarios en el código para saber que estamos haciendo, ya sea para nosotros en un futuro, o para facilitarle la vida al que venga después:

// Con esta función añadimos el 'styleselect' al array de botones mostrados  
function cstr_mce_buttons_2( $buttons ) { 
	array_unshift( $buttons, 'styleselect' );  
	return $buttons;  
} 
add_filter('mce_buttons_2', 'cstr_mce_buttons_2');

Añadiremos cstr_ como prefijo para que no pueda haber conflicto con el nombre de otras funciones en el tema o plugins, pero podéis poner otra cosa, siempre que sea única. El filtro que se usa es “mce_buttons_2”.

Con esto habremos añadido nuestro selector al editor de wordpress, pero ahora mismo estará vacío y no hara otra cosa que ocupar espacio. Vamos a definir unos cuantos formatos para que os podáis hacer una idea de la potencia de este snippet. No me voy a poner a definir el código en profundidad en este post porque es bastante sencillo:

function cstr_mce_before_init_insert_formats( $init_array ) {    
    // Definimos nuestros estilos en el array  
    $style_formats = array(    
        // En cada array definimos un estilo asociado a una clase  
        array(    
            'title' => 'azul',  // Título que queremos darle  
            'inline' => 'span',  // Elemento que añadiremos  
            'classes' => 'azul',  // Clase que usaremos  
        ),    
		array(  
            'title' => 'blanco',    
            'inline' => 'span',    
            'classes' => 'blanco',  
        ),
		array(  
            'title' => 'rosa',    
            'inline' => 'span',    
            'classes' => 'rosa',  
        ),
		array(  
            'title' => 'mayusculas',    
            'inline' => 'span',    
            'classes' => 'mayusculas',  
        ),
		array(  
            'title' => 'subtitulo',    
            'inline' => 'span',    
            'classes' => 'subtitulo',  
        ),
    );  
    $init_array['style_formats'] = json_encode( $style_formats );    
    return $init_array;    
}   
add_filter( 'tiny_mce_before_init', 'cstr_mce_before_init_insert_formats' );

El filtro que vamos a usar es “tiny_mce_before_init”. Como podréis comprobar no me he quebrado mucho la cabeza a la hora de poner los nombres y las clases, porque tengo muy mala memoria y así se rápido cual es cual. Vosotros podéis darle otro nombre más descriptivo, dependiendo de la cantidad de formatos que creéis y lo que haga cada uno. Por ejemplo “Span rosa” o “Negrita uppercase”…

Bueno, ya casi hemos terminado. Los códigos anteriores habilitan el selector, y crean una serie de clases y etiquetas html, pero para poder ver el resultado en el front end, tendremos que crear el código css correspondiente para cada clase. Podemos ponerlo en donde tengamos el resto de nuestro css, ya sea en el style.css del tema hijo, en el configurador del tema, o en un plugin externo, eso ya lo dejo a vuestra elección. Veamos los css que usé yo:

/*formatos en el editor de wordpress*/
.rosa{
	color:#ef8194;
        font-weight:400;
}
.azul{
	color:#4bbecf;
        font-weight:400;
}
.blanco{
	color:#fff;
}
.mayusculas{
	text-transform:uppercase;
}
.subtitulo{
	color: #7f7f7f;
	font-weight: 200;
	font-size: 17px;
	font-family: 'Gotham SSm A', 'Lato', sans-serif;
}

Perfecto! Ya tenemos definidos nuestros estilos css. En concreto en este sitio web alternaba muchos textos con negritas de color rosa y azul, así como bloques con fondos oscuros que requerían que la tipografía fuera en blanco. El subtítulo está definido porque usábamos una serie de eslóganes con formato de subtitular, pero las etiquetas h nos gusta tenerlas bastante controladas por temas SEO. Ya hablaremos de esto más adelante en otro post.

Una vez guardados todos los archivos y comprobado que no da ningún error (recordar hacer siempre backups, siempre se nos puede escapar algún ; o algún } traicionero…) vamos a probarlo en el editor de wordpress. El nuevo selector debería de salirnos en la segunda fila de herramientas a la izquierda del todo:

No soy demasiado partidario de usar el editor de color de WordPress, porque mete los estilos “inline”, que no es lo más recomendable, es un peñazo y además si luego quiero cambiar el tono del rosa o del azul en la web (o quitarle peso, por ejemplo), tendría que repasarme toda la web cambiándolos. Con esto habré definido en el selector de formato una serie de opciones que añadirán de forma automática una etiqueta al texto que tenga seleccionado con la clase correspondiente. ¿Muy cómodo no?.

Este truco resulta muy útil si tenemos definidos una serie de estilos que vamos a utilizar de forma repetitiva durante todo el proyecto desde el principio y agilizará mucho el proceso de volcado/maquetación de la web, así como a la hora de realizar mantenimientos y añadir contenido nuevo. Hay que tener en cuenta que si se usa desde el principio, y se toma por costumbre, nos permitirá cambiar o afinar estos estilos de golpe en toda la web, ahorrándonos una gran cantidad de trabajo.

Os dejo la referencia del codex de wordpress por si queréis saber más sobre el tema:

Plugin API/Filter Reference/mce buttons, mce buttons 2, mce buttons 3, mce buttons 4 en el codex de WordPress.

Espero que este post os parezca de interés. Un saludo!

Brian O´Sullivan
brianltobil@gmail.com