• 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 / Agregar subtítulos en WordPress

Agregar subtítulos en WordPress

Agregar subtítulos en WordPress

[ 9 septiembre 2020 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Aprende a agregar subtítulos en las entradas y páginas de WordPress de manera simple a través de código, usaremos un campo personalizado para agregar el subtítulo y así evitaremos el uso de un plugin.

 

Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

Subtítulos en entradas resultado

 

Agregar campo personalizado

Para agregar un subtítulo, necesitamos agregar ese dato en la base de datos, lo haremos a través de los campos personalizados de WordPress.

 
Primero necesitarás asegurarte de que los campos personalizados se están mostrando, puedes hacerlo desde las opciones de Gutenberg.

Pantalla de opciones de Gutenberg

 
Aparecerá una pantalla en la cual tienes que activar la opción de Campos Personalizados.

Activación opcion campos personalizados

 
Luego agrega un campo personalizado llamado “Subtitulo” y coloca el subtítulo que deseas que se muestre para esa entrada

Agregar nuevo campo subtítulo

Ten en cuenta que los pasos para crear el campo personalizado sólo serán necesarios que los realices una sola vez, la próxima entrada o página ya tendrá activo y creado el campo personalizado por lo que sólo debes seleccionarlo.
En nuestro ejemplo el campo se llama “Subtitulo”, con S mayúscula y sin tilde, ten en cuenta esto ya que lo usaremos en el código posteriormente.

 

Código para mostrar subtítulos en WordPress

El siguiente código se basa en el campo personalizado “Subtitulo” agregado anteriormente para mostrar el subtítulo en el detalle de páginas o entradas de WordPress.

En el código anterior:

  • Usamos el hook wp_print_footer_scripts el cual hace referencia a una función anónima
  • Obtenemos el subtítulo en la variables $subtitulo
  • Validamos si existe subtítulo y lo insertamos a través de javascript
  • Lo insertamos bajo el título principal que tiene la clase entry-title

 

Código CSS

El código anterior inserta el subtítulo con la clase dcms-subtitle, entonces puedes dar estilos al subtítulo usando como base esa clase.

.dcms-subtitle {
  font-size: 30px;
  margin-top: 30px;
  display: block;
}

.dcms-subtitle:after,
.dcms-subtitle:before {
  content: "—";
  margin: auto 10px;
}

 

Conclusión

Como has podido comprobar, puedes insertar un subtítulo a páginas o entradas en WordPress usando simplemente un campo personalizado y código.

 
¿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

  • Subtítulo desde título de la entrada en WordPressSubtítulo desde título de la entrada en WordPress
  • Mostrar menú diferente para usuarios registrados¿Cómo mostrar un menú diferente para usuarios registrados?
  • Formulario de contacto sin pluginsFormulario de contacto sin plugins en WordPress
  • Campos personalizados en productos de WooCommerceCampos personalizados en productos de WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Jesús

    7 enero, 2021

    Magnifico artículo, he seguido los pasos y funciona genial, pero me gustaría saber si se puede modificar el snippet para que salga también en la pagina de archivo del blog y no solo en las entradas individuales.

    Muchas gracias

    • Jhon Marreros Guzmán

      7 enero, 2021

      Hola, si muestras el listado a través de una página si que debería funcionarte. Sin embargo para mostrar directamente una página de archivo, como categoría no será posible porque no tienes interfaz para poner el campo personalizado. Saludos.

  2. Guillermo Meijón Couselo

    18 agosto, 2021

    Hola Jhon:
    Dos cuestiones por si me las puedes resolver.
    1. Al pegar el código en functions.php, el subtítulo me aparece en el lugar correcto, pero el problema es que el mismo subtítulo me aparece en todos los posts de la sección de posts relacionados (que en el tema Hueman lleva el título de “También te podría gustar”).
    2. No consigo que me aparezca el Subtítulo en la Homepage.
    Independientemente de tu respuesta, gracias por tu saber y esfuerzo en compartir.

    • Jhon Marreros Guzmán

      19 agosto, 2021

      Hola, en el código para que sólo aparezca en donde deseas especifica más la función: insertAfter(‘.entry-title’)
      sólo esta con la clase .entry-title, pero podrías especificar más.
      Con respecto a que no aparece en el home es por que tienes esta condición: if (is_singular()), sería agregar una condición de que estas también en el inicio o quitar directamente la condición.

      Saludos.

      • Guillermo Meijón Couselo

        20 agosto, 2021

        Gracias Jhon, intentaré hacerlo.

  3. heenle

    18 noviembre, 2021

    Hice todo pero no me aparece visible.

    • Jhon Marreros Guzmán

      19 noviembre, 2021

      Hola, es un cambio Javascript, prueba refrescar tu navegador o prueba en incógnito, si aún no aparece verifica si en la consola del Inspector de código se generan errores. Saludos.

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

Modificar el formulario de comentarios en WordPress

Excluir entradas en el inicio de WordPress

Depurar código PHP en WordPress

Agregar el slug blog en las urls de las entradas de WordPress

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