разделить значения пользовательских полей в div каждые два значения

Вопрос или проблема

У меня есть этот HTML-разметка для сортировки некоторых данных

<div class="row">
<div class="col-xs-2">
  <img src="https://wordpress.stackexchange.com/questions/190691/images/member-schools/ms1.jpg" class="img-responsive">
</div>
<div class="col-xs-4">
  <h4>Американская международная школа - Восток</h4>
</div>
<div class="col-xs-2">
  <img src="images/member-schools/ms2.jpg" class="img-responsive">
</div>
<div class="col-xs-4">
  <h4>Довер Американская международная школа</h4>
</div>

Я извлекаю данные из повторяющегося группового метабокса, который я использую из CMB2

Это код для зарегистрированного метабокса

function schools() {

// Начните с подчеркивания, чтобы скрыть поля из списка пользовательских полей
$prefix = 'schools_';

/**
 * Повторяющиеся группы полей
 */
$schools= new_cmb2_box( array(
    'id'           => $prefix . 'metabox',
    'title'        => __( 'школы', 'cmb2' ),
    'object_types' => array( 'page', ),
    'show_on'      => array( 'key' => 'id', 'value' => 6 ),
    'closed'     => true,
) );

$group_field_id = $schools->add_field( array(
    'id'          => $prefix . 'field',
    'type'        => 'group',
    'options'     => array(
        'group_title'   => __( 'Слайд {#}', 'cmb2' ), // {#} заменяется номером строки
        'add_button'    => __( 'Добавить еще один слайд', 'cmb2' ),
        'remove_button' => __( 'Удалить слайд', 'cmb2' ),
        'sortable'      => true, // бета
    ),
) );

$schools->add_group_field( $group_field_id, array(
    'name' => __( 'Фото', 'cmb2' ),
    'id'   => 'photo',
    'type' => 'file',
) );

$schools->add_group_field( $group_field_id, array(
    'name' => __( 'Имя', 'cmb2' ),
    'id'   => 'name',
    'type' => 'text',
) );}

Я извлекаю данные через этот код

$schools = get_post_meta( get_the_ID(), 'schools_field', true );

где $schools – это массив, который содержит изображение и заголовок для каждой записи, через который я могу проходить в цикле, чтобы извлечь значения.
Мой вопрос: как я могу добавить <div class="row"> каждые два элемента из этого массива, потому что мне нужна строка для каждых двух записей

ИЗМЕНЕНИЕ: результат var_dump

array(3) {
    [0] => array(3) {
        ["photo_id"]    => string(2) "89"
        ["photo"]       => string(56) "http://localhost/NCSR/wp-content/uploads/2015/06/ms3.jpg"
        ["name"]        => string(8) "Школа 1" 
    }
    [1] => array(3) {
        ["photo_id"]    => string(2) "88"
        ["photo"]       => string(56) "http://localhost/NCSR/wp-content/uploads/2015/06/ms2.jpg"
        ["name"]        => string(8) "Школа 2"
    }
    [2] => array(3) {
        ["photo_id"]    => string(2) "87"
        ["photo"]       => string(56) "http://localhost/NCSR/wp-content/uploads/2015/06/ms1.jpg"
        ["name"]        => string(8) "Школа 3"
    } 
}

Я нашел способ сделать это, оказалось довольно просто, вот что я сделал

$Aschools = get_post_meta( get_the_ID(), 'american_member_schools_field', true );

$i = 0;

$entries = count($Aschools);

foreach ( (array) $Aschools as $key => $Aschool ) {

  $logo = $Aname="";

  $i++;

  if ( isset( $Aschool['name'] ) )
      $Aname =  $Aschool['name'] ;

  if ( isset( $Aschool['logo_id'] ) ) {
      $logo = wp_get_attachment_image( $Aschool['logo_id'], 'full', null, array(
          'class' => 'img-responsive',
      ) );
  }

  // Сделайте что-то с данными

  if ($i & 1) {
    echo '<div class="row row-eq-height">';
    echo '<div class="col-xs-2">';
    echo $logo;
    echo '</div>';
    echo '<div class="col-xs-4">';
    echo '<h4>' . $Aname . '</h4>';
    echo '</div>';
  } elseif ($i & 1 && $i == $entries) {
    echo '<div class="row row-eq-height">';
    echo '<div class="col-xs-2">';
    echo $logo;
    echo '</div>';
    echo '<div class="col-xs-4">';
    echo '<h4>' . $Aname . '</h4>';
    echo '</div>';
    echo '</div>';
  } else {
    echo '<div class="col-xs-2">';
    echo $logo;
    echo '</div>';
    echo '<div class="col-xs-4">';
    echo '<h4>' . $Aname . '</h4>';
    echo '</div>';
    echo '</div>';
  }
}

display_schools($string);

function display_schools($string) {
    $counter = 0;
    $i = 0;
    $len = count($string);
    foreach($string as $school) {
        if($counter == 0) {
            echo '<div class="row">';
        }
        ?>
            <div class="col-xs-2">
              <img src="https://wordpress.stackexchange.com/questions/190691/<?php echo $school["photo']; ?>" class="img-responsive photo_id_<?php echo $school['photo_id']; ?>">
            </div>
            <div class="col-xs-4">
              <h4><?php echo $school['name']; ?></h4>
            </div>
        <?php
        if($counter == 1 || $i == $len - 1) {
            echo '</div>';
            $counter = 0;
        } else {
            $counter = $counter + 1;    
        }

        $i++;
    }
}

Ответ или решение

Разделение значений пользовательских полей на блоки по два значения

Когда вы работаете с пользовательскими полями в WordPress, используя плагин CMB2 для создания повторяемых групп, возникает необходимость организовать вывод данных таким образом, чтобы каждая пара элементов отображалась в отдельном ряду. Вы уже сделали важные шаги в этом направлении, и ниже я изложу наиболее эффективный способ реализации этой задачи.

Подход к решению

Исходя из вашего примера, вы получаете массив данных о школах, включающий изображения и названия. Наша задача состоит в том, чтобы динамически разметить эти данные так, чтобы каждая пара значений располагалась в рамках одного блока <div class="row">. Это обеспечит правильное форматирование и визуальное восприятие.

Структура кода

Ниже представлен усовершенствованный пример кода, который осуществляет описанное:

function display_schools($schools) {
    $total_entries = count($schools);
    for ($i = 0; $i < $total_entries; $i++) {
        // Если индекс является четным, открываем новый блок row
        if ($i % 2 == 0) {
            echo '<div class="row">';
        }

        // Получаем данные о текущей школе
        $school = $schools[$i];
        $logo = wp_get_attachment_image($school['photo_id'], 'full', null, array('class' => 'img-responsive'));
        $name = isset($school['name']) ? $school['name'] : 'Не указано';

        // Генерируем разметку для текущей школы
        echo '<div class="col-xs-2">' . $logo . '</div>';
        echo '<div class="col-xs-4"><h4>' . esc_html($name) . '</h4></div>';

        // Если индекс является нечетным или мы на последнем элементе, закрываем блок row
        if ($i % 2 == 1 || $i == $total_entries - 1) {
            echo '</div>'; // Закрываем div.row
        }
    }
}

// Пример вызова функции
$schools = get_post_meta(get_the_ID(), 'schools_field', true);
display_schools($schools);

Анализ кода

  1. Итерация по массиву: С помощью цикла for мы проходим по всем элементам массива $schools, чтобы динамически выводить информацию о каждой школе.

  2. Проверка четности индекса: Используем оператор % для проверки, является ли индекс четным. При четном индексе (например, 0, 2, 4 и т. д.) мы открываем новый контейнер div.row.

  3. Вывод данных: Для каждого элемента массива мы получаем логотип и название школы. Если название отсутствует, выводится стандартное сообщение "Не указано".

  4. Закрытие div.row: После вывода двух элементов мы проверяем, является ли индекс нечетным или это последний элемент. Если одно из условий выполняется, закрываем контейнер div.row.

Заключение

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

Если у вас возникнут дополнительные вопросы или потребуется персонализированная помощь, не стесняйтесь обращаться. Удачи в вашей работе с пользовательскими полями и отображением данных!

Оцените материал
Добавить комментарий

Капча загружается...