Corregir discrepancias estructurales NIVEL 1 - Issue #57
Implementación de correcciones críticas de estructura HTML base según template RDash index.html. **Cambios en header.php:** - Agregado botón "Let's Talk" dentro de navbar collapse (líneas 315-317 template) - Botón con data-bs-toggle="modal" data-bs-target="#contactModal" - Icono bi-lightning-charge-fill - Agregados atributos ScrollSpy a body tag: data-bs-spy="scroll", data-bs-target=".toc-container", data-bs-offset="100" **Cambios en front-page.php:** - REESCRITO completamente con estructura hero section (líneas 322-345 template) - Implementado div.container-fluid.py-5.mb-4.hero-title - Category badges con estructura correcta: d-flex gap-2, a.category-badge.category-badge-hero - H1 con clases: display-5 fw-bold text-center - Container Bootstrap wrapper correcto **Archivos creados:** - template-parts/modal-contact.php: Modal Bootstrap 5 para contacto - Estructura completa con form, labels, inputs - Compatible con botón "Let's Talk" y CTA Box **Cambios en footer.php:** - Integrado get_template_part para modal-contact en modalContainer **Validación:** - Sintaxis PHP validada en todos los archivos: ✅ Sin errores - Estructura HTML replica líneas exactas del template **Discrepancias corregidas:** ✅ Botón "Let's Talk" AUSENTE → IMPLEMENTADO ✅ Body tag sin ScrollSpy → ATRIBUTOS AGREGADOS ✅ Hero Section AUSENTE → IMPLEMENTADO ✅ Category badges AUSENTES → IMPLEMENTADOS ✅ H1 clases incorrectas → CORREGIDAS (display-5 fw-bold text-center) ✅ Modal contacto AUSENTE → CREADO **Siguiente paso:** Implementar issues #58-64 (estilos CSS) Relacionado con: #57 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
@@ -179,7 +179,9 @@
|
||||
</div><!-- #page -->
|
||||
|
||||
<!-- Modal Container - Carga dinámica del modal de contacto (Issue #34) -->
|
||||
<div id="modalContainer"></div>
|
||||
<div id="modalContainer">
|
||||
<?php get_template_part( 'template-parts/modal', 'contact' ); ?>
|
||||
</div>
|
||||
|
||||
<?php wp_footer(); ?>
|
||||
|
||||
|
||||
@@ -2,8 +2,7 @@
|
||||
/**
|
||||
* The template for displaying the static front page
|
||||
*
|
||||
* This template is used when a static page is set as the front page
|
||||
* in WordPress Settings > Reading.
|
||||
* Structure replicates template index.html lines 322-345 (Hero Section)
|
||||
*
|
||||
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#front-page
|
||||
*
|
||||
@@ -14,118 +13,116 @@
|
||||
get_header();
|
||||
?>
|
||||
|
||||
<!-- Hero Title Section (Template líneas 322-345) -->
|
||||
<div class="container-fluid py-5 mb-4 hero-title">
|
||||
<div class="container">
|
||||
<?php
|
||||
while ( have_posts() ) :
|
||||
the_post();
|
||||
|
||||
// Categories Section
|
||||
$categories = get_the_category();
|
||||
if ( ! empty( $categories ) && count( $categories ) > 0 ) :
|
||||
?>
|
||||
<div class="mb-3 d-flex justify-content-center">
|
||||
<div class="d-flex gap-2 flex-wrap justify-content-center">
|
||||
<?php
|
||||
// Limit to 3 categories max
|
||||
$cat_count = 0;
|
||||
foreach ( $categories as $category ) :
|
||||
if ( $cat_count >= 3 ) break;
|
||||
if ( $category->slug === 'uncategorized' ) continue;
|
||||
?>
|
||||
<a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>" class="category-badge category-badge-hero">
|
||||
<i class="bi bi-folder-fill me-1"></i>
|
||||
<?php echo esc_html( $category->name ); ?>
|
||||
</a>
|
||||
<?php
|
||||
$cat_count++;
|
||||
endforeach;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Page Title -->
|
||||
<h1 class="display-5 fw-bold text-center">
|
||||
<?php the_title(); ?>
|
||||
</h1>
|
||||
<?php endwhile; ?>
|
||||
</div><!-- .container -->
|
||||
</div><!-- .hero-title -->
|
||||
|
||||
<main id="main-content" class="site-main front-page" role="main">
|
||||
|
||||
<div class="content-wrapper">
|
||||
|
||||
<!-- Primary Content Area -->
|
||||
<div id="primary" class="content-area">
|
||||
|
||||
<?php
|
||||
while ( have_posts() ) :
|
||||
the_post();
|
||||
?>
|
||||
|
||||
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
|
||||
|
||||
<!-- Featured Image (Hero Section) -->
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<div class="hero-section">
|
||||
<?php
|
||||
the_post_thumbnail(
|
||||
'full',
|
||||
array(
|
||||
'alt' => the_title_attribute(
|
||||
array(
|
||||
'echo' => false,
|
||||
)
|
||||
),
|
||||
'loading' => 'eager',
|
||||
)
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Front Page Header -->
|
||||
<header class="entry-header">
|
||||
<h1 class="entry-title">
|
||||
<?php the_title(); ?>
|
||||
</h1>
|
||||
</header><!-- .entry-header -->
|
||||
|
||||
<!-- Front Page Content -->
|
||||
<div class="entry-content">
|
||||
<?php
|
||||
the_content();
|
||||
|
||||
// Display page links for paginated pages
|
||||
wp_link_pages(
|
||||
array(
|
||||
'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'apus-theme' ),
|
||||
'after' => '</div>',
|
||||
)
|
||||
);
|
||||
?>
|
||||
</div><!-- .entry-content -->
|
||||
|
||||
<!-- Front Page Footer -->
|
||||
<?php if ( get_edit_post_link() ) : ?>
|
||||
<footer class="entry-footer">
|
||||
<?php
|
||||
// Edit post link for logged-in users with permission
|
||||
edit_post_link(
|
||||
sprintf(
|
||||
wp_kses(
|
||||
/* translators: %s: Page title. Only visible to screen readers. */
|
||||
__( 'Edit<span class="screen-reader-text"> "%s"</span>', 'apus-theme' ),
|
||||
array(
|
||||
'span' => array(
|
||||
'class' => array(),
|
||||
),
|
||||
)
|
||||
),
|
||||
get_the_title()
|
||||
),
|
||||
'<span class="edit-link">',
|
||||
'</span>'
|
||||
);
|
||||
?>
|
||||
</footer><!-- .entry-footer -->
|
||||
<?php endif; ?>
|
||||
|
||||
</article><!-- #post-<?php the_ID(); ?> -->
|
||||
|
||||
<?php
|
||||
// Display comments section if enabled
|
||||
if ( comments_open() || get_comments_number() ) :
|
||||
comments_template();
|
||||
endif;
|
||||
|
||||
endwhile; // End of the loop.
|
||||
?>
|
||||
|
||||
<?php
|
||||
/**
|
||||
* Hook to display additional content on front page
|
||||
* This can be used to add featured posts, testimonials, etc.
|
||||
*/
|
||||
do_action( 'apus_front_page_content' );
|
||||
?>
|
||||
|
||||
</div><!-- #primary -->
|
||||
<!-- Container Bootstrap (Template línea 347) -->
|
||||
<div class="container">
|
||||
|
||||
<?php
|
||||
while ( have_posts() ) :
|
||||
the_post();
|
||||
?>
|
||||
|
||||
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
|
||||
|
||||
<!-- Front Page Content -->
|
||||
<div class="entry-content">
|
||||
<?php
|
||||
the_content();
|
||||
|
||||
// Display page links for paginated pages
|
||||
wp_link_pages(
|
||||
array(
|
||||
'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'apus-theme' ),
|
||||
'after' => '</div>',
|
||||
)
|
||||
);
|
||||
?>
|
||||
</div><!-- .entry-content -->
|
||||
|
||||
<!-- Front Page Footer -->
|
||||
<?php if ( get_edit_post_link() ) : ?>
|
||||
<footer class="entry-footer">
|
||||
<?php
|
||||
// Edit post link for logged-in users with permission
|
||||
edit_post_link(
|
||||
sprintf(
|
||||
wp_kses(
|
||||
/* translators: %s: Page title. Only visible to screen readers. */
|
||||
__( 'Edit<span class="screen-reader-text"> "%s"</span>', 'apus-theme' ),
|
||||
array(
|
||||
'span' => array(
|
||||
'class' => array(),
|
||||
),
|
||||
)
|
||||
),
|
||||
get_the_title()
|
||||
),
|
||||
'<span class="edit-link">',
|
||||
'</span>'
|
||||
);
|
||||
?>
|
||||
</footer><!-- .entry-footer -->
|
||||
<?php endif; ?>
|
||||
|
||||
</article><!-- #post-<?php the_ID(); ?> -->
|
||||
|
||||
<?php
|
||||
// Display comments section if enabled
|
||||
if ( comments_open() || get_comments_number() ) :
|
||||
comments_template();
|
||||
endif;
|
||||
|
||||
endwhile; // End of the loop.
|
||||
|
||||
/**
|
||||
* Sidebar on Front Page
|
||||
* Only display if sidebar is active
|
||||
* Hook to display additional content on front page
|
||||
* This can be used to add featured posts, testimonials, etc.
|
||||
*/
|
||||
if ( is_active_sidebar( 'sidebar-1' ) ) :
|
||||
get_sidebar();
|
||||
endif;
|
||||
do_action( 'apus_front_page_content' );
|
||||
?>
|
||||
|
||||
</div><!-- .content-wrapper -->
|
||||
</div><!-- .container -->
|
||||
|
||||
</main><!-- #main-content -->
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
|
||||
<body <?php body_class(); ?>>
|
||||
<body <?php body_class(); ?> data-bs-spy="scroll" data-bs-target=".toc-container" data-bs-offset="100">
|
||||
<?php wp_body_open(); ?>
|
||||
|
||||
<!-- Skip to main content link para accesibilidad -->
|
||||
@@ -111,6 +111,11 @@
|
||||
<?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 -->
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
<?php
|
||||
/**
|
||||
* Modal de Contacto - Bootstrap 5
|
||||
*
|
||||
* Modal activado por botón "Let's Talk" y CTA Box Sidebar
|
||||
*
|
||||
* @package Apus_Theme
|
||||
* @since 1.0.0
|
||||
*/
|
||||
?>
|
||||
|
||||
<!-- Contact Modal -->
|
||||
<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="contactModalLabel">
|
||||
<i class="bi bi-envelope-fill me-2" style="color: #FF8600;"></i>
|
||||
<?php esc_html_e( '¿Tienes alguna pregunta?', 'apus-theme' ); ?>
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="<?php esc_attr_e( 'Cerrar', 'apus-theme' ); ?>"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="mb-4">
|
||||
<?php esc_html_e( 'Completa el formulario y nuestro equipo te responderá en menos de 24 horas.', 'apus-theme' ); ?>
|
||||
</p>
|
||||
|
||||
<form id="modalContactForm">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="modalFullName" class="form-label"><?php esc_html_e( 'Nombre completo', 'apus-theme' ); ?> *</label>
|
||||
<input type="text" class="form-control" id="modalFullName" name="fullName" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="modalCompany" class="form-label"><?php esc_html_e( 'Empresa', 'apus-theme' ); ?></label>
|
||||
<input type="text" class="form-control" id="modalCompany" name="company">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="modalWhatsapp" class="form-label"><?php esc_html_e( 'WhatsApp', 'apus-theme' ); ?> *</label>
|
||||
<input type="tel" class="form-control" id="modalWhatsapp" name="whatsapp" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="modalEmail" class="form-label"><?php esc_html_e( 'Correo electrónico', 'apus-theme' ); ?> *</label>
|
||||
<input type="email" class="form-control" id="modalEmail" name="email" required>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="modalComments" class="form-label"><?php esc_html_e( '¿En qué podemos ayudarte?', 'apus-theme' ); ?></label>
|
||||
<textarea class="form-control" id="modalComments" name="comments" rows="4"></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn btn-primary w-100">
|
||||
<i class="bi bi-send-fill me-2"></i><?php esc_html_e( 'Enviar Mensaje', 'apus-theme' ); ?>
|
||||
</button>
|
||||
</div>
|
||||
<div id="modalFormMessage" class="col-12 mt-2 alert" style="display: none;"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user