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

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

editor mejoras

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.

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.

Valora este artículo : (2 votos, promedio: 5,00 de 5)

Cargando...