Одним из ключевых аспектов хорошо спроектированного веб-сайта является удобство взаимодействия с пользователем. Когда дело доходит до навигационных меню, важно убедиться, что пользователи могут легко получить доступ к профилям социальных сетей, нажимая на значки социальных сетей. Одна из распространенных просьб — открыть эти значки в новых вкладках, чтобы пользователи могли просматривать страницы социальных сетей, не покидая веб-сайт. В этой статье мы рассмотрим несколько методов достижения этой функциональности с помощью темы Divi в WordPress. Итак, приступим!

Метод 1: использование настройщика темы Divi
Тема Divi предлагает интуитивно понятный способ изменения поведения значков социальных сетей в меню. Выполните следующие действия:

1. Перейдите на панель управления WordPress и выберите «Divi» ->«Настройщик тем».
2. Нажмите «Заголовок и навигация» ->«Основная строка меню».
3. Прокрутите вниз до раздела «Значки социальных сетей».
4. Установите флажок «Открыть в новой вкладке».
5. Сохраните изменения и обновите веб-сайт, чтобы увидеть обновленное поведение.

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

1. Перейдите на панель управления WordPress и выберите «Divi» ->«Параметры темы».
2. Нажмите вкладку «Интеграция».
3. Прокрутите вниз до раздела «Добавьте код в свой блог».
4. Добавьте следующий фрагмент кода JavaScript:

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('.et-social-icons a').attr('target', '_blank');
  });
</script>

5. Сохраните изменения и обновите веб-сайт, чтобы увидеть обновленное поведение.

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

1. Создайте дочернюю тему для темы Divi (если вы еще этого не сделали).
2. В папке дочерней темы создайте новый файл с именем «functions.php», если он не существует.
3. Добавьте следующий код в файл «functions.php»:

add_action('wp_enqueue_scripts', 'custom_divi_scripts');
function custom_divi_scripts() {
  wp_enqueue_script(
    'custom-divi-scripts',
    get_stylesheet_directory_uri() . '/assets/js/custom-divi-scripts.js',
    array('jquery'),
    '1.0',
    true
  );
}

4. Создайте новую папку под названием «assets» в папке дочерней темы.
5. Внутри папки «assets» создайте новую папку под названием «js».
6. Создайте новый файл с именем «custom-divi-scripts.js» внутри папки «js».
7. Добавьте следующий код JavaScript в файл «custom-divi-scripts.js»:

jQuery(document).ready(function($) {
  $('.et-social-icons a').attr('target', '_blank');
});

8. Сохраните изменения, активируйте дочернюю тему и обновите веб-сайт, чтобы увидеть обновленное поведение.

Открывая значки социальных сетей в меню Divi на новых вкладках, вы улучшаете взаимодействие с пользователем и поощряете посетителей взаимодействовать с вашим присутствием в социальных сетях, не прерывая сеанс просмотра. Независимо от того, решите ли вы использовать встроенные параметры в настройщике темы Divi или использовать собственный код JavaScript в дочерней теме, реализация этой небольшой настройки может значительно улучшить удобство использования вашего веб-сайта.