git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[COMPONENTE 13] Implementar Share Buttons según documentación - Issue #124

Browse Source 
CAMBIOS EN HTML (single.php):
- Remover botón de Email (no en documentación)
- Remover texto de botones (solo iconos)
- Agregar aria-label a todos los botones para accesibilidad
- Cambiar Instagram a onclick alert en vez de link directo
- Cambiar WhatsApp URL a api.whatsapp.com/send
- Actualizar rel de "noopener" a "noopener noreferrer"
- Agregar comentarios HTML para cada botón

CAMBIOS EN CSS (style.css):
- Agregar reglas específicas para .share-buttons .btn
- border-width: 2px (más grueso que Bootstrap default)
- transition: all 0.3s ease
- box-shadow en hover para efecto de elevación

Archivos modificados:
- wp-content/themes/apus-theme/single.php (líneas 72-120)
- wp-content/themes/apus-theme/assets/css/style.css (líneas 1054-1063)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-07 10:48:40 -06:00
parent 8c735d95e6
commit bf5b344b01
2 changed files with 46 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
wp-content/themes/apus-theme/assets/css/style.css
View File

@@ -1050,3 +1050,14 @@ img {
background-color: var(--color-navy-primary);
color: #ffffff;
}
/* === SHARE BUTTONS === */
.share-buttons .btn {
transition: all 0.3s ease;
border-width: 2px;
}
.share-buttons .btn:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

51
wp-content/themes/apus-theme/single.php
View File

@@ -73,29 +73,48 @@ get_header();
<div class="my-5 py-4 border-top">
<p class="mb-3 text-muted"><?php esc_html_e('Compartir:', 'apus-theme'); ?></p>
<div class="d-flex gap-2 flex-wrap share-buttons">
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>"
class="btn btn-outline-primary btn-sm" target="_blank" rel="noopener">
<i class="bi bi-facebook me-1"></i> Facebook
class="btn btn-outline-primary btn-sm"
target="_blank"
rel="noopener noreferrer"
aria-label="Compartir en Facebook">
<i class="bi bi-facebook"></i>
</a>
<a href="https://www.instagram.com/"
class="btn btn-outline-danger btn-sm" target="_blank" rel="noopener">
<i class="bi bi-instagram me-1"></i> Instagram
<!-- Instagram -->
<a href="#"
class="btn btn-outline-danger btn-sm"
onclick="alert('Instagram no permite compartir enlaces directamente. Puedes tomar una captura de pantalla o copiar el enlace para compartirlo manualmente.'); return false;"
aria-label="Compartir en Instagram">
<i class="bi bi-instagram"></i>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo urlencode(get_permalink()); ?>"
class="btn btn-outline-info btn-sm" target="_blank" rel="noopener">
<i class="bi bi-linkedin me-1"></i> LinkedIn
class="btn btn-outline-info btn-sm"
target="_blank"
rel="noopener noreferrer"
aria-label="Compartir en LinkedIn">
<i class="bi bi-linkedin"></i>
</a>
<a href="https://wa.me/?text=<?php echo urlencode(get_the_title() . ' ' . get_permalink()); ?>"
class="btn btn-outline-success btn-sm" target="_blank" rel="noopener">
<i class="bi bi-whatsapp me-1"></i> WhatsApp
<!-- WhatsApp -->
<a href="https://api.whatsapp.com/send?text=<?php echo urlencode(get_the_title() . ' - ' . get_permalink()); ?>"
class="btn btn-outline-success btn-sm"
target="_blank"
rel="noopener noreferrer"
aria-label="Compartir en WhatsApp">
<i class="bi bi-whatsapp"></i>
</a>
<!-- X (Twitter) -->
<a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>"
class="btn btn-outline-dark btn-sm" target="_blank" rel="noopener">
<i class="bi bi-twitter-x me-1"></i> X
</a>
<a href="mailto:?subject=<?php echo urlencode(get_the_title()); ?>&body=<?php echo urlencode(get_permalink()); ?>"
class="btn btn-outline-secondary btn-sm">
<i class="bi bi-envelope me-1"></i> Email
class="btn btn-outline-dark btn-sm"
target="_blank"
rel="noopener noreferrer"
aria-label="Compartir en X (Twitter)">
<i class="bi bi-twitter-x"></i>
</a>
</div>
</div>