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>
169 lines
5.6 KiB
PHP
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 -->
|