А почему неудачно, все легко. Вот библиотека jQuery например https://fancyapps.com/fancybox/ там все написано как пользоваться
Сначала подключаем скрипт и стиль в functions.php, я через CDN покажу, вот так:
/**
* Подключение библиотеки Fancybox 3 jQuery (версия 5.0.28).
*
* Эта функция подключает скрипт и стиль Fancybox 3 к WordPress.
* Дополнительная информация: https://fancyapps.com/fancybox/getting-started/
*/
function air_enqueue_fancybox_scripts() {
// Подключение скрипта
wp_enqueue_script(
'air-fancybox-script',
'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox/dist/jquery.fancybox.min.js',
array('jquery'), // зависимость от jQuery
'5.0.28', // версия скрипта
true // (footer)
);
// Подключение стилей
wp_enqueue_style(
'air-fancybox-style',
'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox/dist/jquery.fancybox.min.css',
array(), // нет зависимостей
'5.0.28' // версия
);
}
// Запуск функции при загрузке скриптов
add_action('wp_enqueue_scripts', 'air_enqueue_fancybox_scripts');
Далее вам остается инициализировать скрипт по необходимым селекторам, вы можете конкретизировать селекторы которые вам необходимы. Так же, вы можете провести инициализацию в js файлах вашей темы, я же подвесил это на wp_footer:
/**
* Инициализация скрипта Fancybox в wp_footer.
*/
function air_initialize_fancybox_script() {
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
Fancybox.bind(
'a[href*=".jpg"],a[href*=".jpeg"],a[href*=".png"],a[href*=".gif"]',
{
groupAll: true,
// параметры
}
);
});
</script>
<?php
}
// используем wp_footer для вывода скрипта
add_action('wp_footer', 'air_initialize_fancybox_script', 999);
И все, все картинки на сайте теперь должны всплывать. Кроме всего прочего вы в модальных окнах можете открывать контент, различные pdf, формы обратной связи, видео, все что угодно…
Если не хотите заморачиваться, можете использовать плагин, та же самая библиотека https://wordpress.org/plugins/w3dev-fancybox/ или в разделе плагинов по запросу «Fancybox 3» найдите необходимый. Если я вам помог отметьте тему в качестве решенной
