Скрыть или показать кнопку "Читать далее" по области содержания

Вопрос или проблема

Я пытаюсь скрыть кнопку “читать дальше” в зависимости от количества символов, кнопка должна появляться только на длинных постах. Но так как я также управляю кнопкой с помощью CSS, возможно, мне нужно скрыть ее на основе настройки высоты содержимого, а не количества символов. (Я не уверен в этом)

Прежде всего, количество символов проверяется с помощью этого кода в functions.php

add_filter('excerpt_length', 'my_excerpt_length');
function my_excerpt_length($length) {
return 100;

Файл content.php содержит резюме и кнопку

    <div class="news-main">
        <?php the_excerpt(); ?>
    </div>

Я открываю другой div под ним и добавляю кнопку.

<div class="news-read">
<a href="<?php echo get_permalink($post->ID); ?>" target="_blank" rel="noopener" class="Read">Read More</a> 
</div>

Затем я проверяю news-main, который является областью резюме, в CSS

.news-main { 
overflow: hidden;
max-height:255px
}

Цель этого CSS – обрезать резюме в конце строки. Таким образом, когда лимит символов достигнут, полстроки не отображается внизу.

Причина, по которой я открыл класс “news-read” в content.php, заключается в возможности определить это CSS. Потому что, если я не перенесу кнопку в другой div, настройка высоты в CSS полностью скрывает кнопку. Я понимаю, что кнопка должна быть как-то связана с количеством символов или скрыта в соответствии с настройкой высоты в CSS. Потому что кнопка находится в совершенно другом div.

Как я могу как-то скрыть эту кнопку в соответствии с настройкой высоты или количеством символов?

Это проверяет количество символов и скрывает кнопку на стороне сервера в content.php:

<?php
$excerpt = get_the_excerpt();
$excerpt_length = strlen($excerpt);
$excerpt_limit = 100; // Соответствует пределу, установленному в functions.php
?>

<div class="news-main">
    <?php the_excerpt(); ?>
</div>

<?php if ($excerpt_length >= $excerpt_limit) : ?>
    <div class="news-read">
        <a href="<?php echo get_permalink($post->ID); ?>" target="_blank" rel="noopener" class="Read">Read More</a>
    </div>
<?php endif; ?>

Ответ или решение

Вопрос о скрытии или отображении кнопки "Читать далее" в зависимости от длины контента — частая задача в веб-разработке, которая требует балансировки между серверным и клиентским решениями. Нужно определить, когда контент достаточно длинный, чтобы показать кнопку, и когда её скрыть. Эта задача может иметь несколько решений, в зависимости от того, какие технологии и методологии вы предпочитаете использовать в вашем веб-проекте.

Теория:

При работе с динамическими данными на веб-страницах, вы можете управлять отображением элементов двумя основными способами: на стороне сервера и на стороне клиента. Каждый из этих подходов имеет свои преимущества.

Серверное управление: Все вычисления и решения принимаются на сервере перед тем, как загружать страницу для пользователя. Это означает, что любые изменения в структуре страницы будут происходить до её отображения в браузере. Это уменьшает нагрузку на клиента и позволяет использовать вычислительные мощности сервера для более точных расчетов, таких как подсчет количества символов в тексте. В вашем случае, это более предпочитаемый метод для контроля за отображением кнопки "Читать далее", основываясь на длине текста.
Клиентское управление: Этот подход основан на использовании JavaScript или CSS для изменений, которые происходят после загрузки страницы. Это может быть полезно для более интерактивных решений, например, если вы планируете взаимодействовать с пользователем в реальном времени, после того как они загружают страницу.

Пример:

Рассмотрим предложенный вами код и подойдем к решению с двух сторон — серверной и клиентской:

Серверное решение:

Вы уже используете фильтр excerpt_length в functions.php для ограничения длины текста, который выводится. Также вы предложили проверку длины в файле content.php, чтобы определить, отображать или нет кнопку "Читать далее":

<?php
$excerpt = get_the_excerpt();
$excerpt_length = strlen($excerpt);
$excerpt_limit = 100; // Должен совпадать с лимитом в functions.php
?>

<div class="news-main">
    <?php the_excerpt(); ?>
</div>

<?php if ($excerpt_length >= $excerpt_limit) : ?>
    <div class="news-read">
        <a href="<?php echo get_permalink($post->ID); ?>" target="_blank" rel="noopener" class="Read">Читать далее</a>
    </div>
<?php endif; ?>

Этот подход позволяет гарантировать, что кнопка не будет отображаться, если текст короче установленного лимита, обеспечивая стандартное серверное решение.

Клиентское решение:

На клиентской стороне ваш CSS задает максимальную высоту для news-main. Вы можете использовать JavaScript для определения высоты элемента и сравнения её с порогом, чтобы решить, отображать ли кнопку.

Пример такого решения:

document.addEventListener("DOMContentLoaded", function() {
    var newsMain = document.querySelector('.news-main');
    var readMoreBtn = document.querySelector('.news-read');
    var maxHeight = 255; // значение из CSS

    if (newsMain.scrollHeight <= maxHeight) {
        readMoreBtn.style.display = 'none';
    }
});

Этот скрипт проверяет, превышает ли фактическая высота содержимого указанное значение max-height, и скрывает кнопку в случае, если контент помещается в отведенное пространство.

Применение:

Важно учитывать, какой подход лучше подходит к вашей конкретной ситуации. Серверный подход имеет преимущество в оптимизации для SEO, поскольку поисковые системы будут полагаться на данные, отрендеренные на сервере. Клиентский подход может предложить более гибкое поведение и динамичную интерпретацию данных.

В конечном счете, выбирать между клиентским и серверным управлением нужно исходя из нагрузки на сервер, желания сохранить взаимодействие на стороне клиента, а также учитывая, насколько важна скорость загрузки страницы для конечных пользователей.

Подводя итог, ваши действия могут быть следующими:

Используйте серверное решение для начальной проверки текста и отображения кнопки, обеспечив консистентность и надежность.
Расширьте функционал с помощью клиента, чтобы повысить интерактивность и адаптивность интерфейса, например, если планируете реализовать динамическое загружение контента или изменения макета на лету.

Этот сбалансированный подход будет соответствовать как требованиям к функциональности приложения, так и удобству пользователя.

Скрыть или показать кнопку “Читать далее” по области содержания

Вопрос или проблема

Ответ или решение