Дисплей WordPress l oop в 2 колонках

Question

Я знаю, что этот вопрос задавался ранее. Я проверил несколько ответов на этом сайте, например:

Wordpress l oop с различными bootstrap столбцами

https://wordpress.stackexchange.com/questions/222278/how-to-separate-posts-loop-in-to-two-columns/222281

... но я не могу понять, как интегрировать ответы с моим кодом (при условии, что это возможно).

Я хочу отобразить список категорий и связанных с ними сообщений на странице.

Код, который я использую, работает нормально, НО отображает результаты в одном столбце вниз по странице:

Я хочу разбить экран на 2 столбца, как показано на рисунке ниже, если это возможно:

Код, который я использую (в настоящее время размещен на новой странице шаблон) выглядит следующим образом:

<?php

/*
 * Template Name: Alphabetical List
*/

get_header(); 

// Grab all the categories from the database that have posts.
$categories = get_terms( 'category', 'orderby=name&order=ASC');
// Loop through categories
foreach ( $categories as $category ) {
// Display category name
echo '<h2 class="post-title">' . $category->name . '</h2>';
echo '<div class="post-list">';
// WP_Query arguments
$args = array(
  'cat' => $category->term_id,
  'order' => 'ASC',
  'orderby' => 'title',
);

// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
?>

<p><a href="<?php the_permalink();?>"><?php the_title(); ?></a></p>
<?php
} // End while
} // End if
echo '</div>';
// Restore original Post Data
wp_reset_postdata();
} // End foreach

get_footer(); 
?>

Хотите знать, если кто-нибудь может помочь мне получить этот код для отображения l oop результатов в 2 столбцах.

Большое спасибо.

ОБНОВЛЕНИЕ К ВОПРОСУ

Карл, спасибо за ваш ответ. Ваш сценарий работает, но с небольшой проблемой:

Категории / Связанные сообщения отображаются в 2 столбцах, но в середине отображения данных появляется «пробел / пробел» (см. Изображение ниже):

Я немного добавил в ваш код, чтобы я мог отобразить пользовательское поле, которое я вставил в каждое сообщение. Я не уверен, что это вызвало проблему.

Измененный код (изменения происходят сразу после $ query-> the_post ();):

<?php

/*
* Template Name: Alphabetical List
*/
get_header();
?>

<div style="height:100px"></div>

<?php
// Grab all the categories from the database that have posts.
$categories = get_terms( 'category', 'orderby=name&order=ASC');
// Loop through categories
echo "<div class='new-column'>";
$counter = 0;
foreach ( $categories as $category ) {
if($counter % 4 == 0 && $counter !=0){
   echo "<div class='new-column'>";
}
// Display category name
echo '<h2 class="post-title">' . $category->name . '</h2>';
echo '<div class="post-list">';
// WP_Query arguments
$args = array(
'cat' => $category->term_id,
'order' => 'ASC',
'orderby' => 'title',
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();

$customfieldvalue = get_post_meta($post->ID, "PDF", true);

?>
<p><a href="<?php echo $customfieldvalue; ?>" target="_blank"><?php 
the_title(); ?></a></p>

<?php
} // End while
} // End if
echo '</div>';
// Restore original Post Data
wp_reset_postdata();
$counter++;
if($counter % 4 == 0){
echo "</div>";
}
} // End foreach
if($counter % 4 != 0){
echo "</div>";
}
get_footer(); 
?>

Answer 1

Я использовал bootstrap классы (строка, столбец 6). Проверил размер массива категорий и использовал 2 переменные - одну в качестве счетчика и другую для проверки, является ли столбец первым или вторым.

<?php

/*
 * Template Name: Alphabetical List
*/

get_header(); 

// Grab all the categories from the database that have posts.
$categories = get_terms( 'category', 'orderby=name&order=ASC');

//get size of category
$catSize = sizeof($categories);
$j = 1;
$n = 1;
// Loop through categories
foreach ( $categories as $category ) {
    if($n == 1){
        echo '<div class="row">';
    }
    echo'<div class="col-6">';
        // Display category name
        echo '<h2 class="post-title">' . $category->name . '</h2>';
        echo '<div class="post-list">';
        // WP_Query arguments
        $args = array(
          'cat' => $category->term_id,
          'order' => 'ASC',
          'orderby' => 'title',
        );

        // The Query
        $query = new WP_Query( $args );
        // The Loop
        if ( $query->have_posts() ) {
            while ( $query->have_posts() ) {
            $query->the_post();
            ?>

            <p><a href="<?php the_permalink();?>"><?php the_title(); ?></a></p>
            <?php
            } // End while
        } // End if
    echo '</div></div>';

        if($n == 1){
            if($j == $catSize){
                echo '<div class="col-6"></div>
                </div>';
            }
            else{
                $n = 2;
            }
        }
        else{
            echo '</div>';
            $n =1;
        }
        $j++;
    }

// Restore original Post Data
wp_reset_postdata();
} // End foreach

get_footer(); 
?>

Answer 2

Попробуйте, я использовал оператор по модулю "%" для группировки циклов в 4, он будет создавать новый столбец каждые 4 цикла. УБЕДИТЕСЬ, ЧТО ВЫ ДОБАВЛЯЕТЕ CSS К классу new-column, чтобы расположить его как столбцы.

<?php
/*
* Template Name: Alphabetical List
*/
get_header();
// Grab all the categories from the database that have posts.
$categories = get_terms( 'category', 'orderby=name&order=ASC');
// Loop through categories
echo "<div class='new-column'">;
$counter = 0;
foreach ( $categories as $category ) {
   if($counter % 4 == 0 && $counter !=0){
       echo "<div class='new-column'">;
    }
// Display category name
echo '<h2 class="post-title">' . $category->name . '</h2>';
echo '<div class="post-list">';
// WP_Query arguments
$args = array(
    'cat' => $category->term_id,
    'order' => 'ASC',
    'orderby' => 'title',
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
?>
<p><a href="<?php the_permalink();?>"><?php the_title(); ?></a></p>
<?php
} // End while
} // End if
echo '</div>';
// Restore original Post Data
wp_reset_postdata();
$counter++;
if($counter % 4 == 0){
  echo "</div>";
}
} // End foreach
if($counter % 4 != 0){
 echo "</div>";`enter code here`
}
get_footer(); 
?>