Subtítulo desde título de la entrada en WordPress

[ 22 junio 2022 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

En un artículo anterior habíamos visto cómo agregar un subtítulo en WordPress a través de un campo personalizado y javascript, sin embargo en este artículo veremos cómo extraer el subtítulo directamente desde el título usando un Hook en WordPress.

Resultado Final

Al final lo que queremos obtener será algo similar a lo que se muestra en la siguiente imagen:

Construcción del título de una entrada

La entrada tendrá un título con el caracter “|” como separador, entre el título principal y el subtítulo, de esta forma posteriormente podremos identificar la parte del subtítulo.

La idea es que una vez identificado el subtitulo podremos “envolverlo” con algún código HTML para posteriormente darle un estilo diferente.

Código PHP para separar el subtítulo

Puedes usar el siguiente código como parte de tu archivo functions.php de tu tema hijo o usar algún plugin de snippets.

add_filter('the_title', 'dcms_build_subtitle', 10, 2);
function dcms_build_subtitle( $title, $id ){
    if ( ! is_admin() && get_post_type( $id ) === 'post' ){
        $titles = explode('|', $title);
        $subtitle = '';
        if ( isset($titles[1]) ) {
            $subtitle = "<span class='subtitle'>{$titles[1]}</span>";
        }
        return $titles[0] . $subtitle;
    }
    return $title;
}

En el código anterior:

Usamos el Hook the_title que hace referencia a la función dcms_build_subtitle()
Dentro de la función comprobamos si estamos en el front-end del sitio y si estamos en una entrada
El filtro nos proporciona como parámetro el título de la entrada, por lo que podremos hacerle modificaciones
Usamos la función de PHP explode() para separar el subtítulo, será el elemento 1 del array
Envolvemos el subtítulo con la etiqueta span y una clases CSS que nos servirá para darle estilo
Finalmente devolvemos el título modificado concatenando el valor 0 del array con el subtítulo modificado

Código HTML para dar estilos al subtítulo

En el código anterior habíamos usado una etiqueta span y también habíamos agregado la clase llamada subtitle, en base a esa clase podemos darle estilos CSS al subtítulo, por ejemplo:

/*Estilos para el subtítulo de una entrada*/
.entry-title span.subtitle{
    font-size: 1.5rem;
    display: block;
    color:coral;
}

/* Si no quieres mostrar el subtítulo en otras secciones*/
:not(.entry-title) .subtitle{
    display: none;
}

Conclusión

Como has podido comprobar a pesar de que WordPress no tiene por defecto el uso de subtítulos para las entradas, puedes agregar esta funcionalidad en base al campo título ya existente e identificar la parte del subtítulo con un separador.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.