Tabs en publicación de wordpress sin plugin

Ok, el proyecto: un onepage website responsivo con espacio de membresia para un espacio co-working llamado hasta la hora Vorticer (MX), desarrollada en WordPress.

Cuando desarrollo páginas en wordpress, procuro usar el mínimo, por no decir ningún, plugin. Eso para no obligar el cliente en actualizarlos cada cuanto, cosa que de cualquier manera no hará, y entonces evitar que conflictos entre la versión de wordpress y la versión del plugin surjan además que eventuales problemas de visualización de la información lleguen en los meses siguiendo la entrega del proyecto.

Uno de mis objetivos cuando trabajo en proyectos digitales es entregar un producto en simbiosis con el business del cliente, con una organización de contenido adecuado para el usuario y que vaya de mano con los objetivos que tiene el cliente (su empresa / servicio / producto es ya conocido, o es desconocido, está mejorando algo, lanzando algo nuevo,…), que sea funcional, agradable a la vista, con una identidad propia, y en el cual el contenido tiene el primer papel. Eso sin hablar de la rapidez de cargamento, y del SEO.

Para contestar a todas esas exigencias, decidí recurrir a las tabs para enseñar varias opciones de membresía disponibles en el Vorticer co-working. Solución idea para una uno page, además porque nada más hay 3 membresias, un número ideal para las tabs.

En fin, el desafío que me tomó 2 días en resolver, pero que guardaré de por vida en esta publicación, era de implementar eso sin instalar uno de las decenas de plugin que existen para ello. Mi solución es puro php y jQuery (UI).

Lo que me costo más trabajo ha sido aplicar el incremento de +1 a cada nuevo div panel del tab, aquí:
<div class=“tab-pane fade<?php if ( $get_featured_pages->current_post == 0 ): ?> in active<?php endif; ?>” id=“tabs-<?php echo $panel_id; ?>”>
sin que se incrementará el numero de excerpt de +1 (el problema que he tenido era que si el id era 2,  entonces el excerpt se visualizaba 2 veces,…) Eso porque ponía el incremento dentro del loop en vez de ponerlo al final como aquí:
<?php $panel_id++;
endwhile;

Les planteo la solución PHP aquí (todavía no integre el jQuery, tampoco el CSS)

 

El código PHP:

<?php if( !empty ( $page_array ) ) :
$count = 0; ?>
<div class=“team-content-wrapper clearfix”>
<div class=“tg-column-wrapper clearfix”>
<div id=“tabs”>

<!–La navegación tabs –>
<ul>
<?php while( $get_featured_pages->have_posts() ):$get_featured_pages->the_post();

if ( $count % 3 == 0 && $count > 1 ) { ?> <div class=“clearfix”></div> <?php }

$title_attribute = the_title_attribute( ‘echo=0’ ); ?>

<li>
<?php
$output = “;
$himalayas_designation = get_post_meta( $post->ID, ‘himalayas_designation’, true );
?>

<?php
$output .= ’<a class=”team-name team-desc-wrapper” href=“#tabs-’ . $count . ’” title=“’ . $title_attribute . ’” alt =“’ . $title_attribute . ’”>’ . get_the_title() . ’</a></li>’ ;

echo $output;
$count++; ?>
<?php endwhile;

// Reset Post Data
wp_reset_query(); ?>
</ul>

<!– Los paneles de la navegación tab –>

<?php
$panel_id = 1;

while( $get_featured_pages->have_posts() ):$get_featured_pages->the_post(); ?>

<div class=“tab-pane fade<?php if ( $get_featured_pages->current_post == 0 ): ?> in active<?php endif; ?>” id=“tabs-<?php echo $panel_id; ?>”>
<div class=“col-xs-4 col-sm-2”>
<?php
$output = “;
$himalayas_designation = get_post_meta( $post->ID, ‘himalayas_designation’, true );

$output .= ’<p>’ . get_the_excerpt() . ’</p>’;
echo $output;
?>
</div>
</div>

<?php $panel_id++;
endwhile;
wp_reset_postdata();

// Reset Post Data
wp_reset_query();
?>

</div><!– #tab container –>
</div><!– .tg-column-wrapper –>
</div><!– .team-content-wrapper –>

<?php endif; ?>

You are welcome!

Spread the love

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *