WP-LinkBio

HeyCriss Bio Links — Editorial Link-in-Bio Architecture for WordPress

Sitio Oficial · Características · Arquitectura · Instalación · Bloques & Widgets · API & Hooks

Visión General

HeyCriss Bio Links es un plugin Open Source de nivel estudio para WordPress, diseñado bajo principios de diseño editorial, estilo Bento y minimalismo moderno. Permite crear, gestionar y analizar páginas Link in Bio de alto rendimiento alojadas 100% en tu propia infraestructura de WordPress, sin comisiones mensuales, sin marcas de agua obligatorias y sin depender de servicios SaaS externos.

[!IMPORTANT] Filosofía Cero Paywalls & Cero “AI Slop”: Todas las funciones avanzadas —analíticas locales, fondos de video en alta definición, insignias de verificación, bloques de Iframe/HTML personalizados, formularios, integraciones multimedia y las 6 plantillas de estudio— están 100% desbloqueadas de fábrica.

Características Principales

Módulo	Capacidades Técnicas	Ventaja Arquitectónica
Estudio Reactivo en Tiempo Real	Sincronización instantánea con `MobX` + `React 18/19`. Conmutador rápido entre vista Mobile (375×812) y Desktop/Tablet (880×680).	Edición fluida sin recargas de página ni parpadeos en el mockup interactivo.
Motor Multimedia Nativo (`wp.media`)	Selector integrado con la librería de medios de WordPress para avatares, portadas e imágenes de fondo o videos en bucle (`MP4` / `WebM`).	Persistencia de `attachment_id` + URL directa y control deslizante de opacidad de superposición (`0% – 85%`) para garantizar contraste WCAG AA.
Insignias de Perfil & Etiquetas de Rol	Badges vectoriales SVG personalizables (Verificado, Creador, Oficial, Estrella) con selector de color y Role Pill editorial junto al nombre.	Jerarquía visual limpia y autoridad de marca sin depender de imágenes externas.
Bloques de Iframe & HTML Micro-Widgets	Soporte nativo para insertar `<iframe>` responsivos (Spotify, Mapas, Typeform, Calendly, YouTube) y widgets HTML/CSS/JS aislados.	Sanitización de seguridad en backend con `wp_kses()` y renderizado aislado en `sandbox` para proteger el DOM principal.
Analíticas Locales Autohospedadas	Métricas de vistas, clics por enlace, CTR, ubicaciones, dispositivos y referrers almacenadas directamente en tablas locales de WordPress.	Cumplimiento de privacidad (GDPR-friendly) sin enviar tráfico de tus visitantes a servidores de terceros.
Renderizado Híbrido SSR + Hidratación	Plantilla PHP con fallback semántico instantáneo (`BioLinkTemplate.php`) + hidratación cliente y auto-flush de permalinks.	Cero pantallas en blanco, carga inmediata en conexiones móviles y SEO/OpenGraph completo desde el primer byte.

Sistema de Diseño y Plantillas Editoriales

Todas las plantillas incluidas han sido diseñadas bajo una cuadrícula espacial de 8px, radios armónicos y contrastes verificados (WCAG AA):

Preset ID	Nombre del Tema	Estética Visual	Paleta Base	Tipografía
`nila`	Minimal Studio	Claridad suiza, bordes nítidos y alto contraste sobre blanco cálido	`#FAFAFA` · `#18181B`	`Inter`
`louden`	Dark Obsidian	Modo oscuro profundo con superficies de grafito y acentos puros	`#09090B` · `#27272A`	`Plus Jakarta Sans`
`anel`	Editorial Serif	Inspiración en revistas impresas sobre papel piedra cálido	`#F5F5F0` · `#1C1917`	`Playfair Display`
`botanical`	Botanical Craft	Tonos bosque orgánicos con acentos esmeralda suaves	`#1C2826` · `#ECFDF5`	`DM Sans`
`nordic`	Nordic Slate	Minimalismo escandinavo con grises minerales equilibrados	`#F4F4F6` · `#18181B`	`Inter`
`midnight`	Midnight Pro	Azul noche técnico con tarjetas de alto contraste	`#090D16` · `#F8FAFC`	`Space Grotesk`

Arquitectura del Sistema

flowchart LR
    subgraph WP["WordPress Core (Backend PHP)"]
        CPT["CPT: cms-landingpage<br/>Auto Flush Rewrite Rules"]
        MEDIA["WP Media Library<br/>(wp_enqueue_media)"]
        REST["REST API Namespace<br/>heycriss-bio-links/v1"]
        SSR["SSR Fallback Engine<br/>BioLinkTemplate.php"]
    end

    subgraph ADMIN["React + MobX Admin Studio"]
        STORE["MobX RootStore &<br/>OptionStore"]
        EDITOR["Panel de Edición<br/>Segmented UI + Sliders"]
        PREVIEW["Live Device Preview<br/>Mobile (375px) / Desktop (880px)"]
    end

    subgraph FRONT["Public Bio Link Page"]
        HEAD["BioLinkHead.php<br/>window.heycrissBioData"]
        HYDRATE["React 18/19 Client<br/>Hydration & Blocks"]
        BLOCKS["Links · Video · Iframe ·<br/>HTML Widget · Badges"]
    end

    MEDIA <-->|"attachment_id + URL"| EDITOR
    EDITOR <-->|"Actualización 0ms"| STORE
    STORE -->|"Render reactivo"| PREVIEW
    STORE <-->|"JSON / WP_REST"| REST
    REST --> CPT
    CPT --> SSR
    CPT --> HEAD
    HEAD --> HYDRATE
    SSR --> HYDRATE
    HYDRATE --> BLOCKS

Bloques Interactivos y Embeds

Además de los bloques sociales y multimedia clásicos (Enlaces, YouTube, Spotify, SoundCloud, Vimeo, TikTok, Twitch, Podcast, Calendly, Contacto, Documentos, Donaciones, Galería, Blog, Texto y Deslizadores), HeyCriss Bio Links incorpora dos bloques avanzados:

1. Bloque de Iframe / Embed Personalizado (type: "Iframe")

Permite incrustar cualquier widget interactivo externo pegando directamente la URL o el código ``. - **Altura adaptable:** Control numérico de altura entre `120px` y `1200px` (por defecto `360px`). - **Seguridad en Backend:** Validado mediante `BioLink::sanitizeIframeContent()` con lista blanca de atributos seguros (`src`, `width`, `height`, `frameborder`, `allow`, `allowfullscreen`, `loading`, `sandbox`). </details>

2. Bloque de Micro-Widget HTML / JS (type: "HtmlWidget")

Ideal para insertar calculadoras ligeras, widgets de reservas, tablas de precios o tarjetas HTML/CSS a medida: - **Aislamiento de Estilos:** Se renderiza dentro de un contenedor `

This site is open source. Improve this page.