Вопрос или проблема
У меня есть этот 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);
Анализ кода
-
Итерация по массиву: С помощью цикла
for
мы проходим по всем элементам массива$schools
, чтобы динамически выводить информацию о каждой школе. -
Проверка четности индекса: Используем оператор
%
для проверки, является ли индекс четным. При четном индексе (например, 0, 2, 4 и т. д.) мы открываем новый контейнерdiv.row
. -
Вывод данных: Для каждого элемента массива мы получаем логотип и название школы. Если название отсутствует, выводится стандартное сообщение "Не указано".
-
Закрытие div.row: После вывода двух элементов мы проверяем, является ли индекс нечетным или это последний элемент. Если одно из условий выполняется, закрываем контейнер
div.row
.
Заключение
Описанный вами процесс отображения значений ваших пользовательских полей был успешно оптимизирован и организован. Данный подход обеспечивает чистоту кода и визуальную структуру HTML, а также позволяет легко вносить изменения и расширения в будущем.
Если у вас возникнут дополнительные вопросы или потребуется персонализированная помощь, не стесняйтесь обращаться. Удачи в вашей работе с пользовательскими полями и отображением данных!