Как добавить скрипт в WordPress? | Как добавить стили в WordPress?

Опубликовано 06.09.2021

Хотите узнать, как правильно добавлять скрипты JavaScripts и CSS в WordPress? Многие пользователи часто делают ошибку, напрямую вызывая свои скрипты и таблицы стилей в плагинах и темах. В этой статье мы хотим показать вам, как правильно добавлять скрипты и таблицы стилей в WordPress.

Это будет полезно для тех, кто только начинает изучать WordPress и разработку плагинов.

Как добавить скрипт в WordPress?
Как добавить стили в WordPress?

Распространенная ошибка при добавлении скриптов и таблиц стилей в WordPress

Некоторые по ошибке используют функцию wp_head для загрузки своих скриптов и таблиц стилей.

<? Php
add_action ('wp_head', 'wpb_bad_script');
function wpb_bad_script () {
echo 'jQuery идет сюда';
}
?>

Хотя описанное выше может быть проще, это неправильный способ добавления сценариев в WordPress, и это приводит к большему количеству конфликтов в будущем.

Редактировать запись

Добавить заголовокКак добавить скрипт в WordPress? | Как добавить стили в WordPress?

Хотите узнать, как правильно добавлять скрипты JavaScripts и CSS в WordPress? Многие пользователи часто делают ошибку, напрямую вызывая свои скрипты и таблицы стилей в плагинах и темах. В этой статье мы хотим показать вам, как правильно добавлять скрипты и таблицы стилей в WordPress.

Это будет полезно для тех, кто только начинает изучать WordPress и разработку плагинов.

Как добавить скрипт в WordPress?
Как добавить стили в WordPress?

Распространенная ошибка при добавлении скриптов и таблиц стилей в WordPress

Некоторые по ошибке используют функцию wp_head для загрузки своих скриптов и таблиц стилей.

<? Php
add_action ('wp_head', 'wpb_bad_script');
function wpb_bad_script () {
echo 'jQuery идет сюда';
}
?>

Хотя описанное выше может быть проще, это неправильный способ добавления сценариев в WordPress, и это приводит к большему количеству конфликтов в будущем.

Например, если вы загружаете jQuery вручную, а другой плагин загружает jQuery с помощью правильного метода, то у вас есть jQuery, загружаемый дважды!

Если он загружается на каждую страницу, это отрицательно скажется на скорости и производительности WordPress. Поэтому возможно, что эти две версии разные.

При этом давайте рассмотрим правильный способ добавления скриптов и таблиц стилей.

Вставка скриптов и стилей в WordPress

Чтобы убедиться, что все работает правильно, и никто не наступает на чужие пальцы, WordPress имеет систему постановки в очередь. Эта система предоставляет программируемый способ загрузки скриптов JavaScripts и CSS.

Используя функции wp_enqueue_script и wp_enqueue_style, вы сообщаете WordPress, когда его загружать, где его загружать и каковы его зависимости.

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

Как добавить скрипт в WordPress?

Правильная загрузка скриптов в WordPress очень проста. Ниже приведен пример кода, который вы вставляете в файл плагинов или в функции вашей темы. Файл PHP для правильной загрузки скриптов в WordPress.

?php
function wpb_adding_scripts() {
wp_register_script('my_script', plugins_url('my_script_file.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_script_file');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

Мы начнем с регистрации нашего скрипта с помощью функции wp_register_script (). Эта функция принимает 5 параметров:

$ handle — это уникальное имя вашего скрипта. Наш называется «my_script»
$ src — это местоположение вашего скрипта. Мы используем функцию plugins_url, чтобы получить правильный URL-адрес нашей папки плагинов. Как только WordPress обнаружит это, он будет искать наше имя my_script_file.js в этой папке.
$ deps. Поскольку наш скрипт использует jQuery, мы добавили jQuery в область зависимостей. WordPress хочет автоматически загрузить jQuery.
$ ver — это номер версии нашего скрипта. Этот параметр не обязателен.
$ in_footer — мы хотим загрузить наш скрипт в нижний колонтитул, поэтому мы установили значение true. Если вы хотите загрузить скрипт в заголовок, вы можете сделать его ложным.

После установки всех параметров в wp_register_script, мы можем просто вызвать скрипт в wp_enqueue_script (), который запускает процесс.

Последний шаг — использовать хук действия wp_enqueue_scripts для фактической загрузки скрипта.

Если вы добавите этот код в свою тему или плагин, вы можете подключить этот скрипт. Что позволяет уменьшить объем памяти для вашего плагина.

Теперь некоторые могут задаться вопросом, почему мы собираемся сначала зарегистрировать скрипт, а затем поставить его в очередь загрузки? Это позволяет другим владельцам сайтов отменить регистрацию вашего скрипта без изменения основного кода вашего плагина.

Как добавить стили в WordPress?

Как и скрипты, вы можете поставить в очередь свои таблицы стилей.

Пример ниже:

<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>

Вместо использования wp_enqueue_script, мы теперь используем wp_enqueue_style для добавления нашей таблицы стилей.

Обратите внимание, что мы использовали wp_enqueue_scripts для стилей и скриптов. Несмотря на название, эта функция работает для их обоих.

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

Однако, если вы используете функцию загрузки скриптов в своей теме, просто используйте вместо нее get_template_directory_uri ().

Если вы работаете с дочерней темой, используйте get_stylesheet_directory_uri ().

Пример кода:

<?php

function wpb_adding_scripts() {
wp_register_script('my_script', get_template_directory_uri() . '/js/my_script_file.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

Мы надеемся, что вы научитесь правильно добавлять jacvascript и CSS в WordPress. ????

Успехов Вам и Ваши проектам!