Учебники

Правильное добавление Javascript в темы WordPress

Правильное добавление Javascript в темы WordPress

Существует особый способ добавления Javascript в вашу тему WordPress, чтобы предотвратить любые конфликты с плагинами или родительскими темами WordPress. Проблема в том, что многие «разработчики» вызывают свои файлы javascript непосредственно в файле header.php или footer.php, что является неправильным способом сделать это.

В этом руководстве я покажу вам, как правильно вызывать файлы javascript с помощью файла functions.php, чтобы они загружались прямо в тег заголовка или нижнего колонтитула вашего сайта. Таким образом, если вы разрабатываете тему для распространения и ваш конечный пользователь хочет изменить скрипты с помощью дочерней темы, они могут это сделать, или если они используют минимизацию / кеширование или другие плагины оптимизации, они будут работать правильно. И если вы работаете с дочерней темой, ваши сценарии добавляются правильно, без копирования файлов header.php или footer.php в дочернюю тему, которые никогда не должны быть необходимы (при работе с хорошо закодированной темой)

Неправильный способ добавления Javascript в темы WordPress

Вызов javascript в вашем файле header.php или footer.php, как показано ниже, НЕ является правильным способом, и я настоятельно рекомендую его не использовать, часто это вызывает конфликты с другими плагинами, и выполнение действий вручную при работе с CMS никогда не хорошая идея.

<script src="https://site.com/wp-content/themes/mytheme/js/my-script.js"></script>

Правильный способ добавления Javascript в темы WordPress

Лучше всего добавлять javascript в вашу тему WordPress через файл functions.php, используя wp_enqueue_script. Использование действия wp_enqueue_scripts для загрузки вашего javascript поможет уберечь вашу тему от проблем.

пример

wp_enqueue_script( 'my-script', get_template_directory_uri(). '/js/my-script.js', array(), true );

Приведенный выше код загрузит файл my-script.js на ваш сайт. Как видите, я включил только дескриптор $, но вы также можете добавить зависимости для вашего скрипта, номер версии и указать, загружать ли его в верхний или нижний колонтитул (по умолчанию – заголовок).

Функцию wp_enqueue_script() технически можно использовать в любом файле шаблона темы или плагина, но если вы загружаете глобальные скрипты, вы захотите разместить ее либо в файле function.php вашей темы, либо в отдельном файле, специально предназначенном для загрузки скриптов в сайт. Но если вы хотите загрузить скрипт только в определенный файл шаблона (например, в сообщения в галерее), вы можете разместить функцию прямо в файле шаблона, однако лично я рекомендую хранить все скрипты в одном месте и использовать условные выражения для загрузки. скрипты по мере необходимости.

Размещенные скрипты WordPress

Одна интересная вещь в WordPress заключается в том, что уже существует множество скриптов, размещенных и зарегистрированных, которые вы можете использовать при разработке своей темы. Например, jQuery, который используется почти в каждом проекте, должен ВСЕГДА загружаться из WordPress и никогда не размещаться на сторонних сайтах, таких как Google. Поэтому, прежде чем добавлять собственный сценарий в свой проект, проверьте список зарегистрированных сценариев, чтобы убедиться, что он еще не включен в WordPress, и если это так, вам следует загрузить его, а не регистрировать свой собственный.

Использование хука для постановки в очередь WordPress

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

В WordPress есть два разных хука действий, которые вы можете использовать для вызова своих скриптов.

  1. wp_enqueue_scripts – действие, используемое для загрузки скриптов на интерфейсе
  2. admin_enqueue_scripts – действие, используемое для загрузки скриптов в админке WP

Вот пример (который будет добавлен в ваш файл functions.php) того, как создать функцию и затем использовать обработчик WordPress для вызова ваших скриптов.

/** * Enqueue a script */ function myprefix_enqueue_scripts() { wp_enqueue_script( 'my-script', get_template_directory_uri(). '/js/my-script.js', array(), true ); } add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_scripts' );

Примечание. Посмотрите, как мы используем функцию «get_template_directory_uri» при определении местоположения вашего скрипта? Эта функция создает URL-адрес папки вашей темы. Если вы работаете с дочерней темой, вы захотите использовать вместо нее «get_stylesheet_directory_uri», чтобы она указывала на вашу дочернюю тему, а не на родительскую тему.

Добавление встроенного кода Javascript

Хотя вы можете легко вставить встроенный javascript в любой файл шаблона с помощью тега script, неплохо было бы также использовать обработчики WordPress для добавления вашего встроенного кода, особенно если это основной плагин или код темы. Ниже приведен пример добавления встроенных скриптов на ваш сайт:

function myprefix_add_inline_script() { wp_add_inline_script( 'my-script', 'alert("hello world");', 'after' ); } add_action( 'wp_enqueue_scripts', 'myprefix_add_inline_script' );

Что это будет делать, так это добавить ваш встроенный javascript после ранее зарегистрированного скрипта my-script. При использовании wp_add_inline_script вы можете добавлять только встроенный код до или после уже зарегистрированного сценария, поэтому, если вы пытаетесь изменить код определенного сценария, убедитесь, что он загружается после него, или если вам просто нужно добавить какой-то собственный код, вы можете подключить это в сценарий jquery, который обычно загружается большинством тем WordPress, и если нет, вы можете использовать wp_enqueue_script для загрузки версии jQuery, размещенной на WordPress.

Используя этот метод, люди могут легко удалить ваши встроенные скрипты с помощью дочерней темы или надстройки плагина, он сохраняет весь ваш пользовательский JavaScript в аккуратной организации и анализируется WordPress, что может быть безопаснее. А если вы используете дочернюю тему, вы можете загружать свои скрипты через файл functions.php вместо копирования файлов header.php или footer.php в свою дочернюю тему.

Тем не менее, если вы работаете с дочерней темой, вам не нужно этого делать, вы можете просто выгрузить свой код в заголовок, используя хуки wp_head или wp_footer, например, как в примере ниже:

add_action( 'wp_footer', function() { ?> <script> (function( $) { 'use strict'; $( document ).on( 'ready', function() { // Your custom code here } ); } (jQuery) ); </script> <?php } );

Источник записи: https://www.wpexplorer.com

Похожие сообщения
Учебники

Создание пользовательских статусов заказов WooCommerce для WordPress

Учебники

Добавить NivoSlider с настраиваемым типом сообщения в тему WordPress

Учебники

Как стать успешным блоггером и заработать на WordPress

Учебники

Ultimate Visual Composer Drag & Drop Руководство по построению страниц для WordPress