Вопрос или проблема
У меня есть гибкое поле с контентом в WordPress, которое добавляет поле под названием ‘boxes’, внутри коробок есть повторяющееся поле, которое называется ‘box_content’, внутри него всего два других поля для заполнения контентом, но проблема, с которой я сталкиваюсь, заключается в том, что, когда я добавляю коробки на свою страницу WordPress более одного раза, PHP, который управляет классом, читает всю страницу и применяет класс ко каждой коробке, которую он видит, я не хочу этого, потому что мне нужно иметь возможность добавлять несколько полей коробок с 1, 2 или тремя коробками, и, например, если у меня есть поле коробки с тремя коробками, примененный класс будет col-md-4, но если у меня есть поле коробки с 2, и отдельное с одной, этот класс все еще применяется, когда он должен быть col-md-6 и col-12, любая помощь была бы очень признательна.
<?php
$boxContent = get_sub_field('box_content');
$bgColour = get_sub_field('background_colour');
$boxContentIntro = get_sub_field('intro_text', 'box_content');
$bgClass = "";
if ($bgColour == 'dark') {
$bgClass = "bg-secondary";
} elseif ($bgColour == 'light-grey') {
$bgClass = "bg-light";
} else {
$bgClass = "";
}
?>
<?php if ($boxContent) : ?>
<div class="wrapper <?= $bgClass; ?>" id="boxWrapper">
<div class="container">
<div class="row">
<?php if ($boxContentIntro) : ?>
<div class="col-12 mb-3">
<?= $boxContentIntro; ?>
</div>
</div>
<div class="row">
<?php endif; ?>
<?php
foreach ($boxContent as $bc) :
$colClass = "";
if ($bc == 2) {
$colClass = " col-md-6";
} elseif ($bc >= 3) {
$colClass = " col-md-4";
} else {
continue;
}
?>
<div class="col-12<?= $colClass; ?>">
<?php
echo wp_get_attachment_image($bc['box_image'], 'full', false, array('class' => 'mb-3 w-100'));
?>
<div class="mt-2">
<?= $bc['box_text']; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<?php endif; ?>
.
Ответ или решение
Для решения проблемы с добавлением классов в полях гибкого контента (Flexible Content) в WordPress, где нужно динамически менять размер колонок в зависимости от количества вложенных элементов, важно корректно обрабатывать данные и размечать их в соответствии с заданными условиями. Давайте разберем предложенный код и внесем необходимые изменения, чтобы достичь желаемого результата.
Проблема:
Когда вы добавляете несколько блоков, PHP-код применяет класс к каждой колонке по умолчанию, не учитывая фактическое количество контейнеров. Это значит, что если в одном поле три блока, а в другом только два, оба будут обрабатываться идентично.
Решение:
Для точного назначения классов на основе количества блоков, которые вы добавляете, нужно изменить структуру кода, чтобы он мог считать количество блоков в каждом экземпляре box_content. Мы будем использовать переменную для подсчёта количества блоков и динамически задавать соответствующий класс CSS.
Вот внесенные изменения:
<?php
$boxContent = get_sub_field('box_content');
$bgColour = get_sub_field('background_colour');
$boxContentIntro = get_sub_field('intro_text', 'box_content');
$bgClass = "";
if ($bgColour == 'dark') {
$bgClass = "bg-secondary";
} elseif ($bgColour == 'light-grey') {
$bgClass = "bg-light";
} else {
$bgClass = "";
}
if ($boxContent) :
$boxCount = count($boxContent);
$colClass = "";
// Определяем класс в зависимости от количества блоков
if ($boxCount == 1) {
$colClass = "col-md-12";
} elseif ($boxCount == 2) {
$colClass = "col-md-6";
} elseif ($boxCount >= 3) {
$colClass = "col-md-4";
}
?>
<div class="wrapper <?= $bgClass; ?>" id="boxWrapper">
<div class="container">
<div class="row">
<?php if ($boxContentIntro) : ?>
<div class="col-12 mb-3">
<?= $boxContentIntro; ?>
</div>
<?php endif; ?>
</div>
<div class="row">
<?php
foreach ($boxContent as $bc) :
?>
<div class="<?= $colClass; ?>">
<?php
echo wp_get_attachment_image($bc['box_image'], 'full', false, array('class' => 'mb-3 w-100'));
?>
<div class="mt-2">
<?= $bc['box_text']; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<?php endif; ?>Пояснения к изменениям:
-
Подсчет блока: Мы используем
count($boxContent)для получения количества блоков. Это позволит нам динамически задать классcol-md-*в зависимости от количества добавляемых блоков. -
Переменная класса: Вместо того, чтобы использовать логическое определение в цикле, мы определяем класс колонок до цикла. Это упрощает добавление блоков на странице.
-
Гибкая архитектура: Такой подход увеличивает гибкость кода, упрощая его дальнейшую модификацию и поддержку. Теперь добавление новых блоков не потребует редизайна логики отображения.
С применением этих изменений ваш код будет динамически адаптироваться под количество блоков в каждом гибком контенте, что отдаст корректное значение классов каждой колонке.