Obtenez WordPress pour alterner l’affichage de 2 et 1 messages d’affilée

J’essaie de coder ma page d’accueil pour avoir 2 messages d’affilée, puis la ligne suivante a un message, la ligne suivante 2 messages, et ainsi de suite.

J’ai essayé d’utiliser cet article, mais chaque fois que j’essaie, j’obtiens des problèmes.

https://perishablepress.com/two-column-horizontal-sequence-wordpress-post-order/

Si quelqu’un a des solutions de codage, je l’apprécierais vraiment.

Ceci est mon fichier index.php actuel

<?php

get_header();

if (have_posts()) :
while (have_posts()) :
$i++; if(($i % 2) == 0) : $wp_query->next_post(); else :
the_post(); ?>
<article class="post">
    <div id="left-column">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
    <?php echo get_the_excerpt(); ?>
    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
    </p>
    </div>
</article>

<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?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(); ?>
<article class="post">
    <div id="right-column">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
    <?php echo get_the_excerpt(); ?>
    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
    </p>
    </div>
</article>


<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif;

get_footer();

?>

Solution n°1 trouvée

Chaque fois que vous appelez the_post(); l’index de publication est avancé et les données de publication suivantes entrent dans la portée.

Créez un nouveau fichier de modèle dans votre thème et ajoutez une nouvelle page à l’aide de ce modèle ;

<?php
/*
 * Template Name: page-2-col
 */

get_header();

$i = 0;

$args = array(
    'posts_per_page' => 5,
    'paged' => 1
);

$the_query = new WP_Query($args);

if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {

        if( $i %2 == 1 ) {
            $the_query->the_post(); ?>
            <article class="post col-md-12">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p>
                    <?php echo get_the_excerpt(); ?>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                </p>
            </article>
            <?php
        }
        else {
            $the_query->the_post(); ?>
            <article class="post col-md-6">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p>
                    <?php echo get_the_excerpt(); ?>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                </p>
            </article>
            <?php $the_query->the_post(); ?>
            <article class="post col-md-6">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p>
                    <?php echo get_the_excerpt(); ?>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                </p>
            </article>
            <?php
        }
        ?>
        <?php
        $i++;
    }
}
else {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
get_footer();

Pour ajouter bootstrap, dans votre functions.php;

function learningWordPress_resources() {
    wp_enqueue_style('style', get_stylesheet_uri());
    wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', array('jquery'), '3.3.7', true );
    wp_enqueue_style( 'bootstrap-style', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
}

add_action('wp_enqueue_scripts', 'learningWordPress_resources');