En la era del scroll infinito, captar la atención del usuario en los primeros segundos es vital. Tras enseñarte en nuestra academia como crear un plugin de 0, hoy queremos dar un paso más allá. Te regalamos el “Nascor Collaboration UI”, un plugin de interfaz interactiva para WordPress diseñado bajo la premisa de la sinergia: estética de élite con una ingeniería de código radicalmente optimizada.
¿Para qué sirve el Nascor Collaboration UI?
Este plugin permite insertar, mediante el shortcode [nascor _ collaboration], una caja de herramientas sociales y contenido dinámico. Es ideal para marcas que buscan centralizar sus puntos de contacto (LinkedIn, TikTok, YouTube) sin sacrificar la velocidad de carga. Utiliza tecnología AVIF para las imágenes y un sistema de animaciones inteligentes que se pausan cuando no están a la vista del usuario, ahorrando recursos del navegador.
LinkedIn
Pinterest
Guía de personalización técnica
A diferencia de otros complementos genéricos, este plugin de interfaz interactiva para WordPress es totalmente maleable. Aquí te explicamos cómo adaptarlo a tu identidad visual:
1. Modificar Colores y Diseño
Dentro del archivo del plugin, busca la etiqueta <style>. Hemos definido un degradado corporativo en la clase .nascor-ui-wrapper. Puedes cambiar los códigos hexadecimales (#162454 y #0d1236) por los colores de tu marca para mantener la coherencia visual.
2. Actualizar URLs y Enlaces
Para que el plugin redirija a tus propias redes sociales, desplázate hasta la sección del HTML. Verás etiquetas de enlace <a> con direcciones de Nascor (como nuestro canal de YouTube o LinkedIn). Simplemente reemplaza esos enlaces por los tuyos para que la red telaraña de información apunte a tu ecosistema.
3. Cambio de Media (Imágenes y Videos)
El código incluye referencias a archivos multimedia optimizados en nuestros servidores. Para un rendimiento óptimo, te recomendamos subir tus propios archivos en formato AVIF y reemplazar las URLs en el src y srcset del código.
Cómo instalar y activar el plugin
Sigue estos pasos para integrar esta solución en tu sitio hoy mismo:
- Descarga el archivo: Obtén el archivo
.zipal final de este post. - Sube a WordPress: Ve a Plugins > Añadir nuevo > Subir plugin.
- Activa y usa: Una vez activo, coloca el código
[ nascor _collaboration]en cualquier página o entrada donde uses Divi o el editor por bloques.
El siguiente paso en tu estrategia digital
Contar con una herramienta optimizada es el primer paso hacia un negocio sólido. Si necesitas una identidad de marca robusta o un desarrollo a medida que maximice tu ROI, en Nascor Estudio Creativo nos involucramos en cada etapa de tu proyecto para asegurar el éxito.
👇 [BOTÓN DE DESCARGA: Obtener Nascor Collaboration UI v1.6.4] 👇
Código 👇
<?php
/**
* Plugin Name: Nascor Collaboration UI
* Description: Añade el shortcode [nascor_collaboration] para mostrar la interfaz interactiva con media y enlaces optimizados radicalmente (AVIF + srcset). Animaciones en pausa cuando no están visibles.
* Version: 1.6.4
* Author: Nascor.ar
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Salir si se accede directamente
}
function nascor_collaboration_shortcode() {
// Iniciar el buffer de salida
ob_start();
?>
<style>
/* Estilos base del contenedor */
.nascor-ui-wrapper {
background: linear-gradient(180deg, #162454 0%, #0d1236 100%);
border-radius: 24px;
padding: 20px;
color: #ffffff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 600px;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
position: relative;
border: 1px solid rgba(255,255,255,0.1);
box-sizing: border-box;
}
/* Botones interactivos genéricos (reseteo) */
.nascor-interactable {
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: 0;
font: inherit;
transition: transform 0.2s, opacity 0.2s;
text-decoration: none;
}
.nascor-interactable:hover {
transform: scale(1.05);
opacity: 0.9;
}
/* Cabecera */
.nascor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.nascor-brand {
display: flex;
align-items: center;
gap: 15px;
text-align: left;
}
/* Animación del Logo Principal */
@keyframes nascor-spin {
100% { transform: rotate(360deg); }
}
.nascor-logo-btn {
width: 50px;
height: 50px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.nascor-spin-img {
width: 100%;
height: auto;
object-fit: cover;
/* La animación de CSS se mantiene, consume muy pocos recursos */
animation: nascor-spin 8s linear infinite;
}
/* Botones de cabecera con texto */
.nascor-header-text-btn {
padding: 5px 15px;
border-radius: 30px;
font-weight: bold;
display: flex;
align-items: center;
gap: 5px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
font-size: 14px;
}
#btn-youtube-header {
background: #ffffff;
color: #000;
}
#btn-linkedin-header {
background: #0A66C2;
color: #ffffff;
}
.nascor-header-controls {
display: flex;
align-items: center;
gap: 10px;
}
.nascor-icon-btn {
width: 40px;
height: 40px;
background: rgba(0,0,0,0.4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.nascor-icon-btn img {
width: 100%;
height: auto;
object-fit: cover;
}
/* Cuadrícula de Contenido */
.nascor-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
position: relative;
}
.nascor-panel {
background: #1e244d;
border-radius: 16px;
aspect-ratio: 3/4;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 15px;
border: 1px solid rgba(255,255,255,0.05);
}
/* Media Backgrounds */
.nascor-bg-media, .nascor-slider-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.nascor-bg-media, .nascor-slide {
object-fit: cover;
}
.nascor-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 0;
}
.nascor-slide.active {
opacity: 1;
z-index: 1;
}
.nascor-media-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
z-index: 1;
}
.nascor-panel-top-label {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0,0,0,0.5);
padding: 4px 8px;
border-radius: 10px;
font-size: 10px;
z-index: 2;
}
/* Elementos Flotantes */
.nascor-floating-btn {
position: absolute;
padding: 10px 20px;
border-radius: 30px;
font-weight: bold;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
z-index: 10;
}
#btn-pinterest {
right: -20px;
top: 0.3%;
background: #E60023;
color: #ffffff;
}
/* Pie de página */
.nascor-footer {
margin-top: 20px;
background: #0b102b;
border-radius: 0 0 24px 24px;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(255,255,255,0.1);
}
.nascor-social-group {
display: flex;
align-items: center;
gap: 10px;
}
@media (max-width: 550px) {
.nascor-header {
flex-direction: column;
gap: 15px;
}
.nascor-brand, .nascor-header-controls {
width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}
.nascor-header .nascor-logo-btn {
width: 40px;
height: 40px;
}
.nascor-header .nascor-header-text-btn {
font-size: 12px;
padding: 6px 12px;
}
.nascor-header .nascor-icon-btn {
width: 35px;
height: 35px;
}
}
</style>
<div class="nascor-ui-wrapper" id="nascor-main-container">
<header class="nascor-header">
<div class="nascor-brand">
<div class="nascor-logo-btn" id="nascor-main-logo">
<img decoding="async"
src="https://nascor.ar/wp-content/uploads/2025/09/nascor-vertical-1-e1757731281748-1.avif"
srcset="https://nascor.ar/wp-content/uploads/2025/09/nascor-vertical-1-e1757731281748-1-50w.jpg 50w, https://nascor.ar/wp-content/uploads/2025/09/nascor-vertical-1-e1757731281748-1-100w.jpg 100w"
sizes="50px" width="50" height="50"
class="nascor-spin-img" alt="Nascor Logo" fetchpriority="high">
</div>
<a href="https://www.linkedin.com/in/nascor-estudio-creativo/" target="_blank" class="nascor-interactable nascor-header-text-btn" id="btn-linkedin-header">
<img decoding="async"
src="https://nascor.ar/wp-content/uploads/2026/04/linkedin.avif"
sizes="16px" width="16" height="16" alt="LinkedIn" style="object-fit: contain;"> LinkedIn
</a>
</div>
<div class="nascor-header-controls">
<a href="https://www.youtube.com/@NASCOR_AR" target="_blank" class="nascor-interactable nascor-header-text-btn" id="btn-youtube-header">
<span style="color: red; font-size: 18px;">▶</span> YouTube
</a>
<a href="https://www.tiktok.com/@nascor.ar" target="_blank" class="nascor-interactable nascor-icon-btn" id="btn-tiktok">
<img decoding="async"
src="https://nascor.ar/wp-content/uploads/2026/04/tiktok.avif"
srcset="https://nascor.ar/wp-content/uploads/2026/04/tiktok-40w.avif 40w, https://nascor.ar/wp-content/uploads/2026/04/tiktok-80w.avif 80w"
sizes="40px" width="40" height="40" alt="TikTok">
</a>
<a href="https://www.instagram.com/nascor.ar/" target="_blank" class="nascor-interactable nascor-icon-btn" id="btn-instagram">
<img decoding="async"
src="https://nascor.ar/wp-content/uploads/2026/04/instagram.avif"
srcset="https://nascor.ar/wp-content/uploads/2026/04/instagram-40w.avif 40w, https://nascor.ar/wp-content/uploads/2026/04/instagram-80w.avif 80w"
sizes="40px" width="40" height="40" alt="Instagram">
</a>
</div>
</header>
<div class="nascor-grid">
<div class="nascor-panel" id="panel-presenter-a" style="padding: 0;">
<img src="https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-diseno-grafico.avif"
srcset="https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-diseno-grafico-400x455.avif 400w, https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-diseno-grafico-510x382.avif 510w"
sizes="(max-width: 600px) 100vw, 50vw"
width="400" height="533"
class="nascor-bg-media" alt="Diseño Gráfico Ariana"
decoding="async" fetchpriority="high">
<div class="nascor-media-overlay"></div>
<div class="nascor-panel-top-label">Identidad Visual</div>
</div>
<div class="nascor-panel" id="panel-presenter-b" style="padding: 0;">
<video class="nascor-bg-media" width="400" height="533" muted loop playsinline preload="none" style="pointer-events: none;">
<source src="https://nascor.ar/wp-content/uploads/2026/03/video-nascor-1.mp4" type="video/mp4">
</video>
<div class="nascor-media-overlay"></div>
<div class="nascor-panel-top-label">Redes Sociales</div>
</div>
<div class="nascor-panel" id="panel-network-feed" style="padding: 0;">
<video class="nascor-bg-media" width="400" height="533" muted loop playsinline preload="none" style="pointer-events: none;">
<source src="https://nascor.ar/wp-content/uploads/2026/03/VIDEO-NASCOR-2.mp4" type="video/mp4">
</video>
<div class="nascor-media-overlay"></div>
<div class="nascor-panel-top-label">Videos Promocionales</div>
</div>
<div style="position: relative;">
<div class="nascor-panel" id="panel-data-center" style="width: 100%; padding: 0;">
<div class="nascor-slider-container" id="nascor-gallery">
<img src="https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-ilustraciones-3.avif"
srcset="https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-ilustraciones-3-250x300.avif 250w, https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-ilustraciones-3.avif 500w"
sizes="(max-width: 600px) 100vw, 50vw" width="400" height="533"
class="nascor-slide active" alt="Ilustración Ariana 3" loading="lazy" decoding="async">
<img src="https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-ilustraciones-2.avif"
srcset="https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-ilustraciones-2-250x300.avif 250w, https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-ilustraciones-2.avif 500w"
sizes="(max-width: 600px) 100vw, 50vw" width="400" height="533"
class="nascor-slide" alt="Ilustración Ariana 2" loading="lazy" decoding="async">
<img src="https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-ilustraciones-4.avif"
srcset="https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-ilustraciones-4-250x300.avif 250w, https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-ilustraciones-4.avif 500w"
sizes="(max-width: 600px) 100vw, 50vw" width="400" height="533"
class="nascor-slide" alt="Ilustración Ariana 4" loading="lazy" decoding="async">
<img src="https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-ilustraciones.avif"
srcset="https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-ilustraciones-250x300.avif 250w, https://nascor.ar/wp-content/uploads/2026/04/ariana-huggins-ilustraciones.avif 500w"
sizes="(max-width: 600px) 100vw, 50vw" width="400" height="533"
class="nascor-slide" alt="Ilustración Ariana 1" loading="lazy" decoding="async">
</div>
<div class="nascor-media-overlay"></div>
<div class="nascor-panel-top-label">Arte</div>
</div>
<a href="https://ar.pinterest.com/nascor_ar/" target="_blank" class="nascor-interactable nascor-floating-btn" id="btn-pinterest">
<img src="https://nascor.ar/wp-content/uploads/2026/04/pinterest.avif"
sizes="20px" width="20" height="20" alt="Pinterest" style="object-fit: contain;" loading="lazy" decoding="async"> Pinterest
</a>
</div>
</div>
<footer class="nascor-footer">
<div class="nascor-social-group">
<a href="https://x.com/Nascor_Ar" target="_blank" class="nascor-interactable nascor-icon-btn" id="btn-twitter">
<img src="https://nascor.ar/wp-content/uploads/2026/03/twitter.avif"
srcset="https://nascor.ar/wp-content/uploads/2026/03/twitter-40w.avif 40w, https://nascor.ar/wp-content/uploads/2026/03/twitter-80w.avif 80w"
sizes="40px" width="40" height="40" alt="Twitter" loading="lazy" decoding="async">
</a>
<a href="https://bsky.app/profile/nascor.bsky.social" target="_blank" class="nascor-interactable nascor-icon-btn" id="btn-bluesky">
<img src="https://nascor.ar/wp-content/uploads/2026/04/bluesky.avif"
sizes="40px" width="40" height="40" alt="Bluesky" loading="lazy" decoding="async">
</a>
</div>
<a href="https://www.reddit.com/user/HugeFriendship7971/" target="_blank" class="nascor-interactable nascor-icon-btn" id="btn-reddit">
<img src="https://nascor.ar/wp-content/uploads/2026/04/Reddit.avif"
sizes="40px" width="40" height="40" alt="Reddit" loading="lazy" decoding="async">
</a>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 1. Control de Videos con IntersectionObserver
const videos = document.querySelectorAll('video.nascor-bg-media');
if ('IntersectionObserver' in window) {
const videoObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
// Si el video entra a la pantalla, se reproduce. Si sale, se pausa.
if (entry.isIntersecting) {
entry.target.play().catch(e => console.log('El navegador bloqueó el autoplay', e));
} else {
entry.target.pause();
}
});
}, { threshold: 0.1 }); // Se activa cuando al menos el 10% del video es visible
videos.forEach(video => {
videoObserver.observe(video);
});
} else {
// Fallback para navegadores hiper antiguos: reproducir directo
videos.forEach(video => { video.play(); });
}
// 2. Control de Carrusel con IntersectionObserver
const slides = document.querySelectorAll('#nascor-gallery .nascor-slide');
const galleryContainer = document.getElementById('nascor-gallery');
if (slides.length > 0) {
let currentSlide = 0;
let slideInterval = null;
const startCarousel = () => {
if (!slideInterval) {
slideInterval = setInterval(() => {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
}, 3500);
}
};
const stopCarousel = () => {
if (slideInterval) {
clearInterval(slideInterval);
slideInterval = null;
}
};
if ('IntersectionObserver' in window) {
const galleryObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
// Inicia el intervalo solo si el carrusel se está viendo
if (entry.isIntersecting) {
startCarousel();
} else {
stopCarousel();
}
});
}, { threshold: 0.1 });
galleryObserver.observe(galleryContainer);
} else {
// Fallback para navegadores antiguos
startCarousel();
}
}
});
</script>
<?php
return ob_get_clean();
}
add_shortcode( 'nascor_collaboration', 'nascor_collaboration_shortcode' );
