rafa
7188adf0d7
fea-audio-player.php: el <audio> lleva data-post-id/data-voice; listener
en wp_footer dispara gtag('event','audio_play', {post_id, voice}) en el
primer play (no en cada resume).
fea-share.php: se sube también al repo (nunca se había comiteado). El
botón de Facebook lleva data-fea-share-track="facebook" + listener que
dispara gtag('event','share_click', {method, post_id}).
Ambos reusan el dataLayer/gtag que ya inicializa fea-analytics.php, sin
añadir JS de terceros. Verificado en local con Playwright (evento se
dispara correctamente en ambos casos).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
90 lines
4.0 KiB
PHP
90 lines
4.0 KiB
PHP
<?php
|
|
/**
|
|
* Plugin Name: Fea Audio Player (#76)
|
|
* Description: Reproductor TTS compacto en la fila del autor (a la derecha) cuando
|
|
* existe el meta fea_audio_url (voz Nico, MiniMax HD). Se inyecta como
|
|
* último hijo del grupo flex del autor (template FSE) vía render_block.
|
|
*/
|
|
if (!defined('ABSPATH')) exit;
|
|
|
|
/** Devuelve el HTML del reproductor para el post actual, o '' si no hay audio. */
|
|
function fea_audio_player_html(): string {
|
|
$id = get_the_ID();
|
|
$url = get_post_meta($id, 'fea_audio_url', true);
|
|
if (!$url) return '';
|
|
$voice = get_post_meta($id, 'fea_audio_voice', true) ?: 'NicoFeadulta2026';
|
|
return '<div class="fea-audio">'
|
|
. '<span class="fea-audio-label">'
|
|
. '<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">'
|
|
. '<path fill="currentColor" d="M3 10v4h4l5 5V5L7 10H3zm13.5 2a4.5 4.5 0 0 0-2.5-4.03v8.06A4.5 4.5 0 0 0 16.5 12zM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54z"/>'
|
|
. '</svg> Escucha</span>'
|
|
. '<audio controls preload="none" src="' . esc_url($url) . '"'
|
|
. ' data-fea-audio-track data-post-id="' . esc_attr($id) . '" data-voice="' . esc_attr($voice) . '"></audio>'
|
|
. '</div>';
|
|
}
|
|
|
|
// Inyecta el player como último hijo de la fila flex del autor (el grupo que
|
|
// contiene el core/avatar en la cabecera FSE del single).
|
|
add_filter('render_block', function ($html, $block) {
|
|
if (!is_singular('post')) return $html;
|
|
if (($block['blockName'] ?? '') !== 'core/group') return $html;
|
|
$has_avatar = false;
|
|
foreach ($block['innerBlocks'] ?? [] as $ib) {
|
|
if (($ib['blockName'] ?? '') === 'core/avatar') { $has_avatar = true; break; }
|
|
}
|
|
if (!$has_avatar) return $html;
|
|
$player = fea_audio_player_html();
|
|
if (!$player) return $html;
|
|
$pos = strrpos($html, '</div>');
|
|
return $pos === false ? $html . $player : substr($html, 0, $pos) . $player . substr($html, $pos);
|
|
}, 10, 2);
|
|
|
|
add_action('wp_head', function () {
|
|
if (!is_singular('post')) return;
|
|
if (!get_post_meta(get_queried_object_id(), 'fea_audio_url', true)) return;
|
|
?>
|
|
<style>
|
|
/* El player se inyecta en el grupo flex del autor. En el single FSE ese
|
|
contenedor es el wp-block-group (no .fea-byline, que solo existe en Astra),
|
|
así que el wrap debe apuntar también a él o en móvil vertical el <audio>
|
|
no encuentra ancho y no muestra controles (#142). */
|
|
.fea-byline,
|
|
.wp-block-group:has(> .wp-block-avatar):has(.wp-block-post-author-name){flex-wrap:wrap}
|
|
.fea-audio{display:flex;align-items:center;gap:.5rem;margin-left:auto;
|
|
padding:.3rem .55rem;background:#faf6f7;border:1px solid #e7d6da;
|
|
border-left:3px solid #8b1a2e;border-radius:8px}
|
|
.fea-audio-label{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;
|
|
font-weight:600;color:#8b1a2e;white-space:nowrap;line-height:1}
|
|
.fea-audio audio{height:32px;width:230px;max-width:44vw}
|
|
@media(max-width:600px){
|
|
.fea-audio{margin-left:0;width:100%;margin-top:.5rem}
|
|
.fea-audio audio{flex:1 1 auto;width:auto;max-width:none}
|
|
}
|
|
</style>
|
|
<?php
|
|
});
|
|
|
|
// Evento GA4 audio_play (issue tracking uso TTS). Un único evento por <audio>
|
|
// y carga de página, disparado en el primer 'play' (no en cada resume tras
|
|
// pausa/seek). gtag ya está definido por fea-analytics.php en wp_head prio 1,
|
|
// así que este script (footer) siempre lo encuentra disponible.
|
|
add_action('wp_footer', function () {
|
|
if (!is_singular('post')) return;
|
|
if (!get_post_meta(get_queried_object_id(), 'fea_audio_url', true)) return;
|
|
?>
|
|
<script>
|
|
document.querySelectorAll('audio[data-fea-audio-track]').forEach(function (audio) {
|
|
var fired = false;
|
|
audio.addEventListener('play', function () {
|
|
if (fired || typeof gtag !== 'function') return;
|
|
fired = true;
|
|
gtag('event', 'audio_play', {
|
|
post_id: audio.dataset.postId,
|
|
voice: audio.dataset.voice
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<?php
|
|
});
|