Категории пользовательских типов сообщений, перечисленные в двух столбцах

Question

У меня проблема, когда у меня есть страница, которая выглядит как прикрепленная.

Я использую следующий код для достижения этого

<?php
                    $args = array(
                        'type'                     => 'episodes',
                        'child_of'                 => 0,
                        'parent'                   => '',
                        'orderby'                  => 'name',
                        'order'                    => 'ASC',
                        'hide_empty'               => 1,
                        'hierarchical'             => 1,
                        'taxonomy'                 => 'episode_categories',
                        'pad_counts'               => false );
                    $categories = get_categories($args);


                    foreach ($categories as $category) {
                        $url = get_term_link($category);?>

                        <div class="categories__row flex xs:block space-x-10 xs:space-x-0 xs:space-y-6">
                            <div class="categories__item w-1/2 xs:w-full">
                                <div class="article text-2xl sm:text-xl xxs:text-base">
                                    <h2 class="text-4xl sm:text-28px xxs:text-xl font-bold leading-none"><a href="<?php echo $url;?>"><?php echo $category->name; ?></a></h2>
                                    <p>There are <strong>22</strong> podcasts in this category</p>
                                </div><!-- /.article -->
                            </div>

                            <div class="categories__item w-1/2 xs:w-full">
                                <div class="article text-2xl sm:text-xl xxs:text-base">
                                    <h2 class="text-4xl sm:text-28px xxs:text-xl font-bold leading-none"><a href="<?php echo $url;?>"><?php echo $category->name; ?></a></h2>
                                    <p>There are <strong>22</strong> podcasts in this category</p>
                                </div><!-- /.article -->
                            </div>
                        </div>
                        <?php
                    }
                    ?>

Однако я хочу достичь умение считать и l oop категорий слева направо и так далее. Итак, в строке 1 мы должны увидеть дополненную реальность, а затем бизнес. Вторая строка должна быть F1 и VR.

Я просмотрел несколько похожих сообщений в Stack Overflow, но ни один из них не соответствовал этому требованию. Есть ли у кого-нибудь предложения о том, как я могу этого добиться?

Answer 1

Я не тестировал ваш код на экземпляре WordPress, и, поскольку я не уверен в CSS, который вы используете, я не уверен, насколько просто это было бы реализовать. Но здесь может быть полезна комбинация перемещения позиции для сетки foreach и, возможно, CSS.

Положение foreach в предыдущем примере аналогично тому, что я сделал бы. Я думаю, что элементы не попадают в новую строку, потому что вам может не хватать свойства css в вашем вспомогательном классе flex. Вы используете flex-wrap: wrap;? Похоже, вам может потребоваться это добавить. Если это по-прежнему не работает, значит, есть кое-что еще. , Я предоставил (очень приблизительный) пример на Codepen со stati c HTML.

Надеюсь, это поможет! Не стесняйтесь кричать в ответ, если это неправильно ??

Answer 2

Это не проверено, но я думаю, вам просто нужно переместить l oop внутрь контейнера строки, как показано ниже:

<?php
$args = array(
  'type'                     => 'episodes',
  'child_of'                 => 0,
  'parent'                   => '',
  'orderby'                  => 'name',
  'order'                    => 'ASC',
  'hide_empty'               => 1,
  'hierarchical'             => 1,
  'taxonomy'                 => 'episode_categories',
  'pad_counts'               => false
);

$categories = get_categories($args);
?>

<div class="categories__row flex xs:block space-x-10 xs:space-x-0 xs:space-y-6">

  <?php foreach ($categories as $category) : ?>

    <div class="categories__item w-1/2 xs:w-full">
      <div class="article text-2xl sm:text-xl xxs:text-base">
        <h2 class="text-4xl sm:text-28px xxs:text-xl font-bold leading-none">
          <a href="<?php echo get_term_link($category); ?>">
            <?php echo $category->name; ?>
          </a>
        </h2>
        <p>There are <strong>22</strong> podcasts in this category</p>
      </div><!-- /.article -->
    </div>

  <?php endforeach; ?>

</div> <!-- END .categories__row -->