Як у WordPress зробити спойлер або появу блоку при натисканні

Привіт:) У цьому пості покажу, як я у WordPress реалізував окремий блок на сторінці з можливістю ховати та показувати частину контенту по кнопці. Також додав можливість редагувати вміст блоку за допомогою зручного візуального редактора.

У коді файла ВордПрес-шаблона блок має HTML-розмітку

<div class="read-more-block">
    <div class="service-container">
        <input type="checkbox" class="read-more-block__checker" id="read-more-block__checker" />
        <div class="read-more-block__limiter">
            <?php echo get_field( 'read_more_block_repair_of_dishwashers_en' ); ?>
            <div class="limiter--bottom"></div>
        </div><!-- /.read-more-block__limiter -->
        <label for="read-more-block__checker" class="read-more-block__button"></label>
    </div><!-- /.service-container -->
</div><!-- /.read-more-block -->

Тут рядок

<?php echo get_field( 'read_more_block_repair_of_dishwashers_en' ); ?>

містить функцію get_filed() із плагіну ACF. Вона запитує значення мета-поля. За допомогою плагіну ACF було створене поле типу "Візуальний редактор":

У редакторі WordPress заповнення цього поля виглядає так:

Також додав декілька CSS-правил:

/* ----------------------------------------- */
/* ---- Read More Block -------------------- */
/* ----------------------------------------- */

.read-more-block {
    margin-bottom: 150px;
}

@media (max-width: 999.98px) {
    .read-more-block {
        margin-bottom: 60px;
    }
}

.read-more-block h2, 
.read-more-block h3, 
.read-more-block h4, 
.read-more-block h5, 
.read-more-block h6, 
.read-more-block p,
.read-more-block a, 
.read-more-block span {
    margin-bottom: 20px;

    font-family: Montserrat, sans-serif;
}

.read-more-block__limiter {
    max-height: 100px;
    overflow: hidden;
    position: relative;
}

.read-more-block__limiter .limiter--bottom {
    position: absolute;
    bottom: 0;
    /* background: linear-gradient(to bottom, rgb(255 217 29 / 0%), rgb(255 217 29 / 90%)); */
    width: 100%;
    height: 50px;
    opacity: 1;
    transition: 0.3s;
}

.read-more-block__checker {
    opacity: 0;
    position: absolute;
}

.read-more-block__checker:checked ~ .read-more-block__limiter {
    max-height: none;
}

.read-more-block__checker:checked ~ .read-more-block__limiter .limiter--bottom {
    opacity: 0;
    transition: 0.3s;
}

.read-more-block__checker ~ .read-more-block__button:before {
    /* content: "\2186"; */
    /* content: "\21A1"; */
    /* content: "\21CA"; */
    content: "\25BC";

    font-size: 25px;
}

.read-more-block__checker:checked ~ .read-more-block__button:before {
    content: "\25B2";
}

.read-more-block__button {
    cursor: pointer;
	display: block;
	text-align: center;
    color: #777;
}

На сайті блок з можливістю сховати/показати контент по кнопці виглядає так:

Приклад роботи блоку — https://kyiv-service.com.ua/remont-pralnikh-mashin/.

Михайло Петров
Михайло Петров

Мене звати Михайло. Я є WordPress-розробником. Створюю сайти з "нуля", розробляю плагіни, оновлюю наявний функціонал та підтримую готові проєкти.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *