Как легко добавить JavaScript в WordPress-страницах или постах (3 метода)

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

^

Что такое JavaScript?

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

Если вы хотите встроить видеоплеер, добавить калькулятор или какой-либо другой сторонний сервис, вам будет предложено скопировать и вставить фрагмент кода JavaScript на свой веб-сайт.

Типичный фрагмент кода JavaScript может выглядеть следующим образом:

^

Теперь, если вы добавите фрагмент кода JavaScript в сообщение или страницу WordPress, то он будет удален WordPress при попытке сохранить его.

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

Способ 1. Добавьте JavaScript для всего сайта, используя верхние и нижние колонтитулы

Иногда вам будет предложено скопировать и вставить фрагмент кода JavaScript на свой веб-сайт, чтобы добавить сторонний инструмент. Эти скрипты обычно идут в раздел заголовка или внизу перед тегом </ body> вашего сайта. Таким образом, код загружается при каждом просмотре страницы.

Например, код установки Google Analytics должен присутствовать на каждой странице вашего сайта, чтобы он мог отслеживать посетителей вашего сайта.

Вы можете добавить такой код в файлы header.php или footer.php вашей темы WordPress. Однако эти изменения будут перезаписаны при обновлении или изменении темы.

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

Во-первых, вам нужно установить и активировать плагин Insert Headers and Footers. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.

После активации вам нужно зайти на страницу Настройки »Вставить верхние и нижние колонтитулы. Вы увидите два поля, одно для верхнего колонтитула, а другое для нижнего колонтитула.

^»

Теперь вы можете вставить код JavaScript, который вы скопировали, в одно из этих полей, а затем нажать кнопку «Сохранить».

Плагин Insert Headers and Footers теперь будет автоматически загружать код, который вы добавили на каждой странице вашего сайта.

Способ 2. Добавление кода JavaScript вручную с помощью кода

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

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

^

Добавление JavaScript к определенной публикации или странице WordPress с использованием кода

Предположим, вы хотите загрузить этот javascript только в определенный пост WordPress. Для этого вам необходимо добавить условную логику в код. Взгляните на следующий пример:

^

Если вы внимательно посмотрите на приведенный выше код, то увидите, что мы обернули код javascript вокруг условной логики для соответствия определенному идентификатору записи. Вы можете использовать это, заменив 16 с вашим собственным идентификатором сообщения.

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

^

Вместо is_single теперь мы используем is_page для проверки идентификатора страницы.

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

^

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

Способ 3. Добавление кода Javascript внутри постов или страниц с помощью плагина

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

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

После активации вам нужно отредактировать сообщение или страницу, где вы хотите добавить JavaScript. На странице редактирования сообщения нажмите кнопку «Параметры экрана» и установите флажок «Пользовательские поля».

^

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

^

Теперь появятся поля имени и значения настраиваемого поля.

Необходимо указать имя для настраиваемого поля с префиксом CODE (например, CODEmyjscode), а затем вставить код JavaScript в поле значения.

^

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

Теперь вы можете использовать это настраиваемое поле для встраивания кода JavaScript в любое место этого поста или страницы. Просто добавьте этот код для вставки в любое место вашего контента.

{{}} CODEmyjscode

Теперь вы можете сохранить свой пост или страницу и просмотреть свой сайт. Вы сможете увидеть код javascript с помощью инструмента проверки или просмотра исходного кода страницы.

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

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