Вопрос или проблема
Моя тема использует Magnific Popup следующим образом в theme.js
/* добавляем лайтбокс для галерей блога */
$(".gallery a[href$='.jpg'],.gallery a[href$='.jpeg'],.featured-item a[href$='.jpeg'],.featured-item a[href$='.gif'],.featured-item a[href$='.jpg'], .page-featured-item .slider a[href$='.jpg'], .page-featured-item a[href$='.jpg'],.page-featured-item .slider a[href$='.jpeg'], .page-featured-item a[href$='.jpeg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").parent().magnificPopup({
delegate: 'a',
type: 'image',
tLoading: '<div class="loading dark"><i></i><i></i><i></i><i></i></div>',
mainClass: 'my-mfp-zoom-in',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Будет предварительно загружено 0 - перед текущим, и 1 после текущего изображения
},
image: {
tError: '<a href="https://wordpress.stackexchange.com/questions/178297/%url%">Изображение #%curr%</a> не удалось загрузить.',
verticalFit: false
}
});
Я хотел бы изменить это, чтобы добавить подпись к каждому изображению в галерее WordPress. Я знаю, что должен использовать селектор.
image: {
titleSrc:
}
Также я не хочу редактировать этот код напрямую, так как он является частью темы. Могу ли я использовать функцию или, возможно, подвал, чтобы добавить свои изменения?
Вы должны добавить атрибут title к коду <a href>, окружающему изображения, к которым применяется эффект Magnific Popup.
Новый код должен выглядеть так:
$thumb_img = get_post( get_post_thumbnail_id() ); // Получаем пост по ID
$excerpt = $thumb_img->post_excerpt; // Отображаем подпись
<a href="https://wordpress.stackexchange.com/questions/178297/{current_url_here}" title="<?php echo $excerpt; ?>" />
Мне было бы гораздо проще помочь вам, если бы вы могли вставить какой-нибудь пример кода в ваш вопрос 🙂
Надеюсь, это поможет.
При условии, что вы ввели текст в поле Подписи медиа-галереи, вы можете использовать пользовательский обратный вызов для titleSrc:
titleSrc: function(item) {
return item.el.parents('.gallery-item').find('.gallery-caption').text();
}
Вот как это интегрировано с вашим кодом:
/* добавляем лайтбокс для галерей блога */
$(".gallery a[href$='.jpg'],.gallery a[href$='.jpeg'],.featured-item a[href$='.jpeg'],.featured-item a[href$='.gif'],.featured-item a[href$='.jpg'], .page-featured-item .slider a[href$='.jpg'], .page-featured-item a[href$='.jpg'],.page-featured-item .slider a[href$='.jpeg'], .page-featured-item a[href$='.jpeg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").parent().magnificPopup({
delegate: 'a',
type: 'image',
tLoading: '<div class="loading dark"><i></i><i></i><i></i><i></i></div>',
mainClass: 'my-mfp-zoom-in',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Будет предварительно загружено 0 - перед текущим, и 1 после текущего изображения
},
image: {
tError: '<a href="https://wordpress.stackexchange.com/questions/178297/%url%">Изображение #%curr%</a> не удалось загрузить.',
verticalFit: false,
titleSrc: function(item) {
return item.el.parents('.gallery-item').find('.gallery-caption').text();
}
}
});
Также я не хочу редактировать этот код напрямую, так как он является частью темы. Могу ли я использовать функцию или, возможно, подвал, чтобы добавить свои изменения?
Вы можете использовать дочернюю тему с собственным theme.js, который переопределяет ваш theme.js темы. См. https://codex.wordpress.org/Child_Themes
Ответ или решение
Как добавить заголовок к изображениям с помощью Magnific Popup в WordPress
Использование Magnific Popup для создания световых окон в вашем WordPress сайте может быть крайне полезным для улучшения пользовательского опыта. Однако, если вы хотите добавить заголовки к вашим изображениям в галереях, важно сделать это правильно, не внося изменения напрямую в файлы темы.
Инструкция по добавлению заголовков
Согласно вашему коду, вы уже используете Magnific Popup для отображения изображений в световом окне. Для добавления заголовка к каждому изображению, вам нужно изменить блок конфигурации image в вашей текущей настройке Magnific Popup.
-
Определите источник заголовка: В Magnific Popup есть параметр
titleSrc, который позволяет динамически извлекать заголовки изображений. Ваша задача будет заключаться в написании функции, которая будет находить текст заголовка в определённом месте вашего HTML-кода. -
Использование элемента
title: Вы можете использовать элементtitleв теге<a>, обрамляющем ваше изображение, но более удобно управлять заголовками с помощью JavaScript.
Необходимый код для добавления заголовков:
/* Добавить lightbox для галерей блога */
$(".gallery a[href$='.jpg'], .gallery a[href$='.jpeg'], .featured-item a[href$='.jpeg'], .featured-item a[href$='.gif'], .featured-item a[href$='.jpg'], .page-featured-item .slider a[href$='.jpg'], .page-featured-item a[href$='.jpg'], .page-featured-item .slider a[href$='.jpeg'], .page-featured-item a[href$='.jpeg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").parent().magnificPopup({
delegate: 'a',
type: 'image',
tLoading: '<div class="loading dark"><i></i><i></i><i></i><i></i><i></i></div>',
mainClass: 'my-mfp-zoom-in',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1]
},
image: {
tError: '<a href="%url%">Изображение #%curr% не может быть загружено.</a>',
verticalFit: false,
titleSrc: function(item) {
return item.el.parents('.gallery-item').find('.gallery-caption').text();
}
}
});Использование дочерней темы
Если вы не хотите значительно изменять код оригинальной темы, рекомендуем создать дочернюю тему. Это позволит вам переопределить поддержку JavaScript и сам файл theme.js без риска потерять изменения при обновлении темы.
Шаги для создания дочерней темы:
-
Создайте директорию для дочерней темы: В папке
wp-content/themesсоздайте новую папку для вашей дочерней темы. -
Создайте файл стилей и файл функций: В новой папке создайте файл
style.cssиfunctions.php. -
В файле
style.cssдобавьте следующую информацию:
/*
Theme Name: Название вашей дочерней темы
Template: имя_родительской_темы
*/- В файле
functions.phpдобавьте следующий код для подключения вашего javascript-файла:
<?php
function enqueue_child_theme_scripts() {
wp_enqueue_script('theme-js', get_stylesheet_directory_uri() . '/theme.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_child_theme_scripts');
?>- Скопируйте и измените файл
theme.jsв вашей дочерней теме: Перенесите ваш модифицированный кодtheme.jsв директорию дочерней темы.
Используя этот метод, вы сможете менять и добавлять функциональность, не рискуя потерять ваши правки при обновлении основной темы.
Заключение
Добавление заголовков изображений в Magnific Popup в WordPress — это процесс, который можно легко реализовать с учётом оптимизации и лучших практик разработки. Создание дочерней темы является идеальным решением для осуществления этих изменений. Не упустите возможность улучшить интерфейс вашего сайта и пользовательский опыт, следуя представленным рекомендациям.