0

Hola comunidad tengo un problema, me solicitaron crear un blog para ser administrado por wordpress, entonces recurrí a crear una plantilla según el diseño que me dieron y importarla al wordpress.

Ya todo se ve bien pero hay un detalle que ellos quieren, y es que la estructura de la previsualización de la entrada de blog cambie cada fila, es decir; en la primer fila que sea Imagen y al lado texto, pero en la segunda fila que se primero texto y después imagen.. adjunto imagen del diseño que hicieron:

introducir la descripción de la imagen aquí

Esto es lo que tengo actualmente en el código de php del index, donde ya se encuentra listando las entradas en dos columnas:

<div class="card">
  <div class="card-body">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <!-- Blog -->
          <section>
            <div class="row">
              <?php
              query_posts(array(
                "showposts" => 4,
                "cat" => 4
              ));
              ?>
              <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <div class="col-md-6 col-12">
                  <div class="row contentBlog">
                    <div class="col-md-6 col-12">
                      <a href="#" class="image featured">
                        <?php
                        // check if the post has a Post Thumbnail assigned to it.
                        if ( has_post_thumbnail() ) {
                          the_post_thumbnail('category-thumb-blog');
                        }
                        ?>
                      </a>
                    </div>
                    <div class="col-md-6 col-12 cuerpoBlog">
                      <header>
                        <h3 class="title"><?php the_title(); ?></h3>
                      </header>
                      <?php the_excerpt(); ?>
                      <footer>
                        <ul class="actions">

                          <li><a href="<?php the_permalink(); ?>" 
                                 class="buttonLeer">Leer Más</a></li>
                        </ul>
                      </footer>
                    </div>
                  </div>
                </div>
              <?php endwhile; ?>
              <!-- post navigation -->
            <?php else: ?>
              <!-- no posts found -->
              <p>Ups!! no existe nada para esta categoria</p>
            <?php endif; ?>
            <?php wp_reset_query(); ?>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>

y se ve así:

introducir la descripción de la imagen aquí

La plantilla la estoy trabajando en html con bootstrap y php. Muchas gracias al que me pueda ayudar hacer esa condición para que se vea igual que el diseño de arriba.

1 respuesta 1

0

Lo primero que se me ocurre es que crees un contador y hagas este proceso. Creamos un contador ($cnt=1) que cuando el valor es 1 o 2 crea las columnas imagen-texto, y cuando el valor es 3 o 4 crea las columnas texto-imagen. Una vez ha creado las 4 noticias, reseteamos el contador y se repite el proceso en el caso que haya más noticias.

<?php if (have_posts()): $cnt=1; while (have_posts()) : the_post(); ?>

    <?php if ($cnt == 1 || $cng == 2): ?>

        // Primeras dos noticias con imagen a la izquierda y texto a la derecha
        <div class="col-md-6 col-12">IMG</div>
        <div class="col-md-6 col-12">TEXTO</div>

    <?php else: ?>

        // Las otras dos noticias con texto a la izquierda y imagen a la derecha
        <div class="col-md-6 col-12">TEXTO</div>
        <div class="col-md-6 col-12">IMG</div>

    <?php endif; ?>

    // reseteamos el contador una vez haya creado la cuarta noticia
    <?php $cnt++; if ($cnt > 4): $cnt=1; endif; ?>

<?php endwhile; endif; ?>

Otra cosa que he visto a nivel de diseño son los márgenes entre columnas, esto lo puedes solucionar con la clase 'no-gutters' de Boostrap, así quedarán cómo en el disseño.

<div class="row no-gutters">

Espero haberte ayudado.

2
  • 1
    Muchas gracias, me sirvió mucho tu recomendación solo hice unos pequeños cambios para que funcionara. este en el if <?php if ($cnt == 1 || $cnt==2): ?> y este en el reseteo del contador <?php $cnt++; if ($cnt > 4): $cnt=1; endif; ?> el 5 jun. 2020 a las 22:23
  • Cierto, edito la respuesta para que quede constancia.
    – Kiku Solé
    el 7 jun. 2020 a las 18:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.