Как добавить javascript в wordpress
Перейти к содержимому

Как добавить javascript в wordpress

  • автор:

Как добавить JavaScript на страницы и записи WordPress

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

Если вы еще не начали карьеру в IT, приходите на наш бесплатный вебинар, чтобы узнать, как начать зарабатывать с помощью зерокодинга и нейросетей!

Понимание необходимости

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

Методы добавления

WordPress предоставляет несколько встроенных функций для управления скриптами и стилями на страинце.

  • wp_enqueue_script(): эта функция WordPress используется для добавления на сайт. Она позволяет правильно добавлять скрипты и стили и контролировать их загрузку.
    Пример:
  • php

wp_enqueue_script(‘мой-скрипт’, get_template_directory_uri() . ‘/js/мой-скрипт.js’, array(‘jquery’), ‘1.0’, true);

  • wp_register_script(): Эта функция позволяет зарегистрировать скрипт для последующей загрузки с помощью wp_enqueue_script().

Использование специальных плагинов

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

Шаги по добавлению

  • В редакторе страницы/записи найдите блок или раздел для вставки JavaScript.
  • Используйте HTML блок или специальный блок, предоставляемый редактором (в зависимости от используемой темы или установленных плагинов).
  • Вставьте ваш код в блок.

Добавление с использованием плагина

  • Установите и активируйте плагин, позволяющий вставлять его на страницы и записи.
  • Откройте страницу/запись, к которой вы хотите добавить скрипт.
  • Найдите соответствующую опцию для его добавления и вставьте свой код.

Лучшие практики при добавлении на сайт

  • Минимизация и оптимизация: старайтесь минимизировать и оптимизировать код для улучшения производительности.
  • Контроль конфликтов: при добавлении JavaScript убедитесь, что нет конфликтов между скриптами.
  • Резервное копирование: перед внесением изменений в код, всегда делайте резервные копии, чтобы избежать потери данных в случае проблем.

Оптимизация

  • Для улучшения производительности сайта, рекомендуется минимизировать и объединить JavaScript файлы. Существуют плагины, такие как «Autoptimize» или «WP Rocket», которые автоматически выполняют эту задачу.
  • Отложенная загрузка скриптов позволяет вашему сайту быстрее загружаться, поскольку они загружаются только тогда, когда страница прокручивается или запрашивается пользователем. Плагины типа «WP Rocket» предлагают функционал отложенной их загрузки.

Заключение

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

wp_enqueue_script() — подключение JavaScript

Рекомендуемый метод подключения скриптов WordPress. Имеет ряд особенностей:

  • JS-файлы вставляются на страницы сайта через функции wp_head() и wp_footer(),
  • в админке же скрипты объединяются в один с помощью PHP-обработчика load-scripts.php ,
  • позволяет подключать скрипты с учетом их зависимостей друг от друга;

То есть нужный вам js-файл не будет вставляться в HTML сразу же, как только вы использовали функцию, т.к. функция всего лишь помещает файл в очередь для вывода.

Если хотите узнать больше про правильное подключение JS-файлов WordPress, то могу порекомендовать вам мой видеоурок.

wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false, $in_footer = false )

Параметры функции wp_enqueue_script()

$handle (строка) какое-нибудь название (идентификатор), придуманное вами (строка в нижнем регистре), либо можно подключить уже зарегистрированные (через wp_register_script()) ранее скрипты, используя их идентификаторы $src (строка) абсолютный URL файла JavaScript, который требуется подключить, этот параметр (и все последующие тоже) нужен только для незарегистрированных скриптов $deps (массив) массив идентификаторов скриптов, от которых зависит подключаемый скрипт $ver (строка) версия файла. Если установить значение null , то версия не будет указываться. По умолчанию — текущая версия WordPress. Подробнее про параметр. $in_footer (логическое) по умолчанию файлы JavaScript подключаются внутри тегов . Если же указать данный параметр равным true , тогда скрипт будет вставлен непосредственно перед закрывающим тегом .

Пример 1 – подключение JS файла

Для вставки скриптов во фронтэнде (т.е. не в админке), используйте хук wp_enqueue_scripts , пример:

add_action( 'wp_enqueue_scripts', 'true_include_myscript', 25 ); function true_include_myscript() { wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/script.js', array(), '3.0' ); }

Тот же самый пример, но только с зависимостью от jQuery:

add_action( 'wp_enqueue_scripts', 'true_include_myscript_dep_jquery', 25 ); function true_include_myscript_dep_jquery() { wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/script.js', array( 'jquery' ), '3.0' ); }

Пример подключения в админке

Для подключения скриптов только в админке используйте хук admin_enqueue_scripts , например:

add_action( 'admin_enqueue_scripts', 'true_include_in_admin', 25 ); function true_include_in_admin() { wp_enqueue_script( 'myscript', . ); }

Пример 2 – подключение jQuery CDN

Иногда бывает, что вы хотите подключите какой-то скрипт с CDN, это даже не обязательно должен быть jQuery, в этом случае указываем полный URL файла.

add_action( 'wp_enqueue_scripts', 'true_jquery_cdn', 25 ); function true_jquery_cdn() { wp_deregister_script( 'jquery' ); wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' ); }

Пример 3 – как подключить JS к HTML

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

Для подключения между тегами и мы будем использовать хук wp_head:

add_action( 'wp_head', 'truemisha_script_to_head', 25 ); function truemisha_script_to_head() { echo ''; }

А для футера сайта соответственно используем хук wp_footer:

add_action( 'wp_footer', 'truemisha_script_to_footer', 25 ); function truemisha_script_to_footer() { echo ''; }

Если хотите узнать больше про правильное подключение JS-файлов WordPress, то могу порекомендовать вам мой видеоурок.

Пример 4. Подключение JS только на странице настроек конкретного плагина

Получается, что мы подключаем необходимый JavaScript файл только там, где нужно — это же здорово!

add_action( 'admin_init', 'true_plugin_admin_init' ); add_action( 'admin_menu', 'true_plugin_admin_menu' ); function true_plugin_admin_init() { /* * Регистрируем скрипт, * он кстати должен находиться той же папке, что и файл, в который будет вставлен этот код. */ wp_register_script( 'myscript', plugins_url( '/myscript.js', __FILE__ ) ); } function true_plugin_admin_menu() { /* * Добавляем субменю настроек плагина в Параметры. */ $page_hook_suffix = add_submenu_page( 'options-general.php', 'Мой плагин', 'Настройки моего плагина', 'manage_options', 'true-plugin', 'true_plugin_print_page' ); /* * Нетрудно догадаться, что вся фишка кроется в переменной $page_hook_suffix */ add_action( 'admin_print_scripts-' . $page_hook_suffix, 'true_plugin_admin_scripts' ); } function true_plugin_admin_scripts() { /* * Подключаем наш уже зарегистрированный ранее скрипт. */ wp_enqueue_script( 'myscript' ); } function true_plugin_print_page() { /* * Cодержимое страницы настроек. */ echo 'Привет'; }

Таблица стандартных скриптов в WordPress

Все скрипты, перечисленные в этой таблице, регистрировать не нужно, так как они уже присутствуют в ядре WordPress и зарегистрированы, достаточно указать их идентификатор при подключении, например: wp_enqueue_script( ‘идентификатор’ ) или:

wp_enqueue_script( 'jquery' );
Идентификатор Файл Зависимости
jcrop /wp-includes/js/jcrop/jquery.Jcrop.min.js
swfobject /wp-includes/js/swfobject.js
swfupload /wp-includes/js/swfupload/swfupload.js
swfupload-queue /wp-includes/js/swfupload/plugins/swfupload.queue.js
swfupload-handlers /wp-includes/js/swfupload/handlers.min.js
jquery /wp-includes/js/jquery/jquery.js json2 (для AJAX запросов)
jquery-form /wp-includes/js/jquery/jquery.form.min.js jquery
jquery-color /wp-includes/js/jquery/jquery.color.min.js jquery
jquery-masonry /wp-includes/js/jquery/jquery.masonry.min.js jquery
jquery-ui-core /wp-includes/js/jquery/ui/jquery.ui.core.min.js jquery
jquery-ui-widget /wp-includes/js/jquery/ui/jquery.ui.widget.min.js jquery
jquery-ui-mouse /wp-includes/js/jquery/ui/jquery.ui.mouse.min.js jquery
jquery-ui-accordion /wp-includes/js/jquery/ui/jquery.ui.accordion.min.js jquery
jquery-ui-autocomplete /wp-includes/js/jquery/ui/jquery.ui.autocomplete.min.js jquery
jquery-ui-slider /wp-includes/js/jquery/ui/jquery.ui.slider.min.js jquery
jquery-ui-tabs /wp-includes/js/jquery/ui/jquery.ui.tabs.min.js jquery
jquery-ui-sortable /wp-includes/js/jquery/ui/jquery.ui.sortable.min.js jquery
jquery-ui-draggable /wp-includes/js/jquery/ui/jquery.ui.draggable.min.js jquery
jquery-ui-droppable /wp-includes/js/jquery/ui/jquery.ui.droppable.min.js jquery
jquery-ui-selectable /wp-includes/js/jquery/ui/jquery.ui.selectable.min.js jquery
jquery-ui-position /wp-includes/js/jquery/ui/jquery.ui.position.min.js jquery
jquery-ui-datepicker /wp-includes/js/jquery/ui/jquery.ui.datepicker.min.js jquery
jquery-ui-resizable /wp-includes/js/jquery/ui/jquery.ui.resizable.min.js jquery
jquery-ui-dialog /wp-includes/js/jquery/ui/jquery.ui.dialog.min.js jquery
jquery-ui-button /wp-includes/js/jquery/ui/jquery.ui.button.min.js jquery
jquery-effects-core /wp-includes/js/jquery/ui/jquery.ui.effect.min.js jquery
jquery-effects-blind /wp-includes/js/jquery/ui/jquery.ui.effect-blind.min.js jquery-effects-core
jquery-effects-bounce /wp-includes/js/jquery/ui/jquery.ui.effect-bounce.min.js jquery-effects-core
jquery-effects-clip /wp-includes/js/jquery/ui/jquery.ui.effect-clip.min.js jquery-effects-core
jquery-effects-drop /wp-includes/js/jquery/ui/jquery.ui.effect-drop.min.js jquery-effects-core
jquery-effects-explode /wp-includes/js/jquery/ui/jquery.ui.effect-explode.min.js jquery-effects-core
jquery-effects-fade /wp-includes/js/jquery/ui/jquery.ui.effect-fade.min.js jquery-effects-core
jquery-effects-fold /wp-includes/js/jquery/ui/jquery.ui.effect-fold.min.js jquery-effects-core
jquery-effects-highlight /wp-includes/js/jquery/ui/jquery.ui.effect-highlight.min.js jquery-effects-core
jquery-effects-pulsate /wp-includes/js/jquery/ui/jquery.ui.effect-pulsate.min.js jquery-effects-core
jquery-effects-scale /wp-includes/js/jquery/ui/jquery.ui.effect-scale.min.js jquery-effects-core
jquery-effects-shake /wp-includes/js/jquery/ui/jquery.ui.effect-shake.min.js jquery-effects-core
jquery-effects-slide /wp-includes/js/jquery/ui/jquery.ui.effect-slide.min.js jquery-effects-core
jquery-effects-transfer /wp-includes/js/jquery/ui/jquery.ui.effect-transfer.min.js jquery-effects-core
schedule /wp-includes/js/jquery/jquery.schedule.js jquery
suggest /wp-includes/js/jquery/suggest.min.js jquery
thickbox /wp-includes/js/thickbox/thickbox.js
jquery-hotkeys /wp-includes/js/jquery/jquery.hotkeys.min.js jquery
sack /wp-includes/js/tw-sack.min.js
quicktags /wp-includes/js/quicktags.min.js
autosave /wp-includes/js/autosave.min.js
wp-ajax-response /wp-includes/js/wp-ajax-response.min.js
wp-lists /wp-includes/js/wp-lists.min.js
common /wp-admin/js/common.min.js
password-strength-meter /wp-admin/js/password-strength-meter.min.js
comment-reply /wp-includes/js/comment-reply.min.js
media-upload /wp-admin/js/media-upload.min.js
word-count /wp-admin/js/word-count.min.js
json2 /wp-includes/js/json2.min.js
plupload /wp-includes/js/plupload/plupload.js
underscore /wp-includes/js/underscore.min.js
backbone /wp-includes/js/backbone.min.js

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

  1. Параметры
  2. Пример 1 – подключение
  3. Пример 2 – jQuery через CDN
  4. Пример 3 – подключение тегом script
  5. Пример 4 – только на странице плагина
  6. Скрипты в ядре
Комментарии — 34

Лариса 16 Окт 2013

Михаил, здравствуйте! Возник вопрос: в Кодексе в описании этой функции нет параметра in_footer. Так как все-таки на самом деле? Дело в том, что занимаюсь переносом скриптов из хедера в подвал, и было бы очень удобно, если бы функция действительно принимала этот параметр)

Миша 16 Окт 2013
Добрый день)
а в чем собственно вопрос? этот параметр есть, по умолчанию принимает значение false
Лариса 16 Окт 2013

Вопрос только в том, что на странице описания этой функции в Кодексе об этом параметре нет ни слова. А у Вас прочитала, вот и спрашиваю.

Миша 17 Окт 2013
русская версия Кодекса мягко говоря не очень) да и в английской иногда бывают недочеты.
Лариса 16 Окт 2013
И вернулась сказать спасибо) Действительно есть и действительно работает. Большое спасибо 🙂
Миша 17 Окт 2013
пожалуйста)
Евгений 28 Ноя 2013

Спасибо за статью.
Нашел тут сайт с русским сервером скриптов
http://salat-production.ru/interactive-jquery-mootools-cdn.php

VRS 24 Мар 2014

Доброй ночи.
Подскажи, пожалуйста, а как подключить новый медиазагрузчик?
Вот такой код выводит «старый»

function my_add_upload_scripts() { wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); wp_register_script( 'my-upload-script' /* Подключаем JS-код задающий поведение * загрузчика и указывающий, куда вставлять * ссылку после загрузки изображения * Его код будет приведен ниже. */ ,get_bloginfo('template_url').'/js/upload.js' /* Указываем скрипты, от которых * зависит наш JS-код */ ,array('jquery','media-upload','thickbox') ); wp_enqueue_script('my-upload-script'); } // Запускаем функцию подключения загрузчика if( is_admin() ) add_action('admin_print_scripts', 'my_add_upload_scripts');

пробовала менять media-upload на plupload-full, но не работает.
Антон 15 Авг 2014

$deps
(массив) массив идентификаторов скриптов, от которых зависит подключаемый скрипт Вот про $deps я вообще ничего не понял какие там должны быть идентификаторы?? Что от чего зависит (т.е как может быть что бы скрипты друг от друга зависили)?? Можете пожалуйста подробнее растолковать.

Миша 15 Авг 2014

Ну например у вас есть какой-то код jQuery и он не будет работать пока не поключена сама библиотека jQuery — один из примеров такой зависимости.

Антон 15 Авг 2014
Да например js код какой то не может работать без jq но можно прописать же так например

wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/jq.js', '', '3.0', false ); wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/js.js', '', '3.0', false );

и все будет зависеть и все без всяких array в чем тогда разница?
Миша 16 Авг 2014

Дело в том, что скрипты могут подключаться в разных местах, не только в теме, но и в плагинах, поэтому, чтобы все файлы задействовались в правильном порядке, нужно указывать этот параметр $deps.

Антон 16 Авг 2014

Все понял спасибо. И еще как сделать так что бы Jquery подключался у меня в wp_footer перед боди. Пишу вот так wp_enqueue_script(‘jquery’); но он у меня в шапке подключается.

Миша 16 Авг 2014
Нужно провернуть примерно такую комбинацию:

wp_deregister_script('jquery'); wp_register_script('jquery', 'URL скрипта', false, null, true); wp_enqueue_script('jquery');

Антон 16 Авг 2014
Все спасибо большое!
Миша 17 Авг 2014
Рад помочь 🙂
Сайра 23 Янв 2015

Всем здравствуйте. Извините за вопрос, скорее всего он для всех Вас покажется очень глупым. Я прописываю такой код в WP

Ваш департамент*
Ваш отдел*
function onChange() < var objSel = document.getElementById("change");; var select1 = document.getElementById("change1"); var select2 = document.getElementById("change2"); var select3 = document.getElementById("change3"); var select4 = document.getElementById("change4"); var select5 = document.getElementById("change5"); if (objSel.value == 1) < select1.style.display = 'block'; select2.style.display = 'none'; select3.style.display = 'none'; select4.style.display = 'none'; select5.style.display = 'none'; >if (objSel.value == 2) < select2.style.display = 'block'; select1.style.display = 'none'; select3.style.display = 'none'; select4.style.display = 'none'; select5.style.display = 'none'; >if (objSel.value == 3) < select3.style.display = 'block'; select1.style.display = 'none'; select2.style.display = 'none'; select4.style.display = 'none'; select5.style.display = 'none'; >if (objSel.value == 4) < select4.style.display = 'block'; select2.style.display = 'none'; select3.style.display = 'none'; select1.style.display = 'none'; select5.style.display = 'none'; >>

и если честно, то он у меня не работает(((( а я не знаю куда вставлять код, чтобы подключить JS((( ПОМОГИТЕ ПОЖАЛУЙСТА

Миша 24 Янв 2015
Здравствуйте! Скажите, какая у этого кода задача?
Сайра 4 Фев 2015

у меня имеется два selectmenu. При выборе департамента, у меня автоматически должен появляться отдел. Если этот код сохранить через блокнот в расширении .js, то все идеально работает, а на WР никак не могу подключить. На сколько я поняла, мне необходимо сохранить мой скрипт в расширении js и положить его в папку плагины, а потом просто ссылаться на него, но никак не разобралась и ничего не заработало((((

Сайра 4 Фев 2015
то есть, если сохранить в блокноте в расширении .html то все работатет
Миша 4 Фев 2015

В таком случае сначала просто вставьте этот код в WordPress туда, где его нужно вывести, в какой-нибудь php-файл. Сохранять его в .js неправильно, так как там также имеется и html код.

артем 14 Май 2015

здравствуйте. хочу реализовать на блоге вордпресс печать по этой инструкции: _http://loco.ru/materials/107-php-print-this-page-feature-javascript. я не понимаю, как подключить скрипт через отдельный Js-файл. пробовал, но не получается. можете объяснить и сколько стоит?

Миша 15 Май 2015
Здравствуйте. Вот так:

script src="URL скрипта">script>

артем 15 Май 2015

Миша, огромное спасибо, заработало. только в бланке печати русские буквы отображаются в виде символов (когда подключаю Js файл). когда скрипт просто вставляю в тело, то буквы отображаются нормально. может еще что-то надо указать, чтобы кириллица отображалась?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript на WordPress: как добавить

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

Что такое JavaScript и как работает

JavaScript — мультипарадигменный язык программирования. С его помощью можно добавить на веб-страницу сложные элементы: динамически обновляемый контент, интерактивные карты, 2D/3D-анимацию, прокрутку видео и другое.

Скрипты JS обрабатываются не на сервере, а прямо в браузере. Чтобы браузер мог прочитать JavaScript и отобразить пользователю нужный контент, в него встроен специальный движок. Именно он обрабатывает JS-скрипты и затем переводит их в машинный код. Самый популярный в настоящее время движок V8 был разработан в 2008 году компанией Google.

Скрипт JS выглядит следующим образом:

  

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

Как подключить JS в WordPress

Добавить JS в WordPress можно одним из трёх способов:

  • через файл functions.php,
  • с помощью плагина Insert Headers and Footers,
  • с помощью плагина Shortcoder.

через изменение файла functions.php

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

  1. Войдите в панель управления хостингом.
  2. Откройте папку wp-includesв корневом каталоге сайта.
  3. Кликните по файлу functions.php, наведите курсор мыши на кнопку Редактировать и выберите Открыть:
  4. Добавьте код и нажмите Ok: Готово, скрипты для сайта WordPress добавлены.

через плагин Insert Headers and Footers

Insert Headers and Footers by WPBeginner — это простой в использовании плагин, который позволяет вставить код Google Analytics, JavaScript, пользовательский CSS и другие данные в нужную часть сайта WordPress — шапку, подвал или тело. При этом саму тему редактировать не нужно.

  1. Войдите в WordPress.
  2. Перейдите раздел ПлагиныДобавить новый. Введите «Insert Headers and Footers by WPBeginner» в поисковую строку и кликните Установить:
  3. Нажмите Активировать:
  4. Перейдите в раздел НастройкиInsert Headers and Footers. Вставьте скрипт в одну из трёх частей сайта:
  • в Header (шапка сайта),
  • в Body (основная часть сайта),
  • в Footer (подвал сайта).

5. После этого нажмите Сохранить изменения: Готово, подключение скрипта для WordPress завершено.

через плагин Shortcoder

Shortcoder — плагин для создания и вставки шорткода в текст записей. Очень прост в использовании. С его помощью можно добавить на страницы рекламу Я.Директ, любые JS-скрипты, Flash-содержимое и многое другое.

  1. Войдите в WordPress.
  2. Перейдите раздел ПлагиныДобавить новый. Введите «Shortcoder», а затем кликните Установить:
  3. Нажмите Активировать:
  4. В настройках плагина из раскрывающегося списка выберите режим Code editor:
  5. Укажите название и добавьте код. Этот фрагмент нельзя добавить на страницу до публикации, но можно сохранить в качестве шаблона. Чтобы создать черновик шаблона, нажмите Сохранить:
  6. Чтобы сохранить готовый шаблон, нажмите Опубликовать: Готово. Теперь вы можете встроить этот шаблон на любую страницу.

Популярные статьи

  • Как указать (изменить) DNS-серверы для домена
  • Я зарегистрировал домен, что дальше
  • Как добавить запись типа A, AAAA, CNAME, MX, TXT, SRV для своего домена
  • Что такое редирект: виды и возможности настройки
  • Как создать почту со своим доменом

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *