изменить цвет фона, когда в php нет содержимого

Question

Я работаю над сайтом php / wordpress, на котором я хочу скрыть цвет фона, когда контента нет.

Код php, который я использую:

<div class="featured-block__content">
    <h1 class="featured-block__tag"><?php echo esc_html( explode('|',get_the_title())[1]); ?></h1>
</div>

Код CSS для приведенного выше HTML / PHP-кода:

.featured-block__content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 85px;
    background-color: rgb(255, 255, 255);
    opacity: 0.831;
    z-index: 3;
    position: relative;
    bottom: 85px;
}

Постановка задачи:

Мне интересно, какие изменения мне нужно внести в приведенный выше код php, чтобы там, где нет содержимого внутри тега h1, цвет фона должен был быть background-color: rgba(0, 0, 0, 0);

В этот момент, когда внутри тега h1 есть контент, цвет фона равен background-color: rgb(255, 255, 255);

Answer 1

Чтобы PHP контролировал CSS, вам нужно вывести новое правило в DOM, на которое может ориентироваться CSS.

В этом случае вы можете добавить класс к <h1>, просто echo выбрав желаемое имя класса, когда нет содержимого. esc_html() возвращает пустую строку, поэтому вы можете выполнить проверку по "".

Следующее добавляет класс black, когда этот контент отсутствует:

<h1 class="featured-block__tag" <?php if (esc_html(explode('|',get_the_title())[1]) === "") { echo "black"; } ?>>
  <?php echo esc_html(explode('|',get_the_title())[1]); ?>
</h1>

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

.black {
  background-color: rgb(0, 0, 0);
}

Answer 2

Вы можете попробовать

<h1 class="<?php esc_html( explode('|',get_the_title())[1]) === '' ? 'featured-block__tag bg-class1' : 'featured-block__tag'?>"><?php echo esc_html( explode('|',get_the_title())[1]); ?></h1>

и css

.bg-class1{
background-color: #yourcolor
}

Answer 3

Вы можете использовать следующее:

<?php
    $h1_content = esc_html(explode('|', get_the_title())[1]);
?>

<div class="featured-block__content <?= trim($h1_content) === '' ? 'no-h1' : ''; ?>">
    <h1 class="featured-block__tag"><?= $h1_content; ?></h1>
</div>

Со следующими дополнительными CSS:

.featured-block__content.no-h1 {
    background-color: rgba(0, 0, 0, 0);
}