Как легко добавить JavaScript на страницы или сообщения WordPress (3 метода)

/

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

Как легко добавить JavaScript в записи и страницы WordPress

Что такое JavaScript?

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

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

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

  <script type="text/javascript">     // Some JavaScript code    </script>    <!-- Another Example: --!>      <script type="text/javascript" src="/path/to/some-script.js"></script>    

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

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

Метод 1. Добавьте JavaScript по всему сайту с помощью вставки верхних и нижних колонтитулов

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

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

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

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

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

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

Вставить настройки плагина Headers and Footers

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

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

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

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

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

  function wpb_hook_javascript() {      ?>          <script>            // your javscript code goes          </script>      <?php  }  add_action('wp_head', 'wpb_hook_javascript');  

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

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

    function wpb_hook_javascript() {    if (is_single ('16')) {       ?>          <script type="text/javascript">            // your javscript code goes here          </script>      <?php    }  }  add_action('wp_head', 'wpb_hook_javascript');    

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

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

  function wpb_hook_javascript() {    if (is_page ('10')) {       ?>          <script type="text/javascript">            // your javscript code goes here          </script>      <?php    }  }  add_action('wp_head', 'wpb_hook_javascript');  

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

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

  function wpb_hook_javascript_footer() {      ?>          <script>            // your javscript code goes          </script>      <?php  }  add_action('wp_footer', 'wpb_hook_javascript_footer');  

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

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

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

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

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

Показать мета-поле настраиваемых полей

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

Добавить новое настраиваемое поле

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

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

Добавление кода JavaScript в настраиваемое поле

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

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

{{CODEmyjscode}}

Теперь вы можете сохранить свой пост или страницу и просмотреть свой сайт. Вы сможете увидеть код javascript, используя инструмент Inspect или просмотрев исходный код страницы.

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

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как добавить бесплатный чат в WordPress (простой способ)

Вы ищете решение для добавления бесплатного живого чата в WordPress? Добавление функции живого чата на ваш сайт позволяет вам взаимодействовать с

Как исправить неработающую кнопку добавления мультимедиа в WordPress

Недавно один из наших пользователей сообщил, что кнопка «Добавить медиа» на их сайте WordPress внезапно перестала работать. Эта проблема не отображает

Как правильно отключить Google AMP в WordPress

Вы хотите отключить Google AMP в WordPress? Многие блоггеры и веб-сайты, которые вскочили на подножку Google AMP, теперь отключают его по разным причинам. Проблема

Как создать всплывающее окно с купоном в WordPress (шаг за шагом)

Вы хотите создать всплывающее окно с купоном в WordPress? Всплывающие окна с купонами - отличный способ превратить посетителей вашего сайта в платящих