Как добавить JavaScript на страницу Wordpress

Как вставить JavaScript в WordPress

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

Вставляем скрипт на страницу WordPress

Итак, у нас есть JavaScript код, который необходимо запускать на определенной странице. Пускай для примера это будет код, который мы рассматривали в прошлой статье "Создание кнопки и нового окна при помощи Javascript".

Создать-то кнопку мы создали, однако добавив код в стандартный редактор записей WordPress, работать он не станет. Что же делать?

Прежде всего, необходимо немного отредактировать исходный файл со скриптом - обрезаем код, исключая все, что находится за пределами <script>....</script> включительно.

Как добавить JavaScript на страницу WordPress
Обрезаем код, находящийся вне тегов script включительно

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

Через средство загрузки файлов (кнопка "добавить медиафайл) или воспользовавшись FTP доступом/ иными средствами загрузки на хостинг, заливаем файл на сервер и копируем его месторасположение (путь до файла)

Теперь нам лишь останется в редакторе записей WordPress в текстовом формате (кнопка "Текст" справа вверху), добавить следующий код:

<script charset="utf-8" type="text/javascript" src="здесь указать путь к файлу скрипта"></script>

Таким образом,если брать это применительно к файлу выше, получим код

<script charset="utf-8" type="text/javascript" src="//nukeap.ru/wp-content/uploads/2018/08/primer.js"></script>

Все это справедливо для скриптов, но в данном случае, скрипт работает при нажатии на кнопку. То есть. загрузить его на страницу - мы загрузили, а кнопку-то не создали.

Именно поэтому в тело кода на вкладке "текст" добавляем саму кнопку, вписав следующее:

 <form align = "center">
<input type="button" value="Для тестирования способа, нажми на кнопку!" onclick="subWrite()">
</form>

Работать же наш скрипт будет вот так: