WordPress - настраиваемая страница архива

Question

Я создал собственную страницу блога архива HTML, на которой я хотел бы размещать посты WordPress. Пользовательская страница имеет несколько разных макетов, и, следовательно, циклический просмотр постов просто восстанавливает всю страницу, на которой я стараюсь избегать. Я собираюсь пройтись по каждой записи, а затем поместить ее в соответствующую архивную колонку.

поэтому сообщение 1 переходит в строку 1, столбец 1, сообщение 2 переходит в строку 2, столбец 1, сообщение 3 переходит в строку 2, столбец 2, сообщение 4 переходит в строку 2, столбец 3 и т. Д. *

Если это невозможно, есть ли способ, которым я могу иметь один блок кода, например только первая строка и столбец, как показано ниже, и с каждой итерацией цикла PHP разметка CSS изменяется. например, на первой итерации col - это ширина 100%, на второй итерации - 50% ширина.

Это довольно сложно объяснить, так что, надеюсь, вышесказанное имеет некоторый смысл.

ниже приведен пример разметки.

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


<!-- ROW 1 -->
<div class="card mt-5 row-card-shadow">
            <div class="row no-gutters">
                <div class="col-md-6">
                    <img src="//placehold.it/450x350" class="img-fluid" alt="">
                </div>
                <!-- COL 2 POST-1 -->
                <div class="col-md-6">
                    <div class="card-block p-3">
                        <h4 class="card-title"><?php the_title(); ?></h4>
                        <p class="card-text"><?php the_excerpt(); ?></p>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        <a href="<?php the_permalink(); ?>" class="btn btn-sm btn-primary">Read more..</a>
                    </div>
                </div>
            </div>
        </div>



        <!-- ROW 2 -->
        <div class="row py-5 row-three-cards">
            <!-- COL 1 POST-2 -->
            <div class="col-md-4 d-flex align-items-stretch">
                <div class="card" style="width: auto;">
                    <img class="card-img-top" src="//placehold.it/200" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">TEST</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-sm btn-primary">Read more..</a>
                    </div>
                </div> 
            </div>
            <!-- COL 2 POST-3 -->
            <div class="col-md-4 d-flex align-items-stretch">
                <div class="card" style="width: auto;">
                    <img class="card-img-top" src="//placehold.it/200" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-sm btn-primary">Read more..</a>
                    </div>
                </div> 
            </div>
            <!-- COL 3 POST-4 -->
            <div class="col-md-4 d-flex align-items-stretch">
                <div class="card" style="width: auto;">
                    <img class="card-img-top" src="//placehold.it/200" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-sm btn-primary">Read more..</a>
                    </div>
                </div> 
            </div>                
        </div>
   <?php endwhile; endif; ?>

Answer 1

Как я вижу, вы хотите разделить сообщения на разные категории.Таким образом, вы можете изменить свою разметку, которая создаст несколько столбцов, которые будут определены с некоторыми классами CSS (вы можете установить условие, которое будет проверять, находится ли текущий пост в категории, затем добавить класс CSS или что-то вроде этого).Если вы хотите разделить их вне одного цикла Wordpress, вы можете использовать несколько циклов WordPress, чтобы создать собственный шаблон для различных категорий.

Здесь приведена ссылка на документацию wordpress loop .Надеюсь, что это поможет вам.

Answer 2

Это то, что я нашел в WP Beginner, но я изменяю его по вашему желанию.

Я новичок в разработке WordPress.Поэтому, пожалуйста, проверьте это на localhost, прежде чем использовать на производстве.

    <?php

    $archieve_post = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>-1)); ?>

    <?php if ( $archieve_post->have_posts() ) : ?>

    <ul>
        <?php while ( $archieve_post->have_posts() ) : $archieve_post->the_post(); ?>
            <li>
<div class="card mt-5 row-card-shadow">
            <div class="row no-gutters">
                <div class="col-md-6">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
<div class="col-md-6">
                    <div class="card-block p-3">
                        <h4 class="card-title"><?php the_title(); ?></h4>
                        <p class="card-text"><?php the_excerpt(); ?></p>
                        <a href="<?php the_permalink(); ?>" class="btn btn-sm btn-primary">Read more..</a>
                    </div>
                </div>
            </div>
        </div>
        <?php endwhile; ?>
    </ul>

        <?php wp_reset_postdata(); ?>

    <?php else : ?>
        <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
    <?php endif; ?>