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.

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«.

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.

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:

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.