当php中没有内容时更改背景颜色

Question

I am working on a php/wordpress website in which I want to hide the background-color when there is no content.

The php code which I am using is:

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

The css code for the above html/php code is:

.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;
}

Problem Statement:

I am wondering what changes I need to make in the php code above so that where there is no content inside h1 tag, the background-color should be background-color: rgba(0, 0, 0, 0);

At this moment where there is content inside h1 tag, the background-color is background-color: rgb(255, 255, 255);

Answer 1

You can use the following:

<?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>

With the following additional CSS:

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