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

Вставка кода JavaScript на отдельные страницы или записи сайта WordPress с использованием функции и шорткода или подключением файла скрипта.

Содержание

Пример вставляемого кода

Для обоих вариантов добавления кода JavaScript на отдельные страницы или записи сайта WordPress будем использовать следующий пример:

!-- код параграфа (абзаца) с идентификатором «mytext» -->

var x = 'Ура!';

var y = ' Мой скрипт работает!';

document.getElementById('mytext').innerHTML = x + y;

</script>

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

Вставка с помощью шорткода

В файл functions.php дочерней темы вставляем функцию, добавляющую произвольный текст в html-страницу, и код создания шорткода:

//Функция, вставляющая произвольный текст в html-страницу

function getMyText() {

return "

var x = 'Ура!';

var y = ' Мой скрипт работает!';

document.getElementById('mytext').innerHTML = x + y;

</script>

}

// Создание шорткода

add_shortcode('MyScript1', 'getMyText');

MyScript1 — название (идентификатор) шорткода, которое будет использоваться на html-странице;
getMyText — название функции, которая должна исполнится, если будет найден шорткод.

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

Код, который добавляется на страницу в html-редакторе:

[MyScript1]

Подключение файла скрипта

Создаем новый текстовый файл, придумываем ему название и сохраняем с расширением .js (в примере — mytext.js).
Записываем в файл текст кода JavaScript без открывающего и закрывающего тегов (<script>, </script>) и сохраняем.
Копируем файл (mytext.js) на хостинг в папку дочерней темы. Можно для своих js-файлов создать отдельную папку js (или с другим названием).
Подключаем файл (mytext.js) на html-странице с помощью кода: <script src="//path/mytext.js"></script>. Путь к файлу может быть указан как абсолютный, так и относительный.

Текст кода JavaScript, записанный в файл mytext.js:

var x = 'Ура!';

var y = ' Мой скрипт работает!';

document.getElementById('mytext').innerHTML = x + y;

Код подключения js-файла, размещенный при тестировании на html-странице: