Перейти к содержимому
Наше приложение «Дешевые авиабилеты» в AppGallery >>

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

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

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

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

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

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

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

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

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

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

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

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

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

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