• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Agregar subtítulos en WordPress
Anuncio banner webservi

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

  • Ocultar el título en la página de inicio de WordPressOcultar el título en la página de inicio de WordPress
  • Carga de Javascript y CSS al footer en WordPressMover la carga de Javascript y CSS al footer en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPressAñadir código de Google Tag Manager sin plugins en WordPress
  • Estilos de editor en GutenbergEstilos de editor en Gutenberg
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 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.

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

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Métodos alternos para desactivar plugins en WordPress

Deshabilitar Gutenberg en WordPress selectivamente

Agregar Microdatos en campos de productos en WooCommerce

Usar el Media Uploader de WordPress en tus plugins y temas

Recientes

  • Exportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamente
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad