Кастомизация в Wordpress сайте, сделанном на теме Divi.

Содержание

Вопрос или проблема
Ответ или решение
1. Создание уникального CSS-класса
2. Добавление JavaScript для переопределения поведения
3. Обеспечение доступа к высокому разрешению изображения
4. Настройки стилей и вид
Заключение

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

Я создал веб-сайт, используя тему Divi и конструктор Divi.

Мне нужны некоторые изменения в нем.

На нашем внутреннем сайте, который мы строим, мы хотели бы изменить javascript, чтобы вместо открытия изображения в лайтбоксе оно открывалось в новой вкладке или, что еще лучше, загружалось.

Сайт на WordPress, созданный с использованием темы Divi
Хотелось бы переопределить событие, которое запускает лайтбокс
Модуль галереи Divi должен быть затронут только в случае использования уникального CSS-класса (так как мы можем захотеть использовать этот модуль в его стандартной функции на других страницах)
Установлена дочерняя тема, и .php можно добавить туда
Настройки — это место, где должен быть добавлен CSS
Обратите внимание, что если вы щелкните правой кнопкой мыши на изображении и откроете изображение в новой вкладке, вы не получите версию самого высокого разрешения, однако вы получите ее при щелчке правой кнопкой мыши и выборе «открыть ссылку в новой вкладке». Мы хотим захватить эту версию с более высоким разрешением, будь то загрузка или открытие в новой вкладке.

Как я могу это сделать?

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

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

1. Создание уникального CSS-класса

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

В редакторе Divi выберите ваш модуль галереи.
В параметрах модуля перейдите в секцию "Дополнительно".
В поле "CSS-класс" укажите уникальный класс, например custom-gallery.

2. Добавление JavaScript для переопределения поведения

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

Перейдите в административную панель WordPress.
Выберите Внешний вид -> Редактор тем и убедитесь, что у вас активен дочерний шаблон (Child Theme).
Откройте файл functions.php в дочернем шаблоне и добавьте следующий код:

function custom_divi_gallery_script() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('.custom-gallery a').off('click').on('click', function(e) {
                // Получаем URL изображения
                var imgUrl = $(this).attr('href');

                // Проверяем, если изображение существует
                if (imgUrl) {
                    e.preventDefault(); // Предотвращаем стандартное поведение
                    // Здесь можно использовать window.open для открытия в новой вкладке
                    window.open(imgUrl, '_blank');

                    // Для автоматической загрузки изображения, раскомментируйте следующую строку:
                    // window.location.href = imgUrl;
                }
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'custom_divi_gallery_script');

3. Обеспечение доступа к высокому разрешению изображения

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

4. Настройки стилей и вид

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

Выберите Настроить -> Дополнительные стили в административной панели.
Вставьте следующий код:

.custom-gallery a {
    /* Пример стиля для ссылок на изображения */
    border: 2px solid #fff; /* Белая рамка */
    border-radius: 5px; /* Скругленные углы */
    transition: transform 0.3s; /* Анимация при наведении */
}

.custom-gallery a:hover {
    transform: scale(1.05); /* Увеличение при наведении */
}

Заключение

В вашем случае, создание кастомизации для галереи Divi на основе уникального CSS-класса позволит удобно модифицировать функциональность, не затрагивая другие部分 сайта. С помощью JavaScript можно легко управлять действиями пользователей, предоставляя им возможность открывать изображения в новой вкладке или загружать их.

Следуя данным шагам, вы сможете добиться необходимого функционала. Если возникнут какие-либо вопросы или потребуется дополнительная помощь, не стесняйтесь обращаться к сообществу WordPress или профессиональным разработчикам.

Кастомизация в WordPress сайте, сделанном на теме Divi.