WordPress : Disposition en deux colonnes avec ordre alphabétique

Publié par Jean-Michel le

J’essaie de sortir une liste de revendeurs en deux colonnes de gauche à droite, triées par ordre alphabétique :

Un | B

C | ré

E | F

G | H

Actuellement, le code ci-dessous trie la moitié des messages par ordre alphabétique, puis commence à mi-parcours avec le reste par ordre alphabétique :

Un | C

E | g

B | ré

F | H

Une idée sur où je vais mal?

<?php
query_posts(  array( 'order' => 'ASC' , 'orderby' => 'title' , 'posts_per_page' => -1 , 'post_type' => 'stockist_directory', 'regions' => 'metropolitan' ) );
if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="left-column">
<h1><?php the_title(); ?></h1>
  <?php the_field('shop_address'); ?><br/>
  <?php the_field('suburb'); ?>, <?php the_field('postcode'); ?><br/>
  Phone: <?php the_field('phone_number'); ?><br/>
  <a href="<?php the_field('website_address'); ?>">Website</a>
</div>

<?php endif; endwhile; else: ?>
<?php endif; ?>

<?php $i = 0; rewind_posts(); ?>

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="right-column">

<h1><?php the_title(); ?></h1>
  <?php the_field('shop_address'); ?><br/>
  <?php the_field('suburb'); ?>, <?php the_field('postcode'); ?><br/>
  Phone: <?php the_field('phone_number'); ?><br/>
  <a href="<?php the_field('website_address'); ?>">Website</a>
  </div>
<?php endif; endwhile; else: ?>

<?php endif; ?>

Solution n°1 trouvée

Concernant l’utilisation de query_posts, comme @epilektric l’a dit ne l’utilisez jamais . Utilisez à la WP_Queryplace.

Une autre considération est de garder votre code SEC.

Ce que je te propose c’est :

  1. Exécutez la boucle une fois et placez les messages dans un tableau d’assistance, en utilisant 2 clés une pour paire et une pour impaire.
  2. Faites défiler ce tableau et affichez le balisage avec une fonction.

Exemple:

function post_data_output( $post ) {
  the_field('shop_address', $post->ID );
  echo get_field('suburb', $post->ID) . ','. get_field('postcode', $post->ID) . '<br/>';
  echo 'Phone:' . get_field('phone_number', $post->ID) . '<br/>';
  echo '<a href="' . get_field('website_address', $post->ID). '">Website</a>';
}

$args = array( 'order' => 'ASC' , 'orderby' => 'title' , 'posts_per_page' => -1 , 'post_type' => 'stockist_directory', 'regions' => 'metropolitan' );

$query = new WP_Query($args);

if ($query->have_posts()) :
  $ordered = array('even' => array(), 'odd' => array());
  while($query->have_posts()) : $query->the_post();
    global $post;
    $key =  ( $query->current_post % 2 == 0) ? 'even' : 'odd';
    $ordered[$key][] = $post;
  endwhile;
  wp_reset_postdata();
  echo '<div id="left-column">';
  if ( ! empty($ordered['odd']) ) { foreach( $ordered['odd'] as $apost ) {
    post_data_output($apost);
  } }
  echo '</div>';
  echo '<div id="right-column">';
  foreach( $ordered['even'] as $apost ) {
    post_data_output($apost);
  }
  echo '</div>';
endif;

Solution n°2 trouvée

Cela semble trop complexe pour trier les messages en colonnes. Vous devriez être en mesure d’obtenir les résultats souhaités avec une logique simple.

  1. Obtenir l’index du message actuel.
  2. Vérifiez le résultat de l’opérateur de module appliqué à l’indice.
  3. Attribuez la classe de colonne appropriée en fonction du résultat du module.
<?php if (have_posts()) : ?>
    <?php while(have_posts()) : the_post();

        if ($wp_query->current_post % 2) {
            $column_class='left-column';
        } else {
            $column_class='right-column';
        }
    ?>

        <div id="<?php echo $column_class; ?>">
            <!-- your content goes here -->
            <h1><?php the_title(); ?></h1>
        </div>

    <?php endwhile; else: ?>

    <!-- no posts to display -->

<?php endif; ?>

autres considérations

Vous devriez également envisager de ne pas utiliser query_posts(). Les ajustements suivants devraient fournir le même résultat.

Changer query_posts()pour WP_Query.

$query = new WP_Query(  array( 'order' => 'ASC' , 'orderby' => 'title' , 'posts_per_page' => -1 , 'post_type' => 'stockist_directory', 'regions' => 'metropolitan' ) );

Ajustez ensuite The Loop pour utiliser $query. Notez également que c’est $wp_query->current_postdevenu $query->current_post.

<?php if ($query->have_posts()) : ?>
    <?php while($query->have_posts()) : $query->the_post();

        if ($query->current_post % 2) {
            $column_class='left-column';
        } else {
            $column_class='right-column';
        }
    ?>

Après la boucle, réinitialisez les données de publication comme ceci.

<?php wp_reset_postdata(); ?>

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *