Si tienes una marca, un proyecto o un blog, en algún momento has necesitado reunir todos tus enlaces importantes en un solo sitio. Pues bien, crear una página de enlaces en WordPress es más sencillo de lo que parece, y el resultado es mucho mejor que depender de servicios externos: tu dominio, tu diseño y tus datos, sin cuotas mensuales ni limitaciones de terceros.
En esta guía te explico exactamente cómo hacerlo, paso a paso y con todo el código que necesitas.
¿Por qué crear una página de enlaces en WordPress y no usar un servicio externo?
La respuesta corta: porque lo que construyes en tu dominio es tuyo. Los servicios externos como Linktree están bien para empezar, pero tienen limitaciones que a la larga pesan. Por un lado, el tráfico va a su dominio, no al tuyo, lo cual es un regalo de SEO que estás haciendo gratis. Por otro, el diseño está limitado a lo que ellos te permiten y, si quieres funciones avanzadas, toca pagar.
Para que lo veas de un vistazo, aquí tienes una comparativa directa:
| Servicio externo | Página de enlaces en WordPress | |
|---|---|---|
| Dominio | El suyo | El tuyo |
| SEO | Nulo o muy limitado | Bajo tu control |
| Diseño | Limitado al plan contratado | Totalmente personalizable |
| Coste | Gratis con límites / de pago | Sin coste adicional |
| Analítica | Datos limitados | Google Analytics completo |
| Velocidad | Depende de ellos | Bajo tu control |
| Independencia | Depende del servicio | Total |
Si además gestionas una marca personal, esta página cobra todavía más valor. Plataformas como Instagram, X (antes Twitter) o TikTok solo permiten un único enlace en la descripción del perfil, así que concentrar todos tus recursos —tu web, tu podcast, tu galería, tus formularios— en una sola URL que puedas actualizar cuando quieras es una ventaja enorme. En lugar de cambiar el enlace cada vez que publicas algo nuevo, simplemente actualizas la página y listo: el enlace de tu bio siempre apunta al sitio correcto.
Como ves, la diferencia es notable. Al construir tu propia solución en WordPress consigues control total: diseño a tu medida, carga más rápida y todos los datos de analítica en tu tejado. Si quieres entender mejor cómo funciona el sistema de plantillas antes de continuar, esta guía para crear un tema WordPress desde cero te va a venir muy bien.
Qué necesitas para crear una página de enlaces en WordPress
Antes de ponernos con el código, es útil tener clara la estructura visual de lo que vamos a construir. La página se compone de:
- Un contenedor central con bordes redondeados y sombra suave.
- Una cabecera de perfil con avatar circular, nombre y descripción breve.
- Una lista de botones de enlace principales, cada uno con icono, título y subtítulo.
- Una sección de redes sociales en la parte inferior.
- Un pie de página con el año dinámico generado por PHP.
Sencillo visualmente, limpio en el código y muy efectivo en la práctica.
Paso 1: Crear el archivo de plantilla — el primer paso para tu página de enlaces
Dónde y cómo crear el archivo
El primer paso es crear el archivo PHP que WordPress reconocerá como plantilla de página. Entra en tu servidor mediante FTP (por ejemplo con FileZilla) o desde el gestor de archivos de tu hosting, y navega hasta la carpeta de tu tema activo:
/wp-content/themes/tu-tema/page-templates/Crea un archivo nuevo llamado page-links.php y añade al principio este bloque de comentario, que es lo que WordPress usa para identificarlo como plantilla:
<?php
/*
Template Name: Página de enlaces
*/
?>Por qué no usar get_header() ni get_footer()
Con esto ya tienes la plantilla registrada. Ahora, un detalle importante: no llames a get_header() ni a get_footer() en este archivo. Al omitirlos, la plantilla actúa como una página completamente independiente del resto del tema, sin menús de navegación ni barras laterales. Es exactamente lo que necesitamos para que quede limpia y enfocada.
Paso 2: Metadatos y viewport al crear una página de enlaces en WordPress
Como no estás usando el header del tema, necesitas declarar tú mismo los elementos básicos del documento:
<link rel="stylesheet" href="https://tudominio.com/wp-content/themes/tu-tema/style.css" type="text/css" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tu Marca - Enlaces</title>La importancia del viewport en móvil
El viewport es absolutamente fundamental. Esta página va a ser visitada mayoritariamente desde móvil —especialmente si la enlazas desde Instagram o TikTok—, así que sin esta línea el diseño se verá roto en pantallas pequeñas. No lo pases por alto.
Paso 3: El CSS de tu página de enlaces en WordPress
Toda la parte visual se define en un bloque <style> dentro del mismo archivo. Vamos a repasarlo por secciones.
Body y centrado general
body {
background-color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin: 0;
padding: 50px 0 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}El uso de Flexbox es la clave del centrado. Con min-height: 100vh garantizamos que aunque el contenido sea corto, la página ocupe siempre la pantalla completa.
Contenedor principal
.main-container {
background-color: #f7f7f7;
max-width: 350px;
width: 100%;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 20px;
}El max-width: 350px es una decisión deliberada: imita el ancho de una pantalla de móvil, que es el contexto natural de este tipo de páginas. El border-radius suave y la sombra ligera le dan ese aspecto de tarjeta flotante que tan bien funciona.
Avatar circular
.avatar-container {
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
margin: 0 auto 10px auto;
}
.avatar-container img {
width: 100%;
height: 100%;
object-fit: cover;
}La combinación de border-radius: 50% con overflow: hidden es el truco clásico para el avatar redondo. El object-fit: cover garantiza que la imagen nunca se deforme, independientemente de sus proporciones originales.
Tip: Usa siempre una imagen cuadrada para el avatar. Si subes una rectangular, object-fit: cover la recortará desde el centro y puede cortar partes importantes de la foto.
Paso 4: Los botones: Clave al crear una página de enlaces en WordPress
Estructura HTML del botón
Cada botón sigue la misma estructura: icono a la izquierda, texto centrado y un pequeño decorador a la derecha. Esta consistencia hace que la página sea muy fácil de escanear:
<div class="link-item">
<a href="https://tudominio.com/">
<div class="link-left">
<span class="link-icon-main"><!-- SVG del icono --></span>
</div>
<div class="link-center link-text-group">
<span class="link-title">Nombre del enlace</span>
<span class="link-subtitle">Descripción corta</span>
</div>
<span class="link-right">⋮</span>
</a>
</div>CSS del botón y efecto hover
.link-item a {
background-color: #fff;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 18px;
text-decoration: none;
color: #333;
border: 1px solid #eee;
transition: background-color 0.2s ease;
}
.link-item a:hover {
background-color: #fcfcfc;
}La propiedad transition añade una micro-animación suave al pasar el cursor, dando sensación de pulcritud sin resultar exagerado.
Tip para mejorar: Si quieres un efecto más dinámico, prueba a añadir transform: translateX(4px) en el hover. El botón se desplaza ligeramente hacia la derecha y queda muy elegante.
Paso 5: Los iconos SVG al crear una página de enlaces en WordPress
Por qué usar SVG en lugar de librerías externas
En lugar de cargar librerías como Font Awesome —que añaden peso innecesario—, esta plantilla usa SVGs directamente en el HTML. Las ventajas son claras: carga instantánea, sin peticiones HTTP adicionales y control total del tamaño con CSS.
Dónde encontrar los SVGs
Para los iconos de plataformas como YouTube, Instagram, Spotify o TikTok, puedes encontrar sus SVGs oficiales en SVG Repo, una de las mejores referencias gratuitas para esto. La integración es sencilla:
<span class="link-icon-main">
<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<!-- paths del icono -->
</svg>
</span>Tip: Asegúrate de que cada SVG tenga siempre width y height definidos, o al menos un viewBox correcto. Sin eso, el icono puede ocupar más espacio del esperado y romper el layout del botón.
Paso 6: Añadir redes sociales a tu página de enlaces
La parte inferior incluye una segunda sección de botones, más simplificada, pensada para las redes sociales. La estructura es casi idéntica a los botones principales, solo que sin subtítulo:
.social-item a {
background-color: #fff;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 18px;
text-decoration: none;
color: #333;
border: 1px solid #eee;
}Por qué separar enlaces principales de redes sociales
Separar visualmente ambas secciones ayuda al usuario a entender la jerarquía de contenido de un vistazo. Lo más importante arriba, las redes al final. Es una decisión de UX simple pero efectiva que mejora notablemente la experiencia.
Paso 7: El pie de página al crear una página de enlaces en WordPress
Un detalle pequeño que ahorra trabajo: en lugar de escribir el año a mano y tener que actualizarlo cada enero, PHP lo hace solo:
<div class="footer">
© <?php echo date("Y"); ?> Tu Marca
</div>date("Y") devuelve el año actual del servidor de forma automática. Mínimo esfuerzo, cero mantenimiento.
Paso 8: Cómo publicar tu página de enlaces en WordPress
Ya tienes todo el código listo. El último paso para terminar de crear una página de enlaces en WordPress es asignar la plantilla a una página desde el panel de administración:
Proceso de asignación en el panel
- Ve a Páginas → Añadir nueva
- Dale un título, por ejemplo «Links» o «Mis enlaces»
- En el panel lateral derecho, en «Atributos de página», selecciona tu plantilla
- Publica la página
- La URL resultante —algo como
tudominio.com/links— es la que pondrás en tu bio
Dónde enlazarla una vez publicada
Una vez publicada, esta URL es tu nuevo centro de enlaces. Ponla en la bio de Instagram, en la descripción de TikTok, en la firma del email o en cualquier sitio donde necesites concentrar tráfico en un solo destino.
Este sería un ejemplo de como quedaría un diseño final de una página de enlaces, el cual también puedes acceder al enlace final. Puedes revisarlo también en mi portafolio personal.
Tips finales para mejorar tu bio link page en WordPress
Una vez tengas la base funcionando, aquí van algunas ideas para darle una vuelta más:
Personaliza los colores según tu marca. Cambiar el fondo a un tono oscuro con botones semitransparentes, por ejemplo, da un resultado muy premium con muy poco esfuerzo.
Añade una animación de entrada. Con @keyframes y animation-delay escalonado puedes hacer que los botones aparezcan uno a uno al cargar la página. El efecto es muy limpio y sorprende gratamente.
Conecta Google Analytics. Insertar el código de seguimiento directamente en la plantilla te permitirá saber exactamente en qué enlace hace clic la gente y desde dónde llegan.
Crea versiones por idioma. Si tu audiencia es internacional, duplicar la plantilla con los textos en otro idioma es trivial y puede marcar una diferencia importante en alcance.
Conclusión
Como has visto a lo largo de esta guía, crear una página de enlaces en WordPress está al alcance de cualquiera con conocimientos básicos de PHP y CSS. No necesitas plugins, no dependes de terceros y el resultado es completamente tuyo. En una tarde tienes una página funcional, rápida y con el diseño que tú eliges.
Si tienes alguna duda durante el proceso o quieres adaptar la plantilla a un caso específico, déjalo en los comentarios.
