Молодогвардейцев 454015 Россия, Челябинская область, город Челябинск 89085842764
MindHalls logo

Вставить код JavaScript на страницу WordPress

Во время изучения премудростей великого и ужасного JavaScript`а, я задался очевидным вопросом: «Как тестировать скрипты?». Да ладно, тестировать можно и на локальном сервере, но внедрять в конечном счете мне их нужно на сайты с WP. Из коробки WordPress не позволяет подключать JavaScript в любом виде, а уж тем более исполнять PHP код. Но если для обхода второго ограничения есть легкие простые плагины, например Exec-PHP, то ради джаваскрипта ставить еще один плагин совсем не хочется.

Если писать скрипт напрямую в страницу, то WP любезно заменит все переносы строк абзацами и заменит кавычки так, что скрипт перестанет работать. Поэтому в голову приходит два логичных решения этой проблемы. Оба они имеют право на существование, так что давайте разбираться.

UPD!

Меня осенило на еще более элегантный и простой способ — вставить скрипт в страницу с помощью шорткодов! Подробнее с этим способом прошу ознакомиться по этой ссылке. Однако, представленные ниже способы по прежнему работают.

Вставить скрипт в шапку сайта

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

Как это сделать? Очень просто, открыть каталог сайта через любой FTP клиент и отредактировать файл, отвечающий за содержимое заголовка всех страниц. В 99% тем для WordPress этот файлик называется «header.php».

Скрипт стоит вставлять в самый конец блока <head>, сразу перед закрывающим тегом. Либо в самое начало блока <body>. Например, вот так.

javascriptinpagewp1

С этих самых пор ваш скрипт внедрен и покорно ждет момента, чтобы исполнится.

Вставить только на одну страницу

А теперь рассмотрим более реальный и менее затратный вариант решения этой проблемы. Одна страница — один скрипт. Единственный способ, который я нашел — это записать скрипт в отдельный файл и подключить его прямо на странице.

Код нужно писать без тегов <script></script> в файле с разрешением .js. Допустим, мы написали файл func.js. Теперь мы должны залить его на сервер. Можно поместить в любое место, но чаще всего в темах WP есть папка js или inc/js, в которой лежат файлы исходного кода на JavaScript. Зальем туда и подключим его с помощью строчки.

<script charset="utf-8" type="text/javascript" src="//mindhalls.ru/wp-content/themes/daniela/js/func.js"></script>

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

Например, вот так.

javascriptpagewp2

Ура, скрипт работает исключительно на этой странице!

  • А если потом случайно эту запись с жаваскриптом открыть в визуальном редактроре, скрипт не похерится? Например, через полгода решил статью откорректировать, а она открылась в визуальном редакторе. Я не пробовал, но статьи мне приходится иногда актуализировать, потому интересно, насколько умный в этом плане WP

    • Кузьминых Кирилл

      Раз на раз не приходится, иногда WP форматирует строку. Но если пришлось открыть в визуальном, лучше всегда перепроверить все строчки. У меня и исходный код частенько бьется

      • Понял мысль, тогда буду через шаблон JS вставлять — не так удобно, зато более надёжно

  • EdwardEnush

    Буду знать, благодарю за информацию.