Subtítulos en WordPress, ¿cómo añadirlos sin plugins?
Subtítulos en WordPress, ¿cómo añadirlos sin plugins?

Una vez más aquí. En esta ocasión vamos una cosa que me ha resultado interesante ya que en algunas instalaciones de WordPress que tengo por ahí, me van a venir bien. Se trata de cómo añadir subtítulos en WordPress, en las entradas y páginas de nuestro CMS. Esto lo haremos de forma simple a través de código y sin necesidad de utilizar plugins. Para hacerlo vamos a utilizar los campos personalizados para añadir el subtítulo y una pequeña función JavaScript que añadiremos al archivo functions.php o al plugin de funciones, que será lo que yo utilice en este ejemplo.

Añadir subtítulos en WordPress

Añadir el campo personalizado

Para añadir un subtítulo vamos a necesitar añadirlo a la base de datos. Esto lo vamos a poder hacer utilizando los campos personalizados de WordPress.

Para empezar vamos asegurarnos de que se están mostrando los campos personalizados. Esto lo vamos a poder hacer desde las opciones de Gutenberg, como se puede ver en la siguiente captura de pantalla.

mostrar campos personalizados en WordPress Gutenberg

Tras hacer clic sobre “Opciones“, aparecerá una pantalla en la que tendremos que activar la opción de “Campos Personalizados“, desde la sección “Paneles avanzados“.

Activar campos personalizados desde Paneles Avanzados. WordPress

Ahora, vamos a cerrar esta ventana y a movernos hacia la parte de abajo de la página. Ahí es dónde vamos a poder añadir un campo personalizado, al cual vamos a llamar «Subtitulo» y le daremos el contenido que cada uno quiera. En este ejemplo el campo se llama «Subtitulo», con S mayúscula y sin tilde. Esto es importante el código que vamos a utilizar un poco más adelante.

Crear un campo personalizado llamado Subtitulo
Campo personalizado creado

Se supone que los pasos para crear el campo personalizado sólo debería ser necesario realizarlo una sola vez, pero mientras estoy probando, estoy teniendo que crear este campo todas las veces. Posiblemente esto sea culpa del theme que estoy utilizando.

El código para mostrar los subtítulos en WordPress

El código que vamos a ver a continuación, se basa en el campo personalizado «Subtitulo» que acabamos de crear. Este va a mostrar el subtítulo justo debajo del título en las páginas o entradas de WordPress.

/*Mostrar subtítulo en artículos*/

add_action( 'wp_print_footer_scripts', function () {
	if (is_singular()):
		$subtitulo = get_post_meta(get_the_ID(), 'Subtitulo', true);
		if ( $subtitulo ):
		?>
		<script>
			(function( $ ) {
				let str = '<h3 class="entreunosyceros-subtitle">';
				str += '<?= $subtitulo ?>';
				str += '</h3>';
				$(str).insertAfter('.entry-title');
			})( jQuery );
		</script>
		<?php
		endif;
	endif;
} );

En este código hay algunas cosas que conviene destacar:

  • Usamos el hook wp_print_footer_scripts, que hace referencia a una función anónima.
  • Vamos a guardar 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. Esto es imprescindible que exista en nuestro theme.
  • El subtítulo se va a insertar como h3, pero esto se puede cambiar por un span o por un h2, según convenga a cada cual.

Código CSS

El código anterior inserta el subtítulo que va a utilizar la clase entreunosyceros-subtitle. Esta clase nos va a venir bien para dar estilos al subtítulo para que se adapte lo mejor posible a nuestra página.

/*Subtítulos para los artículos*/
.entreunosyceros-subtitle {
        font-size: 20px;
        margin-top: 20px;
	margin-bottom:20px;
        display: block;
	background-color:#f0f0f0;
	padding:1%;
	font-weight:bold;
	text-align:center;
	color:#000 !important;         
        border: 1px solid #ccc;
}

.entreunosyceros-subtitle:before {
       content: "►";
       margin: auto 10px;
}

El resultado Final

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

Resultado de añadir subtítulos en WordPress sin plugins

Como espero que se pueda ver, cualquier usuario puede insertar un subtítulo a páginas o entradas en WordPress de manera muy sencilla utilizando un campo personalizado y un poco de código. Todo ello sin necesidad de seguir sobrecargando nuestra instalación de WordPress con más plugins.







¿Qué te ha parecido este post?

¡Haz clic en una estrella para calificarla!

Puntuación media 5 / 5. Recuento de votos: 4

¡No hay votos hasta ahora! Sé el primero en calificar esta publicación.

No te pierdas otros artículos ...

¡Síguenos en las redes sociales!

¡Lamentamos que esta publicación no te haya sido útil!

¡Permítanos mejorar esta publicación!

¿Cuéntanos cómo podemos mejorar esta publicación?

Esta entrada tiene 2 comentarios
  1. Marco

    Me ha venido perfecto. Esto ayuda con el seo?

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.