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

Cómo crear una listas de enlaces relacionados en WordPress con un shortcode

Ernesto BarrachinaApariencia Web12 Comentarios

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 😎

Lista de enlaces destacados personalizada

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:

Cómo verás el shortcode desde el editor visual de WordPress

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.

En cuanto abras y cierres el shortcode arriba y abajo de la lista, lo tendrás implementado

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 😉

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

Me dedico al diseño web Valencia y tengo pasión por las herramientas de diseño gráfico, así como por compartir tips de diseño web en forma de consejos y tutoriales "para todos los públicos".

¿Necesitas un Diseño Web Valencia?

12 Comentarios en “Cómo crear listas de enlaces relacionados mediante un shortcode de WordPress”

  1. Buenas Ernesto. Vuelvo a preguntarte jejej. El texto en la cajita de enlaces no me queda centrado, lo puedes ver al inicio de este artículo por ejemplo [https://]opinatron.com/invertir-fondos-indexados/

    Queda mucho hueco vacio entre el titulo de la caja y el texto. Como se cambiaría eso? Esto del código parece fácil pero cuando no sabes es una locura.

    Muchas gracias!

    1. Hola Marc!!!

      Algunos temas generan un párrafo vacío antes y después del contendido de los shortcodes (tu lista de enlaces relacionados).

      Utiliza esta regla y asegúrate de vaciar la caché:

      .conten-links p:first-child, .conten-links p:last-child{
      line-height:0px;
      margin-bottom:0px
      }

      Esto hará que tanto el primer párrafo como el último tengan una altura y un margen inferior de 0px.

      Por cierto, en tu página «sobre mí» hay unos checks en el menú que creo que no los quieres ahí. Asegúrate de indicarle a las listas que personalices que solo añada el check dentro del «contenido» .entry-content

      Así:

      .page-id-2109 .entry-content ul li::before {...}
      

      No obstante, si utilizas Elementor PRO, todo esto podrías resolverlo con él.

      Espero que te funcione… Y cambia el color por tus colores naranja o verde 😉

      Buen finde!!!

      1. Ernesto, mil gracias. No hay pregunta que no sepas responder, te lo agradezco mucho!

        He conseguido quitar el espacio con tu código, que he metido entre el código del css para la cajita, imagino que iba ahí. También te he hecho caso y lo he puesto naranja jeje 🙂

        Por ser tan majo, y porque no hay tantos como tú como debería, te he puesto un enlace en uno de mis artículos top, creo que te gustará 🙂

        Esta aquí [https://]opinatron.com/trabajos-desde-casa-ganar-dinero/, justo después de la primera cajita, así ves como me ha quedado 😀

        Respecto a los ticks esos verdes, los había visto sí, ni idea de cómo quitarlos jeje. He preguntado a uno que me ha estado haciendo algunos cambios y a ver si lo arregla, supongo que sí. Justo acabo de cambiar de plantilla y pasarme a Elementor Pro, y los ticks verdes esos son algo que antes tenía en todas las listas de la web, y ahora solo se han quedado en el Sobre Mi, no sé muy bien por qué.

        Un abrazo!

        1. Jaja, gracias a ti Marc!!!

          Mucho mejor con tus colores. Ahora solo te falta colorear el icono:

          .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; <- Este es el color azul
          }
          

          En cuanto al enlace... MUCHAS GRACIAS, tú si que eres un tío majo!!!

          En referencia a los checks, los estás cargando desde esta regla solo para esa página:

          .page-id-2109 ul li::before {
              content: "\2713";
              color: green;
              font-weight: bold;
              padding-right: 10px;
          }
          

          Yo creo que puedes "quitarlo entero" porque solo afectará a las listas de esa página.

          Y en cuanto a lo de la fecha, lo sé. Tengo pendiente actualizar la web, pero no encuentro el momento. Ya sabes, "en casa del herrero cuchillo de palo".

          1. Gracias! Ya he cambiado el iconito, aunque no me aparece porque lo tengo puesto en list style none.

            Los checks ya están fuera también 🙂

            He visto que ya has puesto el 2021 jeje

            Un abrazo!!

  2. Impresionante Ernesto, acabo de descubrir tu web y me encanta como está todo explicado. He podido hacer bien todo lo que comentas, solo hay una cosa que no me sale, imagino que hace falta añadir algo más a la lista de style.

    Al convertir el interior de la caja en una lista, me salen los puntitos tipicos de las listas antes de cada enlace, cosa que tu has quitado en tus cajas. Como puedo hacerlo para que al llamar a este shortcode no haya icono de lista.

    Y, ya que estoy, otra pregunta. Con que linea del código se cambia el color de los enlaces? Por ejemplo, si quisiera ponerlos rojos.

    Muchas gracias!!!

    1. Buenas tardes Marc,

      muchas gracias por el piropo pero eso se lo dirás a todos, jejeje.

      Para quitar los puntos hay que aplicar a «ul» la propiedad «list-style:none;» (lo tienes en el código que hay en el post).

      El color de «esos enlaces» se aplica desde este fragmento, que también está en el código CSS del artículo:

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

      aunque según la plantilla que uses, puede que debas obligar un poco más la propiedad color añadiendo !important (color: #559FF0 !important;).

      Espero haberte sido de ayuda, y volver a verte por aquí.

      1. No no, a todos no se lo digo jeje. Pero realmente tu artículo me ha ayudado perfectamente.

        Vale, lo del list style none no me lo cogía, y le he puesto el !important al lado y ahora ya me lo coge.

        Lo del color perfecto, gracias!

        Lo que también me ha pasado es que le puse el código CSS al css.style del child theme, y no me lo cogía. Lo tuve que meter también en la caja para modificar CSS de las opciones de mi theme (divi), y ya me lo cogió, no se muy bien por qué, pero bueno, arreglado.

        Un abrazo!

        1. 😀 Me alegro de que te haya funcionado todo tan bien.

          Lo de que no coge el estilo desde el tema hijo será porque tendrás un plugin de caché que no has vaciado, y estarás viendo una versión de la web antigua.

          1. Ah, pues podría ser, sí. Mira que bonita me ha quedado la web, te lo agradezco!

            https:// ingresosextraonline .com/

Deja una respuesta

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) Finalidad de los datos: Gestionar los comentarios que realizas en este blog. Legitimación: Consentimiento del interesado. Destinatarios: No se comunican los datos a nadie más. Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado. Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (mi proveedor de hosting) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.

Tu comentario quedará pendiente de moderación. Vuelve en dos o tres días para ver la respuesta y tu comentario publicados.

Muchas gracias por comentar ☺