Ene 212016
 
Artículo WordPress

El aspecto de un artículo de un blog (y en general, de cualquier página web) puede mejorar significativamente si se aplican estilos a algunas partes del texto, como por ejemplo notas adicionales, avisos, citas, etc, que ayuden a diferenciarlos del contenido principal.

Muchos gestores de contenidos, entre los que se encuentra WordPress, utilizan “temas” que determinan el diseño de la página. Normalmente, en estos temas se definen clases CSS para asignar estilos  a un bloque de texto. Por ejemplo, el tema utilizado en este mismo blog incluye definiciones de clases con nombres “note”, “announcement”, “warning” y “download”.

Utilizando estas clases, obtenemos el siguiente resultado:

Este párrafo utiliza la clase “note”

Este párrafo utiliza la clase “announcement”

Este párrafo utiliza la clase “warning”

Este párrafo utiliza la clase “download”

El problema es que, en una configuración de WordPress por defecto, para asignar una clase CSS a un bloque de texto hay que editar el código HTML de la página. Normalmente, la edición consiste en insertar el texto que se desea resaltar dentro de un bloque “<div>” o “<span>”, al que se le asigna la clase CSS deseada.

En el ejemplo de arriba, el texto “Este párrafo utiliza la clase “note”” debe escribirse en HTML como:

<span class="note">Este párrafo utiliza la clase "note"</span>

Afortunadamente, en WordPress es posible modificar la configuración del editor de texto TinyMCE, para añadir al menú del editor un selector de estilos personalizados. Esto permite asignar un estilo a un bloque de texto, sin necesidad de editar el código HTML, siguiendo los pasos que se explican a continuación.

1. Crear una hoja de estilo “editor-style.css”

Las definiciones de estilo que queremos añadir al menú deben ser cargados por el editor, para que el resultado de aplicar un estilo sea visible inmediatamente en la ventana del editor.

Para ello, en el directorio en donde se encuentra el tema utilizado por el blog creamos un fichero “editor-styles.css”, y copiamos desde la hoja de estilo del tema (normalmente, es un fichero llamado “style.css” situado en el mismo directorio) las definiciones de estilo deseadas. En nuestro ejemplo:

.download {
        background-color: #E3F5F9;
        border: 1px solid #0000ff;
}

.announcement {
        background-color: #b8f9d5;
        border: 1px solid #088c43;
}

.warning {
        background-color: #ffdbea;
        border: 1px solid #ff0000;
        padding: 0;
}

.note {
        background-color: #f9f6a7;
        border: 1px solid #e7d605;
}

2. Indicar al editor que lea la hoja de estilo

Al cargar el contenido de la página en el editor TinyMCE, el navegador debe cargar también la hoja de estilo, para poder aplicar al texto los estilos que contiene.

Para ello, añadimos unas sentencias al fichero “functions.php” que se encuentra en el directorio del tema utilizado:

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

3. Mostrar el selector de estilos en el menú del editor

El menú del editor TinyMCE incluye un selector de estilos ‘styleselect’. Pero en una instalación por defecto de wordpress este selector está escondido:

menu-tinyMCE-basico

Para hacer visible en el menú superior del editor este selector de estilos, añadimos el siguiente código al fichero ‘functions.php’ del tema utilizado por el blog:

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

add_filter('mce_buttons_2', 'my_editor_buttons');

y con esto vemos aparecer el selector de estilos “Formatos” en el menú del editor:

menu-tinyMCE-con-estilos

Sin embargo, las opciones que se presentan en la lista desplegable son las opciones estándar. A continuación verea mos como añadir opciones adicionales para poder aplicar nuestros estilos personalizados.

4. Añadir opciones al selector de estilos

Las opciones que aparecen en el desplegable “Formatos” están configuradas en una estructura de datos que se puede modificar aplicando un filtro de wordpress. En primer lugar, añadimos al fichero “functions.php” una llamada a una función “my_editor_settings” en la que modificaremos esta estructura:

add_filter('tiny_mce_before_init', 'my_editor_settings');

La función “my_editor_settings” recibe como argumento una variable “$settings” que es un array con todos los parámetros de configuración de TinyMCE. La función modificará el parámetro “style_formats”, y devuelve la variable $settings modificada. En nuestro ejemplo, añadimos al fichero “functions.php” la siguiente definición de la función “my_editor_settings”:

function my_editor_settings( $settings ) {

    $style_formats = array(
        array(
            'title' => 'Note',
            'selector' => 'p',
            'classes' => 'note',
        ),
        array(
            'title' => 'Announcement',
            'selector' => 'p',
            'classes' => 'announcement',
        ),
        array(
            'title' => 'Warning Box',
            'block' => 'div',
            'classes' => 'warning',
            'wrapper' => true
        ),
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
            ),
        array(
            'title' => 'Red Uppercase Text',
            'inline' => 'span',
            'styles' => array(
                'color' => '#ff0000',
                'fontWeight' => 'bold',
                'textTransform' => 'uppercase'
            )
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

}

Y con esto, al volver a entrar en el editor vemos las nuevas opciones en el desplegable “Formatos”:

menu-tinyMCE-con-custom-styles

Como vemos, la definición de cada una de las entradas del menú consta de una serie de atributos. Los más comunes son:

  • inline – Nombre del elemente inline (p.ej., “span”) en que se insertará el texto selecionado.
  • block – Nombre del elemento de tipo block (p.ej., “h1”). Los elementos de tipo block existentes en el texto seleccionado serán sustituidos por este elemento.
  • selector – patrón selector de elementos en sintaxis CSS 3. Se puede utilizar para aplicar clases CSS a todos los elementos que coincidan con el selector.
  • classes – lista de clases separadas por espacios que serán aplicadas a los elementos seleccionados o al nuevo elementos inline/block que se creará.
  • styles – estilos CSS (color, font-size,…) a aplicar al texto seleccionado
  • wrapper – Indica que el formato a aplicar es un contenedor para elementos de tipo block. Por ejemplo, un contenedor de tipo “div” o “blockquote”.

Referencias

Adding custom styles in wordpress TinyMCE editor

TinyMCE docs – Content Formatting: Style Formats

codes.wordpress.org: TinyMCE Custom Styles

 Publicado por en 11:45 am

 Deja un comentario

(requerido)

(requerido)