Files
roi-theme/header.php
FrankZamora 465b879135 Feat: Implementar Top Bar configurable - Issue #143
Implementación completa del componente Top Bar con 15 campos configurables desde el admin panel, siguiendo el algoritmo universal v2.0.

## Cambios Realizados

### Backend (PHP)
- Agregados defaults del Top Bar a class-settings-manager.php
- Implementada validación completa en class-validator.php (15 campos)
- Implementada sanitización con sanitize_text_field, esc_url_raw y sanitize_hex_color
- Modificado header.php con código 100% configurable usando wp_parse_args()

### Frontend (Admin Panel)
- Creado tab HTML completo con 3 secciones: Activación, Contenido y Estilos
- Implementado JavaScript para renderizado y recolección de datos
- 15 campos configurables: enabled, visibility, icon, content, link, custom styles

### Infraestructura
- Creado admin-panel/init.php para carga del módulo
- Creada class-admin-menu.php con enqueue de Bootstrap 5 y assets
- Creada estructura base CSS y JavaScript del admin
- Ya cargado en functions.php línea 276

## Características
- Responsive: Control independiente mobile/desktop
- Estilos personalizables: 4 colores + tamaño de fuente
- Validación robusta: Límites de caracteres, URLs, colores hex
- Defaults inteligentes: Valores seguros si no hay configuración

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:13:55 -06:00

169 lines
5.6 KiB
PHP

<?php
/**
* Header Template
*
* Replica EXACTAMENTE la estructura del template RDash (líneas 54-133)
* Sin wrappers extra.
*
* @package Apus_Theme
* @since 1.0.0
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> data-bs-spy="scroll" data-bs-target=".toc-container" data-bs-offset="100">
<?php wp_body_open(); ?>
<!-- Top Notification Bar (Configurable desde Admin Panel) -->
<?php
// Obtener configuración del Top Bar
$settings = get_option('apus_theme_settings', array());
$top_bar_defaults = array(
'enabled' => true,
'show_on_mobile' => true,
'show_on_desktop' => true,
'icon_class' => 'bi bi-megaphone-fill',
'show_icon' => true,
'highlight_text' => 'Nuevo:',
'message_text' => 'Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.',
'link_text' => 'Ver Catálogo',
'link_url' => '/catalogo',
'link_target' => '_self',
'show_link' => true,
'custom_styles' => array(
'background_color' => '',
'text_color' => '',
'highlight_color' => '',
'link_hover_color' => '',
'font_size' => 'normal'
)
);
$top_bar_config = isset($settings['components']['top_bar']) ? $settings['components']['top_bar'] : array();
$top_bar = wp_parse_args($top_bar_config, $top_bar_defaults);
// Verificar si está habilitado
if ($top_bar['enabled']):
// Construir clases CSS
$classes = array('top-notification-bar');
if (!$top_bar['show_on_mobile']) {
$classes[] = 'd-none';
$classes[] = 'd-md-block';
}
if (!$top_bar['show_on_desktop']) {
$classes[] = 'd-md-none';
}
$class_attr = implode(' ', $classes);
// Construir estilos inline
$inline_styles = array();
if (!empty($top_bar['custom_styles']['background_color'])) {
$inline_styles[] = 'background-color: ' . esc_attr($top_bar['custom_styles']['background_color']);
}
if (!empty($top_bar['custom_styles']['text_color'])) {
$inline_styles[] = 'color: ' . esc_attr($top_bar['custom_styles']['text_color']);
}
// Font size
$font_size_map = array(
'small' => '0.8rem',
'normal' => '0.9rem',
'large' => '1rem'
);
if (isset($font_size_map[$top_bar['custom_styles']['font_size']])) {
$inline_styles[] = 'font-size: ' . $font_size_map[$top_bar['custom_styles']['font_size']];
}
$style_attr = !empty($inline_styles) ? ' style="' . implode('; ', $inline_styles) . '"' : '';
?>
<div class="<?php echo esc_attr($class_attr); ?>"<?php echo $style_attr; ?>>
<div class="container">
<div class="d-flex align-items-center justify-content-center">
<?php if ($top_bar['show_icon'] && !empty($top_bar['icon_class'])): ?>
<i class="<?php echo esc_attr($top_bar['icon_class']); ?> me-2"></i>
<?php endif; ?>
<span>
<?php if (!empty($top_bar['highlight_text'])): ?>
<strong<?php if (!empty($top_bar['custom_styles']['highlight_color'])): ?> style="color: <?php echo esc_attr($top_bar['custom_styles']['highlight_color']); ?>"<?php endif; ?>>
<?php echo esc_html($top_bar['highlight_text']); ?>
</strong>
<?php endif; ?>
<?php echo esc_html($top_bar['message_text']); ?>
</span>
<?php if ($top_bar['show_link'] && !empty($top_bar['link_text']) && !empty($top_bar['link_url'])): ?>
<a href="<?php echo esc_url(home_url($top_bar['link_url'])); ?>"
class="ms-2 text-white text-decoration-underline top-bar-link"
target="<?php echo esc_attr($top_bar['link_target']); ?>"
<?php if (!empty($top_bar['custom_styles']['link_hover_color'])): ?>
data-hover-color="<?php echo esc_attr($top_bar['custom_styles']['link_hover_color']); ?>"
<?php endif; ?>>
<?php echo esc_html($top_bar['link_text']); ?>
</a>
<?php endif; ?>
</div>
</div>
</div>
<?php endif; ?>
<!-- Navbar (Template líneas 264-320) -->
<nav class="navbar navbar-expand-lg navbar-dark py-3" role="navigation" aria-label="<?php esc_attr_e('Primary Navigation', 'apus-theme'); ?>">
<div class="container">
<!-- Hamburger Toggle Button - PRIMERO según template línea 286 -->
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="<?php esc_attr_e('Toggle navigation', 'apus-theme'); ?>">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible Menu -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
if (has_nav_menu('primary')) {
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'navbar-nav mb-2 mb-lg-0',
'fallback_cb' => false,
'depth' => 2,
'walker' => new WP_Bootstrap_Navwalker(),
));
} else {
// Fallback si no hay menú asignado
?>
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="<?php echo esc_url(home_url('/')); ?>">
<?php esc_html_e('Home', 'apus-theme'); ?>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo esc_url(get_post_type_archive_link('post')); ?>">
<?php esc_html_e('Blog', 'apus-theme'); ?>
</a>
</li>
</ul>
<?php
}
?>
<!-- Let's Talk Button (Template líneas 315-317) -->
<button class="btn btn-lets-talk ms-lg-3" type="button" data-bs-toggle="modal" data-bs-target="#contactModal">
<i class="bi bi-lightning-charge-fill me-2"></i><?php esc_html_e('Let\'s Talk', 'apus-theme'); ?>
</button>
</div>
</div><!-- .container -->
</nav><!-- .navbar -->