Как добавить 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 никогда не хорошая идея.

Правильный способ добавления 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, например, как в примере ниже:

Добавьте JavaScript в WordPress: как это сделать легко

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

Исследования имеют большое значение, так как неправильная реализация JavaScript может привести к последствиям, которые будет сложно исправить.

Что такое JavaScript для WordPress?

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

Почему вы должны добавить собственный JavaScript в WordPress?

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

Чтобы создать очень прочную основу для сайта WordPress, вы можете использовать HTML и CSS. Несмотря на то, что они отлично подходят для создания основы веб-сайта, они ограничены в плане изменения поведения сайта. Если вы хотите, чтобы ваш сайт работал определенным образом, вы можете использовать JavaScript для выполнения одного из следующих действий:

• Изменение, скрытие или отображение определенных элементов HTML на сайте
• Добавление значений к переменным CSS, а также выполнение более сложных операций (объединение переменных или создание интерактивного элемента по клику)
• Изменение макета темы WordPress путем добавления в нее еще одного блока кода.
• Изменение определенной функциональности плагина WordPress
• Дополнение веб-сайта динамическим контентом (анимация, видео и т. д.)
• Включение внешнего элемента в веб-сайт (сторонние API)

Все это и многое другое можно сделать с помощью JavaScript.

Использование вставки верхних и нижних колонтитулов для добавления JavaScript

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

Чтобы активировать его после установки, вам просто нужно перейти в «Настройки», а затем на страницу «Вставить верхние и нижние колонтитулы». Есть два разных поля, которые вы можете отметить — одно для верхнего колонтитула, другое для нижнего колонтитула. После того, как вы активировали этот плагин, вы можете просто вставить фрагмент кода JavaScript и нажать «Сохранить». Поскольку плагин активирован, вставленный фрагмент кода будет автоматически загружаться для всех страниц вашего сайта. Это самые базовые знания, которые вам понадобятся для добавления JavaScript в WordPress.

Отключение фильтрации WordPress

При использовании JavaScript в WordPress вы также должны отключить блокировку тегов скрипта из JavaScript. Этот параметр можно найти в файле wp-config.php, который находится в корневом веб-каталоге. Чтобы включить пользовательские теги, добавьте туда эту строку кода:

define( ‘CUSTOM_TAGS’ , true );

Как только вы перейдете на страницу functions.php, скопируйте и вставьте этот фрагмент кода в свой базовый код:

function add_scriptfilter ( $string) < global $allowedtags;$allowedtags[ 'script' ] = array ( 'src' =>array () ); return $string;>add_filter( ‘pre_kses’ , ‘add_scriptfilter’ );

Дополнительный совет: использование этого метода означает, что вы отключаете функцию безопасности на своем веб-сайте для любого уровня разрешений пользователя. Используйте этот метод, только если вы глубоко доверяете своим авторам. Включение тега script иногда может быть рискованным.

Узнайте, как использовать плагин Script n Styles

Вы можете добавить JavaScript в WordPress с помощью плагина. Обычно вам нужно загружать JavaScript внутри тегов и. Для глобальной загрузки JavaScript можно использовать плагин. Отзывчивый — Script n Styles. Вы можете либо включить скрипты на весь веб-сайт, либо включить их на странице или даже на уровне публикации. Вы также можете изменить разрешения пользователей. Авторы могут публиковать сообщения и активировать JavaScript, а участники могут сохранять сообщения, фактически не публикуя их.

Используйте расширенные настраиваемые поля

Если вам интересно, как проще всего добавить JavaScript в WordPress, этот плагин может стать решением. После установки и активации плагина вы можете получить доступ к опции «Пользовательские поля» в административном меню. Затем вы можете нажать «Добавить новый». Цель состоит в том, чтобы добавить поле, к которому могут получить доступ администраторы и которое может вставлять исходный файл JavaScript или код JavaScript в теги.

• Первым шагом является присвоение имени группе полей. Это можно сделать, включив правило, отображающее этот параметр, если пользователь входит в систему как администратор. Это означает, что только администратор может добавить их на сайт.
• Поля должны отображаться под областью содержимого, что означает, что вы выбираете «Стандартный», когда дело доходит до выбора стиля группы полей. Установите форматирование поля на «Преобразовать HTML в теги». Это приведет к хорошему результату, в противном случае он может быть плохо переведен.
• Добавьте следующий код в header.php:

Это должно быть добавлено перед .

Это должно быть добавлено перед .

• Сохраните файлы шаблона, обновите страницу и нажмите Опубликовать.

Страница будет опубликована с добавленным JavaScript. Расширенные настраиваемые поля — это подходящий вариант, если вам нужны дополнительные функциональные возможности для пользователей, уже опубликованных страниц и т. д.

Эй, а вы знали, что данные тоже могут быть красивыми?

wpDataTables может сделать это таким образом. Есть веская причина, по которой это плагин WordPress №1 для создания адаптивных таблиц и диаграмм.

Фактический пример wpDataTables в дикой природе

И очень легко сделать что-то вроде этого:

1. Вы предоставляете данные таблицы
2. Настройте и настройте его
3. Опубликовать в посте или на странице

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

«Да, но я просто слишком люблю Excel, а на веб-сайтах ничего подобного нет». Да, есть. Вы можете использовать условное форматирование, как в Excel или Google Sheets.

Я говорил вам, что вы тоже можете создавать диаграммы с вашими данными? И это только малая часть. Есть много других функций для вас.

Завершение мыслей о том, как добавить JavaScript в WordPress

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

Если вам понравилось читать эту статью о том, как добавить JavaScript в WordPress, вы должны прочитать эту о том, как сбросить настройки WordPress.

wp_enqueue_script() │ WP 2.1.0

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

ВАЖНО! Это ошибка начинающих разработчиков. Функция ничего не выведет, если в теме не используется wp_head() или wp_footer(). Именно в момент вызова этих функций срабатывает хук, который добавляет скрипты. Также эта функция должна вызываться до wp_footer(), иначе скрипты вообще не будут подключены.

Если скрипт уже зарегистрирован с помощью wp_register_script(), то для его подключения в этой фукнции нужно указать только идентификатор скрипта (в первом параметре):

// jquery регистрируется в WP по умолчанию. // Поэтому для его подключения достаточно одной строки: wp_enqueue_script('jquery');

Если скрипт не зарегистрирован, то его можно зарегистрировать и подключить одновременно:

wp_enqueue_script( 'newscript', get_template_directory_uri() . '/js/custom_script.js');

С версии 3.3. wp_enqueue_script() можно вызывать во время генерации страницы. В этом случае вызываемый скрипт будет подключен в подвале, в момент срабатывания события wp_footer.

• wp_enqueue_scripts — для внешней части сайта;
• admin_enqueue_scripts — для админ-панели;
• login_enqueue_scripts — для страницы входа (wp-login.php).

• Используйте wp_script_add_data() — когда нужно подключить скрипт с условием, например,
  Читать:

  Как установить internet explorer 11 на windows 11

add_action('wp', 'add_my_script_where_it_necessery'); function add_my_script_where_it_necessery() < if( is_single() ) add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); >function my_scripts_method() < $script_url = plugins_url( '/js/newscript.js', __FILE__ ); wp_enqueue_script('newscript', $script_url, array('scriptaculous') ); >

add_action('wp_enqueue_scripts', 'my_scripts_method'); function my_scripts_method() < wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom_script.js', array('jquery') ); >

## удаляет версию WP из преданного URL у скриптов и стилей add_filter( 'script_loader_src', 'hb_remove_wp_version_from_src' ); add_filter( 'style_loader_src', 'hb_remove_wp_version_from_src' ); function hb_remove_wp_version_from_src( $src ) < global $wp_version; parse_str( parse_url( $src, PHP_URL_QUERY ), $query ); if ( ! empty($query['ver']) && $query['ver'] === $wp_version ) < $src = remove_query_arg('ver', $src); >return $src; >

function wpschool_javascript_in_header() < ?>  add_action( 'wp_head', 'wpschool_javascript_in_header' );

function wpschool_javascript_in_header() < if ( is_single ( '16' ) ) < ?>  > add_action( 'wp_head', 'wpschool_javascript_in_header' );

function wpschool_javascript_in_header() < if ( is_page ( '10' ) ) < ?>  > add_action( 'wp_head', 'wpschool_javascript_in_header' );

function wpschool_javascript_in_footer() < ?>  add_action( 'wp_footer', 'wpschool_javascript_in_footer' );