Как сделать карточки статей кликабельными на WordPress
Создание кликабельных карточек статей на WordPress-сайте может значительно улучшить пользовательский опыт и повысить вовлеченность посетителей. В этой статье мы рассмотрим JavaScript-решение, которое позволит сделать карточки статей полностью кликабельными, включая динамически подгружаемый контент. Это решение особенно полезно для сайтов, созданных с помощью популярного конструктора Elementor.
Почему это важно?
По умолчанию в WordPress и Elementor кликабельным является только заголовок статьи или специально настроенная кнопка. Однако пользователям гораздо удобнее, когда они могут кликнуть в любое место карточки для перехода к полной статье. Кроме того, при использовании функций бесконечной прокрутки или кнопки «Загрузить еще» возникает проблема: новые карточки, подгруженные динамически, не наследуют поведение кликабельности.
Решение: JavaScript-скрипт
Чтобы решить эту проблему, мы можем использовать следующий JavaScript-код:
document.addEventListener('DOMContentLoaded', function() {
// Находим родительский элемент, который содержит все посты
const postsContainer = document.querySelector('.elementor-posts-container');
if (postsContainer) {
postsContainer.addEventListener('click', function(event) {
// Находим ближайший родительский элемент с классом elementor-post
const post = event.target.closest('.elementor-post');
if (post) {
const link = post.querySelector('.elementor-post__title a');
if (link) {
window.location.href = link.getAttribute('href');
}
}
});
}
// Устанавливаем курсор pointer для всех постов
function setCursorPointer() {
const posts = document.querySelectorAll('.elementor-post');
posts.forEach(post => {
post.style.cursor = 'pointer';
});
}
// Вызываем функцию сразу для изначальных постов
setCursorPointer();
// Наблюдатель за изменениями в DOM
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList') {
setCursorPointer();
}
});
});
// Настройка наблюдателя
const config = { childList: true, subtree: true };
// Начинаем наблюдение
observer.observe(postsContainer, config);
});
Как работает этот скрипт?
- Скрипт ищет контейнер с постами, используя класс
.elementor-posts-container. - Добавляет обработчик клика на весь контейнер.
- При клике на любой элемент внутри контейнера, скрипт находит ближайший родительский элемент с классом
.elementor-post. - Затем он ищет ссылку внутри заголовка поста и перенаправляет пользователя по этой ссылке.
- Устанавливает стиль курсора
pointerдля всех постов, чтобы визуально показать, что они кликабельны. - Использует MutationObserver для отслеживания изменений в DOM, чтобы применить стиль курсора к новым, динамически загруженным постам.
Как использовать этот скрипт на сайте Elementor
- Перейдите в раздел «Elementor > Пользовательский код» в панели администратора WordPress.
- Нажмите «Добавить новый пользовательский код».
- Вставьте приведенный выше JavaScript-код в редактор.
- Установите «Расположение» на
<body> – Конец, чтобы скрипт загружался после всего контента. - Установите условия отображения, если необходимо (например, только на страницах блога).
- Опубликуйте код.
Теперь все карточки статей на вашем сайте Elementor станут полностью кликабельными, включая те, которые загружаются динамически. Это улучшит навигацию по сайту и сделает взаимодействие с контентом более интуитивным для пользователей.
Помните, что этот скрипт специально разработан для работы с сайтами на Elementor, но может быть адаптирован и для других тем или плагинов WordPress путем изменения селекторов классов.
