Añadir formatos al editor de texto de WordPress sin Plugin

En ocasiones mientras trabajamos en nuestra página web o blog WordPress necesitamos tener definidos algunos estilos para poder personalizar textos, enlaces, botones o cualquier otro elemento. Lo ideal en estos casos sería poder contar con un menú desplegable en el editor con todos los formatos de estilo que necesitemos y así no tener que estar cambiando ala visualización HTML para añadir el código HTML y CSS necesario.

Si queremos ahorrarnos la instalación de un nuevo plugin y tenemos conocimientos del código WordPress y del manejo de los CSS podemos crear una función y definir los formatos que necesitemos.

El primer paso es definir en la hoja CSS de nuestro tema los estilos que queramos aplicar. Si quieres saber más lee este post que hicimos sobre personalizar temas de WordPress utilizando CSS
Para el ejemplo de de este artículo he defino los siguientes:

.enlace {
color: #FF7F82;
text-decoration: underline
}

.recuadro {
background-color: #FF7F82;
padding: 15px;
color: #fff;
}

.texto-verde {
color: #69beb1;
font-weigth: bold;
}

El paso siguiente es abrir el archivo functions.php y pegar este código:

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

function my_mce_before_init_insert_formats( $init_array ) {
// Definimos nuestros estilos en el array
$style_formats = array(
array(
'title' => 'Enlace', // Nombre del estilo
'selector' => 'a', // Selector: Aplica el estilo a una etiqueta HTML
'classes' => 'enlace', //Clase CSS
),
array(
'title' => 'Recuadro', // Nombre del estilo
'block' => 'div', //Block: Nuevo elemento bloque al que aplicar el estilo
'classes' => 'recuadro', //Clase CSS
'wrapper' => true
),
array(
'title' => 'Texto Verde', // Nombre del estilo
'inline' => 'span', // Inline: Nuevo elemento inline al que aplicar el estilo
'classes' => 'texto-verde', //Clase CSS
),
);
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Como habrás visto hay varias opciones para configurar en el array y que debemos definir:

• title: Obligatorio. Nombre del estilo que aparecerá en el desplegable del editor.
• selector: Obligatorio.Define una etiqueta HTML a las que se aplicará la clases.
• block: Obligatorio.Define un elemento HTML de nivel de bloque (por ejemplo, blockquote) para crear con la clase aplicada. Reemplazará la etiqueta del elemento seleccionado.
• inline: Obligatorio. Define un elemento HTML en línea (por ejemplo, span) para crear con la clase aplicada, que ajustará la selección actual del editor, sin reemplazar ninguna etiqueta.
• classes: Opcional. Puedes definir una o varias clases separadas por espacios para aplicar al elemento.
• wrapper: Opcional, false por defecto. Si se define como true,  crea un nuevo elemento alrededor de los elementos seleccionados.

Una vez hayamos definido los estilos y la función vamos a nuestro panel de WordPress y añadimos o editamos una entrada. Verás que en el editor aparece el desplegable “Formatos” con los estilos que hemos declarado.

Añadir estos formatos nos permite personalizar el diseño de nuestro blog o página de una manera rápida y evitando instalar plugins. Con unos conocimientos básicos sobre CSS y un poco de imaginación podremos conseguir darle a nuestro WordPress un diseño único.

¿Conoces otra manera de añadir formatos al editor de texto de WordPress sin Plugin? ¿Tienes alguna duda con los pasos a seguir? Deja en los comentarios cualquier cosa que quieras compartir.