WEB и WordPress новости, темы, плагины. Здесь мы делимся советами и лучшими решениями для сайтов.

Как добавить JavaScript и jQuery в WordPress

163

Иногда возможности jQuery и JavaScript используются недостаточно. Просто вставить WordPress JavaScript или jQuery в верхний или нижний колонтитул недостаточно !! Не менее важно знать, как правильно добавлять эти скрипты с помощью функции wp_enqueue_script.

WordPress – отличная система управления контентомкоторый отделяет дизайн от содержания. Это дает вам множество привилегий изменять внешний вид и стиль вашего сайта. Но иногда вы чувствуете, что не можете изменить дизайн из-за предустановленных параметров стиля на уровне темы. Здесь вы добавляете JavaScript и jQuery в WordPress. Это поможет вам выйти за границы страницы или публикации, которую вы создаете. Вы можете добавлять различные стили, макеты или изменения содержимого на свой сайт с помощью Javascript или jQuery в WordPress. Даже вы можете встраивать аудио / видео плееры, интерактивные страницы или формы подписки с помощью этих скриптов и библиотек. Но я думаю, что большинство пользователей знают, где использовать WordPress Javascript или jQuery. Им действительно нужно больше беспокоиться – как добавить jQuery и JavaScript в WordPress.

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

Как добавить JavaScript / jQuery на страницы или сообщения WordPress?

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

  • Отключить фильтрацию тегов скриптов WordPress.
  • Постановка скриптов в WordPress.
  • Использование плагинов.

Давайте узнаем подробнее

1. Добавьте JavaScript и jQuery в WordPress, отключив фильтрацию тегов скрипта WordPress.

Первый способ – отключить фильтрацию тегов скрипта. Для этого вам необходимо включить настраиваемые теги из 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' );

Это хорошо с точки зрения функциональности и проще в реализации. Но это неправильный способ, который приведет к новым конфликтам в будущем. Поскольку несколько плагинов могут использовать jQuery и другие скрипты, jQuery / скрипты WordPress будут загружаться снова и снова. Это отрицательно скажется на скорости и производительности вашего WordPress. Точно так же две разные версии jQuery могут привести к хаосу и отсутствию результатов.

2. Добавьте JavaScript и jQuery, поставив скрипты в очередь в WordPress.

Постановка в очередь – самый удобный и дружественный к CMS способ добавления скриптов / jQuery в WordPress. Это систематический метод загрузки WordPress jQuery / Javascript, зная их зависимости. WordPress предоставляет функцию сценария постановки в очередь, чтобы убедиться, что все работает правильно. Функция wp_enqueue_script сообщает WordPress, когда загружать файл, где его загружать и каковы его зависимости. Это облегчает вам использование встроенной библиотеки jQuery, которая поставляется с WordPress. Он хорошо работает без снижения скорости вашего сайта. Вы можете загрузить свой WordPress jQuery / JavaScript, используя следующий код

function custom_scripts_method() { wp_register_script('customscripts', get_template_directory_uri(). '/js/jquery.min.js', array('jquery'), '1.0.0', true); wp_enqueue_script('customscripts'); } add_action('wp_enqueue_scripts', 'custom_scripts_method');

Сначала вы регистрируете свой скрипт с помощью функции wp_register_script (). Требуется 5 параметров

  1. $ handle – Первый параметр, который является уникальным именем вашего скрипта. Функция использует имя дескриптора как «customscripts». Это обязательное поле, оно должно быть написано строчными буквами.
  2. $ src – это расположение вашего скрипта. Если вы загружаете его локально, лучше использовать content_url, bloginfo («template_url») или get_template_directory_uri (). Это необязательно.
  3. $ deps – указывает массив зависимостей. Он загрузит jQuery, если он еще не загружен. Это также необязательное поле.
  4. $ ver – это версия вашего скрипта. Этот параметр не является обязательным.
  5. $ in_footer – Если вы хотите поместить свой скрипт в нижний колонтитул, вы установите для него значение true. Если в шапке, то вы бы сделали ложным.

Регистрация позволит WordPress узнать ваши активы. После этого вы можете вызвать сценарий в wp_enqueue_script (), чтобы фактически добавить эти ресурсы на страницу. Наконец, вы будете использовать обработчик действия wp_enqueue_scripts для загрузки скрипта.
Этот метод позволит избежать конфликтов, возникающих при многократном повторении скриптов. Потому что это двухэтапный метод, который сначала регистрирует, а затем ставит в очередь скрипт. Регистрация является важным шагом, поскольку она сигнализирует другим сайтам WordPress, открытым в том же браузере, отменить регистрацию предварительно загруженных файлов jQuery. После того, как другие сайты очистили кеш, отменив регистрацию ранее существовавших файлов, конфликтов не будет. Затем вы можете безопасно добавить JavaScript / jQuery в WordPress. Итак, постановка в очередь с помощью wp_enqueue_script ()это самый безопасный способ улучшить функциональность вашего сайта, добавив WordPress jQuery или JavaScript.

3. Добавьте JavaScript и jQuery в WordPress с помощью плагинов.

Третий способ очевиден – через плагины. В репозитории WordPress есть множество плагинов. Вы обязательно получите что-то для своей цели. Он предоставляет вам множество плагинов для вставки jQuery или JavaScript в сообщения, страницы или сайт WordPress (темы, плагины и т.д. ).

Один из наиболее часто устанавливаемых, хорошо разработанных и ориентированных на результат плагинов для добавления jQuery в WordPress – Advanced Custom Fields. Он имеет более одного миллиона активных установок и имеет рейтинг 5 звезд. Давайте посмотрим, как включить jQuery в WordPress с помощью плагина

1. Установите и активируйте этот плагин. После активации вы можете найти параметр «Пользовательские поля» в разделе «Настройки» на левой панели панели инструментов WordPress.

2. Когда вы выберете опцию Custom Fields, вы увидите экран, как показано ниже.

Нажмите «Добавить», и откроется новый экран для добавления новой группы полей. Итак, назовите свою группу полей. Например, здесь название группы полей – Настройки jQuery.

Настраиваемые поля → Добавить новое → Добавить новую группу полей

Как добавить JavaScript и jQuery в WordPress

3. Теперь нажмите кнопку «Добавить поле». Откроется новая опция «Сведения о поле», как показано ниже.

Как добавить JavaScript и jQuery в WordPress

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

4. Просто опубликуйте изменения, нажав кнопку «Обновить» в правом верхнем углу экрана.

5. Перейдите в Внешний вид → Редактор → Файлы темы. Если вы хотите добавить свой скрипт перед загрузкой страницы, поместите поле в header.php. В случае, если вы хотите, чтобы ваш скрипт после загрузки страницы включил его в footer.php. Здесь он включен в header.php.

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

<?php wp_head(); ?> <? php the_field('jquery_script'); ?>

Как добавить JavaScript и jQuery в WordPress

6. Перейдите к публикации, в которой вы хотите отразить изменения, с левой панели панели инструментов. Здесь Hello World – это сообщение, а в скрипт jQuery добавлено предупреждение, как показано. Затем обновите сообщение.

Как добавить JavaScript и jQuery в WordPress

7. Теперь, когда вы видите предварительный просмотр этого сообщения, вы можете увидеть предупреждающее сообщение.

Как добавить JavaScript и jQuery в WordPress

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

Simple Custom CSS и JS – еще один популярный плагин для добавления скриптов в WordPress. Нет необходимости изменять файлы вашей темы. Он сохранит внесенные вами изменения, даже если вы переключите тему. Вы можете вставлять скрипты во фронтенд или в админку. Вы можете включить встроенный или внешний сценарий. Это дает вам больше гибкости.

Как добавить JavaScript и jQuery в WordPress

Вы можете добавить любой собственный код CSS, JS или HTML. Просто щелкните код, который вы хотите добавить, и укажите тип связи (внутренняя / внешняя), место для добавления и т.д., Как показано.

Как добавить JavaScript и jQuery в WordPress

  1. Активных установок: 100 000+
  2. Рейтинг: 4.7

Точно так же вы можете использовать плагин Scripts n Styles. Этот плагин позволяет вам добавлять JavaScript / jQuery на страницу, публикацию или сайт WordPress. Вы можете добавить как внешний источник скрипта, так и скопировать и вставить свой собственный JavaScript / jQuery в теги или над тегом .

Как добавить JavaScript и jQuery в WordPress

  1. Активных установок: 20 000+
  2. Рейтинг: 4.4

Какой метод вы используете для добавления JavaScript / jQuery на страницы или сообщения WordPress?

Надеюсь, вы хорошо познакомитесь со всеми различными методами добавления jQuery или JavaScript в WordPress. Вы можете выбрать метод постановки в очередь или использовать плагины. Оба одинаково хороши. Но если вы выбираете плагины, у вас есть явное преимущество в том, чтобы определять свои собственные правила. Вы можете ограничить доступ к добавлению скриптов для определенных страниц, сообщений и пользователей. Если вы настраиваете дизайн своего сайта, вы можете использовать наш конструктор сайтов. Он предлагает вам возможность добавить собственный CSS, JavaScript / jQuery в тему вашего сайта. Несомненно, добавление jQuery / JavaScript расширит возможности вашего сайта.

Связанное чтение: Учебник по WordPress 101

Лучшие хостинг-провайдеры WordPress

Как проверить версию WordPress

Как найти URL для входа в WordPress

Как установить WordPress

Что это за тема WordPress

Как изменить язык WordPress

Как создать собственную страницу входа в WordPress

Как создать тему WordPress с нуля

Как исправить неработающее обновление страницы WordPress

Если у вас есть какие-либо вопросы, вы можете поделиться в разделе комментариев ниже.

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

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