Aplicar estilos a listados de publicaciones en el Escritorio de WordPress

Un usuario del grupo de WordPress Venezuela en Telegram preguntó cómo aplicar estilos a los títulos de las publicaciones en el Escritorio de WordPress. Concretamente quería cambiar de color la primera palabra de los títulos de sus publicaciones.

Primeros pasos

La forma más sencilla de hacerlo, aunque quizás no la más elegante, es aplicar estilos en línea al título, de modo que en el ejemplo que nos ocupa, podríamos hacer lo siguiente:

<span style="color:green">Toyota:</span> Corolla

Con lo cual aplicaríamos el color verde solo a la primera palabra. Podemos comprobar como se vería en el front-end (la parte pública del sitio):

El problema…

Sin embargo, en el Escritorio la estrategia no funciona como esperábamos. Al volver al listado de publicaciones, vemos lo siguiente:

Entendiendo la función esc_attr()

La explicación a este comportamiento es que la clase WP_List_Table utiliza la función esc_attr(), una utilidad de WordPress que convierte los caracteres menor que (<), mayor que (>), comillas («) y ampersand (&) a entidades HTML.

Las entidades HTML son estructuras codificadas que nos permiten representar símbolos, especialmente útil cuando debemos hacer uso de los caracteres utilizados por el propio código HTML, como los mencionados anteriormente. De modo que si escribimos < en nuestro código HTML obtendrémos como resultado el caracter menor qué (<)

Además de esta utilidad, también sirve para aplicar técnicas de seguridad a nuestro código, evitando la ejecución de código malicioso, por ejemplo: código PHP que ejecute un script o código MySQL que modifique filas en nuestra base de datos.

…la solución

El primer paso para personalizar los títulos del listado con nuestros estilos, es reescribir la manera en que WordPress genera el HTML del listado. Para ello, antes que nada vamos a desactivar la columna «Título» (‘title’) y añadir una nueva columna «Modelo de vehículo» (‘modelo’), para ello preparamos una función:

/**
 * Reemplazar la columna «Título» ('title') por «Modelo de vehículo» ('modelo')
 */ 

function mitema_reemplazar_columna_title($columns) {

    // Preparamos la variable $nuevo con un array
    $nuevo = array();
    // Buscamos en las columnas la coincidencia 'title' haciendo uso del ciclo foreach
    foreach($columns as $key => $title) {
        if ($key=='title')
        // Establecimos un nuevo ID para la columna 
        // Y una etiqueta de encabezado personalizado
        $nuevo['modelo'] = __('Modelo de vehículo', 'mitema');
        $nuevo[$key] = $title;
    }    
    unset($nuevo['title']); 
    return $nuevo;
}

WordPress cuenta con un par de funciones especiales para aplicar hooks (ganchos) que enlazan una función (llamada función de retorno o callback) con un área específica de WordPress:

add_filter(): El filtro es un hook que modifica contenido.
add_action(): La acción es un hook que añade contenido.

La primera función la ejecutaremos en un filtro:

// Ejecutar la función en Artículos:
add_filter('manage_posts_columns', 'mitema_reemplazar_columna_title');
// Ejecutar la función en Páginas:
add_filter('manage_pages_columns', 'mitema_reemplazar_columna_title');
// Ejecutar la función en un Custom Post Type llamado «Modelos»:
add_filter('manage_modelos_posts_columns', 'mitema_reemplazar_columna_title');

El código está comentado, pero simplificando aún más, lo que hace es lo siguiente:

Buscamos la columna con el ID ‘title’
Al encontrarla, sobreescribimos su ID a ‘modelo’ y la etiqueta de encabezado a «Modelos de vehículos»
Retornamos el nuevo valor…
…y lo aplicamos, mediante un filtro, a Artículos, Páginas y un Tipo de Post Personalizado llamado «Modelos»

Si actualizas ahora mismo tus artículos o páginas, verás la columna «Modelos de vehículos», pero sin los títulos de las publicaciones. Vamos a solucionarlo:

/**
 * Reemplazar las entidades HTML con caracteres: <, > y "
 */
function mitema_activar_html_titulos_post($column_name, $post_ID) {
    if ($column_name == 'modelo') {
    $titulo = get_the_title(); // Obtenemos el título
    $titulo = str_replace('<', '<', $titulo); // Convertimos la entidad HTML en <
    $titulo = str_replace('>', '>', $titulo); // Convertimos la entidad HTML en >
    $titulo = str_replace('"', '"', $titulo); //Convertimos la entidad HTML en "
    ?>
    <a class="row-title" href="<?php echo esc_url( home_url( '/' ) ); ?>wp-admin/post.php?post=<?php echo $post_ID; ?>&action=edit"><?php echo $titulo; ?></a>
    <?php
    }
}

Preparada la función, tendremos que ejecutarla, nota que ahora la «enganchamos» a una acción, en vez de un filtro:

// Ejecutar la función en Artículos:
add_action('manage_posts_custom_column', 'mitema_activar_html_titulos_post', 10, 2);
// Ejecutar la función en Páginas:
add_action('manage_pages_custom_column', 'mitema_activar_html_titulos_post', 10, 2);
// Ejecutar la función en un Custom Post Type llamado «Modelos»:
add_action('manage_modelos_custom_column', 'mitema_activar_html_titulos_post', 10, 2);

Siguiendo la premisa de simplificar la comprensión del código:

Preparamos la función que recibe los parámentros $column_name y $post_ID
Creamos una condicional para buscar la columna ‘modelo’
Al encontrarla, guardamos en la variable $titulo el título de la publicación que se habrá creado con entidades HTML
Al mismo título le pasamos la función de PHP str_replace() que reemplazará las entidades HTML por su caracter correspondiente.
Renderizamos el título para cada publicación
Ejecutamos la función mediante una acción en Artículos, Páginas y «Modelos»

Al comprobar el listado de publicaciones, vemos que ya se están aplicando los estilos:

Código terminado

/**
 * Reemplazar la columna «Título» ('title') por «Modelo de vehículo» ('modelo')
 */ 

function mitema_reemplazar_columna_title($columns) {

    // Preparamos la variable $nuevo con un array
    $nuevo = array();
    // Buscamos en las columnas la coincidencia 'title' haciendo uso del ciclo foreach
    foreach($columns as $key => $title) {
        if ($key=='title')
        // Establecimos un nuevo ID para la columna 
        // Y una etiqueta de encabezado personalizado
        $nuevo['modelo'] = __('Modelo de vehículo', 'mitema');
        $nuevo[$key] = $title;
    }    
    unset($nuevo['title']); 
    return $nuevo;
}
// Ejecutar la función en Artículos:
add_filter('manage_posts_columns', 'mitema_reemplazar_columna_title');
// Ejecutar la función en Páginas:
add_filter('manage_pages_columns', 'mitema_reemplazar_columna_title');
// Ejecutar la función en un Custom Post Type llamado «Modelos»:
add_filter('manage_modelos_posts_columns', 'mitema_reemplazar_columna_title');

/**
 * Reemplazar las entidades HTML con caracteres: <, > y "
 */

function mitema_activar_html_titulos_post($column_name, $post_ID) {
    if ($column_name == 'modelo') {
    $titulo = get_the_title(); // Obtenemos el título
    $titulo = str_replace('<', '<', $titulo); // Convertimos la entidad HTML en <
    $titulo = str_replace('>', '>', $titulo); // Convertimos la entidad HTML en >
    $titulo = str_replace('"', '"', $titulo); //Convertimos la entidad HTML en "
    ?>
    <a class="row-title" href="<?php echo esc_url( home_url( '/' ) ); ?>wp-admin/post.php?post=<?php echo $post_ID; ?>&action=edit"><?php echo $titulo; ?></a>
    <?php
    }
}
// Ejecutar la función en Artículos:
add_action('manage_posts_custom_column', 'mitema_activar_html_titulos_post', 10, 2);
// Ejecutar la función en Páginas:
add_action('manage_pages_custom_column', 'mitema_activar_html_titulos_post', 10, 2);
// Ejecutar la función en un Custom Post Type llamado «Modelos»:
add_action('manage_modelos_custom_column', 'mitema_activar_html_titulos_post', 10, 2);

Consideraciones finales

En este ejercicio, incluí los filtros y acciones tanto para artículos como para páginas y custom post types (CTP, tipos de post personalizados), aunque en la práctica seguramente necesitarás aplicar la solución a un solo tipo de contenido, de modo que tendrás que eliminar las líneas que te sobren o no apliquen a tu solución.

0 0 votes

Article Rating

Additional menu