Рекомендации по использованию внешних фрагментов кода JavaScript с Divi

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

С Divi вы можете легко добавлять фрагменты JavaScript или jQuery (фрагменты кода) в свою тему или веб-страницу без плагина, даже если у вас не настроена дочерняя тема. В этом руководстве мы рассмотрим некоторые рекомендации по использованию внешних фрагментов JavaScript с Divi.

Быстрое слово по JavaScript и jQuery

JavaScript - это магия динамических функций, которые вы видите на веб-сайте. Это язык программирования на стороне клиента, созданный для Интернета, который может получить доступ ко всем файлам вашей темы и выполнять все типы функций через браузер, которые были бы невозможны с использованием только HTML или CSS.

JQuery (одна из самых популярных библиотек JavaScript) значительно упростил добавление фрагментов JavaScript на ваши веб-сайты, которые будут работать в разных типах браузеров. Вот почему сегодня на веб-сайтах используется много jQuery. JQuery также встроен в WordPress, поэтому любой код jQuery, который вы добавляете в Divi, будет работать, если он правильно отформатирован.

Правильное форматирование фрагмента JQuery в Divi / WordPress

Использование функции готовности документа

В большинстве случаев я бы предложил использовать $(document).ready() в ваших фрагментах jQuery. Любой JavaScript, добавленный в $(document).ready() , обеспечит загрузку и готовность документа (или DOM) перед выполнением JavaScript. Это позволяет избежать определенных ситуаций, когда JavaScript может выполняться, когда страница не готова к безопасному управлению.

В Divi функция должна выглядеть так…

jQuery( document ).ready(function() {

    // Add jQuery code here to be loaded once the DOM is ready

});

Использование jQuery вместо $ при использовании jQuery в WordPress

Поскольку WordPress уже поставляется с версией jQuery в режиме совместимости, стандартный $ для jQuery не работает. Это сделано для того, чтобы он не конфликтовал с другими библиотеками JavaScript, которые вы можете или не можете использовать в WordPress. Вместо этого вам нужно будет использовать jQuery вместо ярлыка $ .

Итак, это…

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

Нужно превратить в это…

jQuery(document).ready(function(){
  jQuery("p").click(function(){
    jQuery(this).hide();
  });
});

Однако, если вы хотите сохранить код менее раздутым и сохранить эти ярлыки $ , вы можете использовать $ вместо jQuery если вы добавляете $ в качестве аргумента, передаваемого функции готовности документа. Это позволит вам сохранить $ во фрагменте jQuery, содержащемся в этой функции.

Вот как бы это выглядело…

jQuery( document ).ready(function( $ ) {
    // Add jQuery code here, using $ to refer to jQuery.
    $( "div" ).hide();
});

Или вы можете передать $ in для jQuery с помощью простой функции, подобной этой, вместе с функцией готовности документа…

(function($) {
    
    // Add jQuery code here, using $ to refer to jQuery.
    $(document).ready(function(){

      $( "div" ).hide();

    });
    
})( jQuery );

Теперь, когда мы понимаем некоторые передовые методы форматирования фрагментов кода JavaScript, давайте рассмотрим, как правильно добавить их на свой сайт Divi.

Добавление фрагментов JavaScript на одну страницу с помощью модуля кода

Если вы хотите добавить фрагмент javascript (или jquery) на одну страницу в Divi, вы можете использовать модуль кода. Это гарантирует, что JS не будет загружаться на каждой странице без необходимости, что приведет к незначительному увеличению времени загрузки страницы на страницах, которые даже не нуждаются в этом.

Вот как это сделать. Во-первых, активируйте конструктор divi при редактировании страницы, для которой требуется фрагмент JS. Затем добавьте модуль кода на свою страницу.

Код будет работать в любом месте страницы, поэтому вам решать, куда вы хотите его поместить.

После добавления модуля кода вставьте фрагмент кода JavaScript. Обязательно заключите код в <script> чтобы код распознавался как JavaScript.

Не забудьте убедиться, что ваш фрагмент кода правильно отформатирован, заключив его в <script> чтобы код распознавался как JavaScript. А если вы используете jQuery, включите функцию готовности документа, чтобы она загружалась всякий раз, когда документ готов для этого. Кроме того, вам нужно будет использовать jQuery в своем фрагменте вместо сокращения $ .

Вот и все! Ваш фрагмент должен работать на странице должным образом.

Примечание. Тег <script> обычно требует, чтобы вы указали тип носителя сценария следующим образом ...

<script type="text/javascript">
</script>

Однако, поскольку «текст / javascript» является типом по умолчанию, его можно не указывать при использовании для фрагментов кода JavaScript.

Добавление фрагментов JavaScript на все страницы / сообщения с использованием параметров темы Divi (дочерняя тема не требуется)

Фрагменты JavaScript также могут быть добавлены в Divi с помощью вкладки интеграции кода Divi в разделе «Параметры темы». Этот метод хорошо работает для фрагментов JS, которые вы хотите загрузить на все страницы / сообщения вашего веб-сайта. Это также хороший вариант, если у вас нет дочерней темы или если у вас есть только несколько фрагментов JS, которые нужно добавить на ваш сайт Divi, и вы не хотите включать их во внешний файл JS.

Чтобы найти раздел интеграции кода, перейдите в Divi> Параметры темы и щелкните вкладку «Интеграция».

Выяснение, где разместить фрагмент кода JavaScript

Там вы увидите четыре области, в которых вы можете добавить собственный код на свой сайт Divi. В большинстве случаев лучше всего добавлять фрагменты JS в тело. Это фактически поместит ваш фрагмент внизу вашей страницы, чтобы он загружался после всего остального, что отлично подходит для скорости загрузки страницы. В некоторых случаях вы можете захотеть добавить код в заголовок, чтобы код мог загружаться раньше (или если ваш документ зависит от более раннего запуска JavaScript). Поэтому вам нужно будет протестировать и выбрать лучший вариант, обеспечивающий наилучший баланс производительности, времени и функциональности.

Например, у вас может быть фрагмент jQuery, который добавляет стиль вашему заголовку. В этом случае вы не захотите загружать его в теле (в конце страницы), потому что заголовок будет загружаться изначально без этого стиля до тех пор, пока фрагмент не будет прочитан. Это на короткое время сделает вашу верхнюю часть страницы некрасивой для посетителей. Однако, если вы загрузите его в голову, у вас не будет такой задержки в стилизации.

Вы также можете добавить фрагмент JS в конец своих сообщений, если у вас есть код, который применяется только к сообщениям в блогах. Это предотвратит ненужную загрузку кода на других страницах.

Области интеграции кода будут добавлять код непосредственно на вашу страницу, поэтому вам нужно будет заключить фрагменты кода в <script> .

Добавление фрагментов JS в Divi из отдельного файла JS (с использованием дочерней темы)

Всегда рекомендуется использовать дочернюю тему для вашего сайта Divi. И как только вы правильно настроите дочернюю тему, вы можете также включить файл JS, который можно использовать для хранения ваших пользовательских фрагментов JS.
Это определенно предпочтительный способ обработки javascript на сайтах WordPress, и он также хорошо работает с Divi.

Создание файла JS в вашей дочерней теме

Всегда полезно создать дочернюю тему Divi, особенно если вы планируете вносить изменения в файлы темы. После того, как вы создали дочернюю тему Divi, вы можете легко создать файл JavaScript, в котором вы сможете разместить все свои фрагменты JS в одном месте.

Вот как это сделать.

Создайте файл JavaScript и добавьте его в папку дочерних тем.

Используя редактор кода, создайте новый файл и сохраните его как файл JavaScript. Например, если вы сохранили файл как тип «js» с именем «scripts», полное имя файла будет «scripts.js». Здесь вы должны добавить все фрагменты js, которые хотите добавить в Divi. Вам не нужно заключать фрагменты в <script> поскольку файл сохраняется как файл js.

После создания файла вам необходимо добавить его в папку дочерней темы. Мне нравится создавать папку js для хранения моих пользовательских файлов js для лучшей организации. Для этого просто создайте новую папку с именем «js» в корне папки дочерней темы и добавьте в эту папку файл «scripts.js».

Постановка скриптов в очередь в файле Functions.php вашей дочерней темы

Теперь нам нужно поставить файл js в очередь, чтобы он загружался в Divi. Если у вас уже создана дочерняя тема, у вас должен быть уже создан файл functions.php, в который вы уже поставили в очередь файл style.css для дочерней темы, который должен выглядеть примерно так…

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Теперь вам нужно будет сделать то же самое для вашего нового файла js. Для этого вам нужно будет добавить в функцию следующий фрагмент.

    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );

Окончательный код, необходимый для постановки файлов style.css и scripts.js в очередь, будет выглядеть так…

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Последние мысли

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!