administracion | La Leonera

La Leonera · Instructivo

Cómo actualizar “Galería Instagram”

Sigue estos pasos en este orden. Al final: reemplazar código → ticket → guardar.

Pasos (1 → 6)

Orden exacto

Entrar al panel

Entra a https://laleoneraantofagasta.cl/wp-admin/ con tu usuario y contraseña.

Ir a “Páginas”

Dirígete a la parte izquierda del panel y pincha en “Páginas”.

Pinchar “Editar con DIVI”

Dentro de la página, entra a “Editar con DIVI”.

Pinchar “Vista wireframe”

Pincha en “Vista wireframe” tal como indica la imagen.

Tuerca de “Galería Instagram”

Pincha en la tuerca de la sección que dice “Galería Instagram”.

Reemplazar código → ticket → guardar

Reemplaza el código, pincha en el ticket y luego en guardar.

Código para pegar

Ctrl+A / Ctrl+C

SOLO EDITAS ESTA PARTE: “Editar publicaciones” (la lista).

data-url (link IG)
Título (texto del link)
Fecha/Hora (texto corto)
Descripción (resumen)

✅ URL limpia: https://www.instagram.com/p/ID/
❌ No usar: ?img_index=1

SOLO EDITA ESTO (copia/pega items aquí)

<div class="lig-source" id="ligSource">
<h3>Editar publicaciones</h3>
<div class="lig-source-item" data-url="https://www.instagram.com/p/ID/">
<a href="https://www.instagram.com/p/ID/" target="_blank" rel="noopener">Título</a>
<div class="d">Vie 08 Mar · 22:00</div>
<div class="p">Descripción breve.</div>
</div>
</div>

CÓDIGO COMPLETO (LISTO PARA COPIAR)

<!-- ========== LA LEONERA • EVENTOS & NOVEDADES (Autoadministrable + embeds IG + funciona aunque Divi sea Divi) ========== -->
<section id="leonera-ig-embeds" class="lig">
<style>
/* Scope */
#leonera-ig-embeds, #leonera-ig-embeds * { box-sizing: border-box; }
/* Tokens */
#leonera-ig-embeds{
--bg:#000;
--ink:#fff;
--muted:#cbd5e1;
--red:#e53945;
--amber:#f2a900;
--glass: rgba(255,255,255,.06);
--stroke: rgba(255,255,255,.14);
--radius:18px;
--wrap: 1280px;
--padX: clamp(16px, 3vw, 28px);
--gap: clamp(14px, 2.2vw, 20px);
}
/* Kill gaps de wrappers WP */
.wp-block-group:has(#leonera-ig-embeds),
.wp-block-html:has(#leonera-ig-embeds),
.wp-block-cover:has(#leonera-ig-embeds),
.wp-block-column:has(#leonera-ig-embeds){
margin:0 !important; padding:0 !important;
}
/* Sección base */
.lig{
background:
radial-gradient(900px 500px at 8% -10%, rgba(229,57,69,.14), transparent 60%),
radial-gradient(900px 500px at 92% 110%, rgba(242,169,0,.12), transparent 60%),
var(--bg);
color: var(--ink);
padding: clamp(26px, 4vw, 46px) var(--padX);
margin:0 !important;
display:grid; grid-template-rows:auto 1fr auto; gap: clamp(12px, 2vw, 18px);
overflow: hidden; /* mejor compat que overflow:clip */
}
.lig-wrap{ max-width: var(--wrap); margin:0 auto; width:100%; position:relative; }
/* Header */
.lig-head{ text-align:center; }
.lig-eyebrow{
display:block; font-size:12px; letter-spacing:.32em;
text-transform:uppercase; color:var(--muted) !important;
}
.lig-h1{
margin:.3rem 0 .6rem;
font-size: clamp(28px, 4vw, 48px);
font-weight:900; text-transform:uppercase;
color:#fff !important;
}
.lig-underline{
width:150px; height:3px; margin:0 auto;
border-radius:3px;
background: linear-gradient(90deg, var(--red), var(--amber));
}
/* Separadores sutiles */
.lig-sep{ position:relative; height:10px; margin: 10px 0; }
.lig-sep::before{
content:""; position:absolute; left:0; right:0; top:50%; height:1px; transform:translateY(-50%);
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.25), rgba(255,255,255,0));
}
.lig-sep::after{
content:""; position:absolute; left:12%; right:12%; top:50%; height:6px; transform:translateY(-50%);
background: linear-gradient(90deg, var(--red), var(--amber));
filter: blur(7px); opacity:.14; border-radius:10px;
}
/* ===== GRID DESKTOP / CARRUSEL MOBILE ===== */
.lig-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--gap);
margin-top: clamp(12px, 2.4vw, 18px);
}
@media (max-width: 900px){
.lig-grid{
display:grid;
grid-auto-flow: column;
grid-auto-columns: 86%;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: var(--gap);
padding-bottom: 6px;
}
.lig-grid::-webkit-scrollbar{ height: 0; }
}
/* Card */
.lig-item{
position:relative; border-radius: var(--radius);
background: var(--glass); border:1px solid var(--stroke);
box-shadow: 0 20px 50px rgba(0,0,0,.5),
inset 0 0 24px rgba(255,255,255,.03);
overflow:hidden;
transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
scroll-snap-align: center;
}
.lig-item:hover{
transform: translateY(-2px);
border-color: rgba(255,255,255,.28);
box-shadow: 0 28px 70px rgba(0,0,0,.6),
inset 0 0 28px rgba(255,255,255,.04);
}
.lig-item::after{
content:""; position:absolute; inset:-2px;
border-radius: calc(var(--radius) + 2px);
background: linear-gradient(90deg, rgba(229,57,69,.35), rgba(242,169,0,.35));
filter: blur(16px); opacity:.18; pointer-events:none;
}
/* Meta */
.lig-meta{
display:flex; justify-content:space-between; align-items:flex-start;
gap:10px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.12);
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.lig-title{
margin:0; font-weight:800; letter-spacing:.02em;
color:#fff; font-size: 13px; text-transform:uppercase;
line-height:1.2;
}
.lig-date{
margin:0; color:#e2e8f0; font-size:12px; opacity:.9;
white-space:nowrap;
}
.lig-desc{
padding: 10px 12px 0;
color:#e2e8f0;
font-size:13px;
line-height:1.45;
opacity:.92;
display:-webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow:hidden;
}
/* Embed area */
.lig-embed{ padding: 10px 10px 12px; }
.lig-embed blockquote.instagram-media{
margin: 0 auto !important;
width: 100% !important;
max-width: 540px !important;
min-width: 280px !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* CTA */
.lig-actions{
display:flex; justify-content:center; gap:12px;
margin-top: clamp(10px,2vw,16px);
}
.lig-btn{
appearance:none; border:none; cursor:pointer;
color:#fff !important; font-weight:800;
letter-spacing:.18em; text-transform:uppercase;
padding:10px 14px; font-size:12px; border-radius:12px;
background: linear-gradient(90deg, var(--red), var(--amber));
box-shadow: 0 10px 30px rgba(229,57,69,.25);
transition: transform .15s ease, filter .15s ease;
text-decoration:none; display:inline-flex;
align-items:center; justify-content:center;
}
.lig-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
/* Flechas carrusel (solo mobile) */
.lig-arrows{ display:none; }
@media (max-width: 900px){
.lig-arrows{
display:flex; gap:12px;
position:absolute; inset:auto 0 50%;
transform: translateY(50%);
justify-content:space-between; pointer-events:none;
padding: 0 var(--padX);
}
.lig-arrow{
pointer-events:auto; width:42px; height:42px;
border-radius:999px; border:1px solid rgba(255,255,255,.22);
background: rgba(0,0,0,.45);
display:grid; place-items:center; cursor:pointer;
box-shadow: 0 10px 30px rgba(0,0,0,.45);
transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}
.lig-arrow:hover{
transform: scale(1.05);
border-color: rgba(255,255,255,.35);
filter: brightness(1.05);
}
.lig-arrow svg{ width:18px; height:18px; fill:#fff; }
}
/* Lista editable fallback (se ve si IG/JS no carga) */
.lig-source{
margin-top: 16px;
border:1px dashed rgba(255,255,255,.18);
border-radius: 14px;
padding: 14px;
background: rgba(255,255,255,.03);
}
.lig-source h3{
margin:0 0 10px; font-size:12px; letter-spacing:.28em;
text-transform:uppercase; color:var(--muted);
}
.lig-source-item{ padding:10px 0; border-top:1px solid rgba(255,255,255,.10); }
.lig-source-item:first-of-type{ border-top:none; }
.lig-source-item a{ color:#fff; font-weight:800; text-decoration: none; }
.lig-source-item .d{ color:#e2e8f0; font-size:12px; opacity:.9; margin-top:4px; }
.lig-source-item .p{ color:#e2e8f0; font-size:13px; opacity:.92; margin-top:6px; white-space:pre-line; }
/* Cuando JS arma el grid, ocultamos la lista editable */
#leonera-ig-embeds[data-ready="1"] .lig-source{ display:none; }
</style>
<div class="lig-wrap">
<div class="lig-sep" aria-hidden="true"></div>
<header class="lig-head">
<span class="lig-eyebrow">La Leonera · Antofagasta</span>
<h2 class="lig-h1">Eventos & Novedades</h2>
<div class="lig-underline"></div>
</header>
<!-- Flechas carrusel (mobile) -->
<div class="lig-arrows" aria-hidden="true">
<button class="lig-arrow" id="ligPrev" type="button" aria-label="Anterior">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
</svg>
</button>
<button class="lig-arrow" id="ligNext" type="button" aria-label="Siguiente">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="m8.59 16.59 1.41 1.41L16 12 10 6 8.59 7.41 13.17 12z"/>
</svg>
</button>
</div>
<!-- Acá se generan las cards automáticamente -->
<div class="lig-grid" id="ligGrid" aria-live="polite"></div>
<!-- ====== ZONA EDITABLE: SOLO EDITAS ESTO (Editar publicaciones) ====== -->
<div class="lig-source" id="ligSource">
<h3>Editar publicaciones</h3>
<div class="lig-source-item" data-url="https://www.instagram.com/p/DVRTsWgEfX5/">
<a href="https://www.instagram.com/p/DVRTsWgEfX5/" target="_blank" rel="noopener">Se juntaron los cantores en La Leonera 🎶🍷</a>
<div class="d">Vie 27 Feb · 22:00</div>
<div class="p">Cuando la guitarra conversa con el acordeón y el pandero marca el pulso, pasan cosas lindas. Noche de canto compartido, tradición y encuentro.</div>
</div>
<div class="lig-source-item" data-url="https://www.instagram.com/p/DU--YPlEfE6/">
<a href="https://www.instagram.com/p/DU--YPlEfE6/" target="_blank" rel="noopener">La Otra Ronda en La Leonera 🌹🎶</a>
<div class="d">Vie 20 Feb · 22:00</div>
<div class="p">Canción popular, sentimiento y letras que se cantan con el pecho abierto. Música para escuchar, brindar y quedarse un rato más.</div>
</div>
<!-- Importante: URL limpia (sin ?img_index=1) -->
<div class="lig-source-item" data-url="https://www.instagram.com/p/DU6u7yzkR6X/">
<a href="https://www.instagram.com/p/DU6u7yzkR6X/" target="_blank" rel="noopener">Lado B</a>
<div class="d">Jue 19 Feb · 22:00</div>
<div class="p">Noche íntima con canciones inéditas (lado B) en versión solo guitarra, más clásicos como “Lobo”, “Rokanrol”, “Flaca”.</div>
</div>
</div>
<!-- ====== FIN ZONA EDITABLE ====== -->
<div class="lig-actions">
<a class="lig-btn" href="https://www.instagram.com/laleoneraantofagasta/" target="_blank" rel="noopener">
Ver en Instagram
</a>
</div>
<div class="lig-sep" aria-hidden="true"></div>
</div>
<script>
(function(){
const root = document.getElementById('leonera-ig-embeds');
const grid = document.getElementById('ligGrid');
const source = document.getElementById('ligSource');
if(!root || !grid || !source) return;
function escapeHtml(str){
return String(str)
.replaceAll("&","&")
.replaceAll("<","<")
.replaceAll(">",">")
.replaceAll('"',""")
.replaceAll("'","'");
}
function normalizeUrl(u){
try{
const url = new URL(String(u || '').trim());
if(!url.hostname.includes('instagram.com')) return '';
url.search = '';
url.hash = '';
if(!url.pathname.endsWith('/')) url.pathname += '/';
return url.toString();
}catch(e){ return ''; }
}
const items = Array.from(source.querySelectorAll('.lig-source-item'))
.map(el => {
const url = normalizeUrl(el.getAttribute('data-url') || el.querySelector('a')?.href);
const title = el.querySelector('a')?.textContent?.trim() || 'Publicación';
const date = el.querySelector('.d')?.textContent?.trim() || 'Publicación reciente';
const desc = el.querySelector('.p')?.textContent?.trim() || '';
return { url, title, date, desc };
})
.filter(x => x.url);
if(!items.length) return;
grid.innerHTML = items.map(item => `
<article class="lig-item">
<div class="lig-meta">
<h3 class="lig-title">${escapeHtml(item.title)}</h3>
<p class="lig-date">${escapeHtml(item.date)}</p> 
</div>
${item.desc ? `<div class="lig-desc">${escapeHtml(item.desc)}</div>` : ``}
<div class="lig-embed">
<blockquote class="instagram-media"
data-instgrm-permalink="${item.url}"
data-instgrm-version="14"
style="width:100%; max-width:540px; min-width:280px;"></blockquote>
</div>
</article>
`).join('');
root.setAttribute('data-ready','1');
function loadInstagram(cb){
if (window.instgrm && window.instgrm.Embeds) return cb();
if (document.querySelector('script[data-ig-embed="1"]')){
let tries = 0;
const t = setInterval(()=>{
tries++;
if (window.instgrm && window.instgrm.Embeds){
clearInterval(t);
cb();
}
if (tries > 40) clearInterval(t);
}, 250);
return;
}
const s = document.createElement('script');
s.async = true;
s.src = "https://www.instagram.com/embed.js";
s.setAttribute('data-ig-embed','1');
s.onload = cb;
document.body.appendChild(s);
}
function processEmbeds(){
try{ window.instgrm && instgrm.Embeds && instgrm.Embeds.process(); }catch(e){}
}
loadInstagram(processEmbeds);
let n = 0;
const retry = setInterval(()=>{
n++;
processEmbeds();
if(n >= 12) clearInterval(retry);
}, 600);
window.addEventListener('load', processEmbeds, { once:true });
const prev = document.getElementById('ligPrev');
const next = document.getElementById('ligNext');
function step(){
const first = grid.querySelector('.lig-item');
if(!first) return grid.clientWidth * 0.86;
const style = getComputedStyle(grid);
const gap = parseFloat(style.columnGap || style.gap || 0) || 0;
return first.getBoundingClientRect().width + gap;
}
function go(dir){ grid.scrollBy({ left: dir * step(), behavior: 'smooth' }); }
prev && prev.addEventListener('click', ()=>go(-1));
next && next.addEventListener('click', ()=>go(1));
})();
</script>
</section>
<!-- ==================== /EVENTOS & NOVEDADES ==================== -->

Para copiar: clic en el recuadro → Ctrl+A → Ctrl+C.