Crear Tablas Dinámicas y Adaptativas con Bricks Builder para WordPress

  • Comentarios de la entrada:Sin comentarios
  • Tiempo de lectura:5 minutos de lectura

En este artículo os quiero mostrar cómo se pueden crear Tablas Dinámicas en Bricks para WordPress. Aprenderemos a crear un loop de las entradas de WordPress y filtrarlas por el nombre de una Categoría.

En el Vídeo muestro cómo se filtran las entradas de WordPress mediante una categoría. Además las entradas de esa categoría contienen unos campos personalizados que mostraremos también en la tabla Dinámica. Si no has visto el vídeo donde explico cómo se hace, ahora es el momento de que lo veas.

Mediante estas capturas de abajo te explico dónde se debe poner el código Html y PHP que puedes copiar en este artículo:

tablas dinamicas en Bricks

 

tablas dinamicas en Bricks

En el campo donde indica la flecha 1 debes pegar el código que te pongo más abajo. Recuerda que una vez hayas pegado el código, tienes que pulsar en el botón «Ejecutar Código» que te indico en la flecha 2 de la imagen de arriba.

Código HTML y PHP (Copialo y pegalo donde te he indicado)

<table class="resp">
<thead>
<tr>
<th scope="col">Imagen</th>
<th scope="col">Titulo</th>
<th scope="col">Fecha</th>
<th scope="col">Hora</th>
<th scope="col">Aforo</th>
<th scope="col">Tipo Evento</th>
<th scope="col">Acción</th>
</tr>
</thead>
<tbody>

<?php
$args = array( 'post_type' => 'Post');
$loop = new WP_Query( $args );
$pm_ID=0;

// ****** Loop Posts de las Entradas ****** 
while ($loop->have_posts()) : $loop->the_post();
if (in_category('51')){ // Filtramos por el número de categoría
$pm_ID++;
$pm_titulo=get_the_title();
$pm_fecha=get_field('fecha_evento');
$pm_hora=get_field('hora_evento');
$pm_aforo=get_field('aforo');
$pm_tipo=get_field('tipo_evento');
$pm_enlace=get_permalink();
$pm_imagen = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
?>
<tr>
<td><img src="<?=$pm_imagen[0]?>" width="120"></td>
<td><?=$pm_titulo?></td>
<td><?=$pm_fecha?></td>
<td><?=$pm_hora?></td>
<td><?=$pm_aforo?></td>
<td><?=$pm_tipo?></td>
<td><a class="bricks-button sm bricks-background-primary" href="<?=$pm_enlace?>">Ver Evento</a></td>
</tr>
<?php
}
endwhile;
?>
</tbody>
</table>

Ahora deberás copiar el código CSS que te pongo más abajo y pegarlo donde te indico en las capturas de abajo.

tablas dinamicas en Bricks

tablas dinamicas en Bricks

tablas dinamicas en Bricks

Código CSS (Copialo y pegalo donde te he indicado) AVISO, no lo pegues en el mismo sitio donde se pone el codigo HTML porque te dará problemas.

table {
width: 100%;
background: white;
margin-bottom: 1.25em;
border: solid 1px #dddddd;
border-collapse: collapse;
border-spacing: 0;
}

table tr th, 
table tr td {
padding: 0.5625em 0.625em;
font-size: 0.875em;
color: #222222;
border: 1px solid #dddddd;
}

table tr.even,
table tr.alt,
table tr:nth-of-type(even) {
background: #f9f9f9;
}


@media only screen and (max-width: 768px) {
table.resp,
.resp thead,
.resp tbody,
.resp tr,
.resp th,
.resp td,
.resp caption {
display: block;
}

table.resp {
border: none
}

.resp thead tr {
display: none;
}

.resp tbody tr {
margin: 1em 0;
border: 1px solid #2ba6cb;
}

.resp td {
border: none;
border-bottom: 1px solid #dddddd;
position: relative;
padding-left: 45%;
text-align: left;
}

.resp tr td:last-child {
border-bottom: 1px double #dddddd;
}

.resp tr:last-child td:last-child {
border: none;
}

.resp td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
}

td:nth-of-type(1):before {
content: "Imagen";
}

td:nth-of-type(2):before {
content: "Título";
}

td:nth-of-type(3):before {
content: "Fecha";
}

td:nth-of-type(4):before {
content: "Hora";
}

td:nth-of-type(5):before {
content: "Aforo";
}

td:nth-of-type(6):before {
content: "Tipo Evento";
} 

td:nth-of-type(7):before {
content: "Acción";
} 
}

Este es el resultado de cómo se vería esta Tabla Dinámica realizada en Bricks para WordPress

tablas dinamicas en Bricks para WordPress


Comparte en tus Redes Sociales:

Deja una respuesta

Los datos de carácter personal que consten en el comentario serán tratados por Solución Individual con la finalidad de publicar tu comentario así como enviarte a posteriori información comercial de aquellos productos o servicios que puedan ser de tu interés. La legitimación del tratamiento es tu consentimiento. Tus datos no serán cedidos a terceros. Tienes derecho a acceder, rectificar y suprimir tus datos, así como otros derechos como se explica en nuestra Política de Privacidad y Protección de datos