Cómo crear listas de enlaces relacionados mediante un shortcode de WordPress

A colación del post anterior en el que te enseñaba a cómo trabajar con cajas en html personalizadas con CSS para destacar textos, me ha venido a la mente otra cosa interesante que puedes necesitar:

Crear una lista de enlaces relacionados con un «shortcode» y sin plugins 🙂

Así que, si no has leído el post mencionado ya estás tardando. Porque algunas de las cosas que daré por sabidas en este post están explicadas en él.

Te lo explicaría de nuevo, pero infringiría alguna de las normas de Google por el contenido duplicado o la canibalización del mismo. Ya sabes!!!

Bueno, si aún no sabes de qué trata el artículo, va de aprender a «generar de forma automática» o a «programar» una caja de enlaces de este tipo 😎

Aunque como verás hace poco le hice un restyling, que estoy seguro que también podrás imitar.

Algo que si hacemos de la forma tradicional, en vez de con un shortcode, nos llenaría el editor de WordPress con un código que incordia bastante.

➡ Lo que pretendemos es sustituir este tipo de código tan molesto (e incompleto):

<div style="padding:5px; border:2px solid #e5e5e5;">
  <div style="background:#f5f5f5;">
	<div style="color:white; font-size:20px; font-weight:bold; margin-bottom:15px; background:#559FF0; padding:5px 5px 5px 10px;">Tu título</div>
	  <div style="color: #03cfce; margin-left:0px; padding-bottom:8px;">
		<ul style="list-style:none; margin-left:12px; padding-left:0px;">
		  <li style="margin-bottom:12px;"><a href="la-pagina-que-enlazas">Enlace 1</a></li>
		  <li style="margin-bottom:12px;"><a href="la-pagina-que-enlazas">Enlace 2</a></li>
		</ul>
	  </div>
  </div>
</div>

➡ Por algo mucho más cómodo y fácil de manipular por los seres humanos:

Solo tendrás que crear una lista con los enlaces, y pegar al principio y al final la apertura y cierre del shortcode, respectivamente.

Imagínate si no, tener que pelear con todo ese código molestando entre tu texto 🙁

Así que… ¡manos a la obra! ➡

Qué se necesita para crear una lista de enlaces relacionados con shortcodes WordPress

Para generar una lista de enlaces relacionados de forma «casi» automática necesitas algo importante: poder manipular tus archivos functions.php y style.css.

O sea, que sí o sí, te recomiendo que tengas activado el child theme de tu plantilla WordPress.

Además, lo más cómodo es que puedas acceder a estos archivos del hosting por FTP. De forma que te sea posible hacer copias de seguridad, o acceder rápido a ellos si se rompe algo.

Como siempre, el truco consiste en separar en lo posible la parte de HTML y la de CSS. Y para ello vamos a pasar del estilo en línea a usar selectores CSS de clase (class).

De este modo, además de quitarnos parte de ese código de la vista, tendremos los códigos disponibles para cualquier URL de la web, y lo implementaremos a través de un shortcode con parámetros.

Si no entiendes muy bien de qué estoy hablando, no te preocupes porque te lo dejo preparado para que hagas «copy-paste». Solo tienes que seguir las instrucciones 😀

Configuración del shortcode para las listas de enlaces destacados

La técnica consiste en escribir solo una vez el código HTML y CSS, para que cuando lo necesitemos, lo podamos llamar desde un shortcode;  que será lo único «raro» que tendremos que meter en el texto.

Para conseguir esta magia empezaremos asignando clases al conjunto de etiquetas HTML que forman la caja de enlaces.

<div style="padding:5px; border:2px solid #e5e5e5;">
  <div style="background:#f5f5f5;">
	<div style="color:white; font-size:20px; font-weight:bold; margin-bottom:15px; background:#559FF0; padding:5px 5px 5px 10px;">Tu título</div>
	  <div style="color: #03cfce; margin-left:0px; padding-bottom:8px;">
		<ul style="list-style:none; margin-left:12px; padding-left:0px;">
		  <li style="margin-bottom:12px;"><a href="la-pagina-que-enlazas">Enlace 1</a></li>
		  <li style="margin-bottom:12px;"><a href="la-pagina-que-enlazas">Enlace 2</a></li>
		</ul>
	  </div>
  </div>
</div>

Por lo que el código inicial nos quedaría más simplificado:

<div class="conten-links">
  <div class="cont-fondo">
   <div class="cont-titulito">Tu título</div>
    <div class="cont-list-link">
     <ul>
      <li><a href="la-pagina-que-enlazas">Enlace 1</a></li>
      <li><a href="la-pagina-que-enlazas">Enlace 2</a></li>
     </ul>
    </div>
  </div>
</div>

Aún así, nos sobra código, ya que el título de la caja, la lista y los enlaces los añadiremos desde el editor de WordPress; como hacemos habitualmente, quedando un código todavía más simple.

<div class="conten-links">
  <div class="cont-fondo">
   <div class="cont-titulito">/* Aquí va el título que pongas */</div>
    <div class="cont-list-link">
/* Aquí va tu lista de enlaces */
    </div>
  </div>
</div>

El código que pegamos en el archivo functions.php

Es el momento de crear una función para el shortcode, «en el archivo functions.php» del tema hijo, e introducir en ella todo este HTML que tanto nos molesta.

function myinteresa($atts, $content = null) {

extract(shortcode_atts(array(
    "titulo" => ''
  ), $atts));
  
 return '
<div class="conten-links">
 <div class="cont-fondo">
  <div class="cont-titulito">
   '.$titulo.'
  </div>
  <div class="cont-list-link">
  '.$content.'
  </div>
 </div>
</div>
';}

add_shortcode("interes", "myinteresa");

Si observas, entra en juego una cosa que se llama variable ($titulo y $content), que corresponden a los elementos que podrás personalizar. Pero no te asustes, que solo tendrás que poner un nombre para la caja y crear la lista de enlaces. ¡Nada más!

Ahora tocan las reglas de estilo CSS, con las que estamos más familiarizados.

El código que pegamos en el archivo style.css

Pega este código «en el archivo style.css» del tema hijo, que es lo que le dará aspecto a la caja de la lista de enlaces y a sus elementos.

.conten-links{
padding: 6px;
border: 2px solid #e5e5e5;
margin-bottom: 27px;
}

.cont-fondo{
background: #f5f5f5;	
}

.cont-titulito{
color: white;
font-size: 18px;
line-height: 26px;
font-weight: bold;
margin-bottom: 15px;
background: #559FF0;
padding: 5px 5px 5px 10px; 
}
.cont-list-link{
color: #03cfce;
margin-left: 0px;
padding-bottom: 8px;	
}

.cont-list-link ul{
list-style: none;
margin-left: 12px;
padding-left: 0px;
margin-bottom: 5px;	
}

.cont-list-link ul li{
line-height: 24px;
margin-bottom: 6px;
}

.cont-list-link ul li a{
color: #559FF0;
text-decoration: none;	
}

.cont-list-link ul li a:hover{
color: #f98200;
}

.cont-list-link ul li:before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f140";
font-size: 18px;
margin-right: 6px;
color: #559FF0;
}

➡ ¡En este momento, hemos superado lo difícil!

Si recargas tu web y todo sigue igual, es que lo has hecho bien 😎

➡ Si no, asegúrate de que has copiado bien el código para el archivo functions.php.

Ya tienes lista la configuración del shortcode, y solo te queda llamarlo para que se muestre tu lista de enlaces relacionados allá donde quieras 🙂

Implementación de la lista de enlaces desde un shortcode

Esta parte es la más fácil, pero aún así voy a dividirla en tres apartados. Uno en el que crearemos un enlace dentro de una lista; ya que el estilo solo se aplicará si el HTML reúne estas condiciones, otro en la que implementaremos el shortcode, y un tercero en el que cambiaremos el título a mostrar.

Primera parte: creación de la lista de enlaces

1. El primer paso es escribir las palabras que harán de anchor text desde tu editor visual. Igual que siempre cuando creas un enlace.
2. Luego selecciona el texto e indica a qué página va enlazado. Vamos, lo mismo de siempre.
3. El siguiente paso es convertirlo en una lista. Cosa que también has hecho miles de veces desde tu editor de WordPress.

➡ Evidentemente tendrás algo así:

Puedes añadir tantos elementos de lista como quieras. Yo solo pondré uno para que te resulte más sencillo de visualizar.

Segunda parte: inserción del shortcode

En mi caso, el shortcode lo llamo con la palabra interes (sin tilde) entre corchetes [ ]. Tú puedes llamarlo como quieras, siempre que lo indiques en esta parte de la función PHP.

add_shortcode("interes", "myinteresa");

➡ Pega al principio y al final de la lista de enlaces la «apertura y cierre del shortcode».

NOTA: Te dejo una imagen para que no se ejecute mi shortcode.

Tercera parte: cambia el título por uno relacionado con los enlaces

Para darle sentido semántico a los enlaces, cambia el título por uno relacionado, y tendrás tu caja con una lista de enlaces relacionados o destacados similar a esta, pero con otros colores. recuerda que con el tiempo la he rediseñado:

A partir de ahora, cada vez que repitas este proceso en cualquier página o post de tu web, tendrás una flamante caja de enlaces.

Si estás pensando en utilizar este truco para insertar listas de enlaces personalizados en tu web, sería de agradecer que dejaras un comentario y compartieras en las redes 😉