• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Subtítulo desde título de la entrada en WordPress

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

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

[ hace 7 meses ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

editor mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Subtítulo WordPress resultado final

 

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.

Título con caracter separador

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar subtítulos en WordPressAgregar subtítulos en WordPress
  • Agregar recaptcha v3 en formulario de contactoAgregar recaptcha v3 en formulario de contacto
  • Archivo de plantilla de acuerdo a url personalizada en WordPressArchivo de plantilla de acuerdo a url personalizada en WordPress
  • Ocultar el título en la página de inicio de WordPressOcultar el título en la página de inicio de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Mover WordPress manualmente

Konami personalizado en tu sitio WordPress sin usar plugins

Mostrar widget lateral al inicio en móviles

Insertar javascript en WordPress de forma correcta

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados