Плагины, темы и скрипты
собственной разработки

Как добавить код в body WordPress: только рабочие способы

“Вставьте код в пределах тегов <body></body>” — такой текст часто встречается вебмастерам при необходимости установить сторонний сервис на сайт. Иногда требуется его разместить в подвале (footer), что тоже подразумевает работу с данным тегом. В этой статье расскажу, как установить код в body WordPress-сайта, а некоторые способы из нее подойдут и для других CMS.

добавить код в body WordPress

Body в шаблонах WordPress

В любом грамотно написанном коде интернет-ресурса есть тег body, его принято называть “телом”. Это HTML-контейнер, куда помещается сам вывод контента, а также дополнительная служебная информация. Все меню, тексты, изображения и прочее включены в данный сегмент разметки. Имеется он и на каждом сайте WordPress, независимо от используемого шаблона.

Открывающий элемент <body> в порталах на WP обычно располагается в файле header.php используемой темы, а закрывающий в footer.php. Если посмотреть исходный код любой страницы в интернете, то можно увидеть, что элемент следует прямо за разделом head.

Зачем добавлять код в body

Прописать информацию в body обычно требуется для внешних сервисов, которые должны загружаться после основного контента. В таких случаях принято размещать его перед закрывающим </body>.

Обработчик браузера выполняет код последовательно, то есть сначала исполняется то, что размещено выше — в элементе head. Туда помещаются ключевые скрипты, стили, мета-информация и другие важные сведения. Далее “читается” информация в body, и тоже последовательно. Таким образом, при размещении скриптов или других данных ближе к концу страницы (footer), они будут обрабатываться уже после загрузки для пользователя основной информации.

Добавить что-то в body обычно необходимо для установки:

  • счетчиков для учета данных посетителей;
  • скриптов аналитических систем;
  • загрузчиков рекламы или партнерских сервисов;
  • калькуляторов или специфических форм отправки заявок;
  • онлайн-чатов.

Иногда перечисленные выше сервисы просят указывать их коды в head cайта, но они могут работать и при вставке в конец страницы - перед </body>. Рекомендую в случае с каждым конкретным сервисом думать, как лучше его разместить на сайте. Если его ранняя загрузка не критична, такой скрипт лучше отправить в конец страницы.

Лучшие плагины для вставки своих скриптов в боди темы

Самый простой способ поставить необходимый код в <body> — это воспользоваться плагинами. Их есть великое множество: некоторые многофункциональные, другие — только для постановки данных в различные контейнеры. Рассмотрим несколько удобных вариантов.

Clearfy Pro


Настройка через Clearfy Pro

Плагин Clearfy Pro относится к числу многофункциональных решений, которые дают возможность, помимо прочих своих полезных функций, очень просто вставить код в body. Данный плагин отсутствует в репозитории, его можно приобрести на сайте разработчиков WPShop и установить в админке WordPress.

Clearfy Pro со скидкой 15%

Когда плагин будет установлен и активирован, перейдите в раздел Clearfy Pro в административной консоли и далее выберите пункт “Код”.

Настройка Clearfy Pro

Пролистайте вниз доступные опции и активируйте переключатель “Код перед </body>”. Вставьте нужные данные в соответствующее поле ввода и нажмите “Сохранить изменения”.

Инсерт в боди через Clearfy Pro

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

Если вы используете плагин кэширования, может потребоваться сбросить кэш.

Как отмечалось выше, Clearfy Pro — это многофункциональный инструмент, который позволяет не только вставлять в нужное место разметки дополнительную информацию.

Еще несколько полезных опций, которыми он обладает:
Оптимизация с точки зрения SEO, в том числе — возможность настроить редиректы, создать быстро правильный robots.txt и улучшить работу популярного плагина Yoast SEO.
Замена нескольких плагинов — через Clearfy Pro можно отключить редактор Gutenberg, включить транслитерацию URL, добавить плашку про сбор cookie и так далее.
Защита контента и самого сайта: есть возможность спрятать страницу входа, ввести ограничения на перебор паролей, добавить копирайт при копировании информации или даже полностью запретить копирование стандартными средствами.
Очистка WordPress от “мусора” — ненужных внешних и внутренних ссылок, лишних стилей, комментариев и прочего. В том числе с его помощью можно провести минификацию HTML.

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

Промокод на Clearfy Pro

Insert Headers and Footers

Модуль Insert Headers and Footers

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

Установить решение легко из репозитория WordPress. Когда оно установлено:

  1. Перейдите в левом меню админки сайта в пункт “Сниппеты кода”, где находятся параметры плагина.
  2. Далее выберите подраздел “Шапка и подвал”.
  3. Здесь можно вставить все необходимое сразу после открывающего <body> в поле “Основная часть” или перед закрывающим </body> в поле “Подвал (footer)”.
  4. Добавив нужные данные, нажмите “Сохранить изменения”.

Code в боди через Insert Headers and Footers

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

Flat Pm

Надстройка Flatpm

Через Flat Pm добавить нужный сервис аналитики или другой скрипт в тело тоже не составит труда.

Установите решение из магазина WP и активируйте его, после чего в левом меню появится в административной консоли пункт Flat PM. В этом меню в разделе “Header и Footer” нужно добавить в блок “Код перед </body>” необходимую информацию и убедиться, что переключатель в положении On.

Flat Pm настройки

Вставив все необходимое, нажмите “Сохранить настройки”.

Как вставить код в тело шаблона

Можно не устанавливать отдельный плагин, чтобы добавить код в боди, а использовать возможности шаблона или файлы темы.

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

Через настройки шаблонов с такой функцией

Рассмотрим в качестве примера шаблон Reboot, подробный обзор которого есть на нашем сайте. Чтобы поставить код в нем перед закрывающим body, откройте опции, где выполняется кастомизация.

Настройки шаблона Reboot

После этого выберите пункт “Коды”.

Раздел с кодами

Нужную информацию поместите в поле “Перед </body>” и нажмите “Опубликовать”.

Добавление данных в Reboot

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

Добавление кода в файл footer.php темы

Поскольку закрывающий тег </body> располагается в файле футера темы WordPress, можно прямо в него добавить скрипты нужных сервисов или другие сведения.

Рекомендую использовать дочернюю тему (подтему), чтобы изменения сохранились при обновлении шаблона.

Отредактировать файл footer.php можно из админки ВордПресс. Авторизуйтесь на ресурсе с аккаунтом администратора, перейдите в раздел “Внешний вид” — “Редактор тем”. Здесь выберите файл footer.php. Укажите произвольный код прямо перед закрытием тела страницы. После этого нажмите “Обновить файл”, чтобы изменения вступили в силу.

Редактирование footer

Бонус: добавление скрипта в body темы Avada

Популярная зарубежная тема Avada установлена на многих сайтах: блогах, магазинах, лендингах и других.

В качестве бонуса расскажу, как добавить скрипт в body этой темы, подобные вопросы часто возникают у вебмастеров. Это не какой-то высший класс, но нужно понимать строение конкретной темы, чтобы выполнить подключение скрипта.

Проще всего в этом шаблоне добавить скрипт в тело страницы при помощи файла functions.php. В админке перейдите: “Внешний вид” — “Редактор тем” и внесите в файл functions.php указанный ниже код, предварительно заменив "Сюда вставьте нужный код" на целевые данные.

При таком методе вставка происходит после открывающего body, а не перед закрывающим.

Добавление через панель управления хостинга

Неоптимальный способ — добавление необходимого кода через панель хостинга. Есть 2 варианта, каким образом это можно сделать:

  • Путем обращения в службу поддержки. В таком случае многое зависит от самого хостинга. Отзывчивая служба поддержки может согласиться внести изменения, но нельзя гарантировать, что они сделают это быстро.
  • Самостоятельно внесением изменений в файлы. Нужно будет просто найти, в каком файле (обычно это footer.php) находится закрывающий тег body, и вставить данные перед ним.

Добавить код в тело страниц сайта через панель управления хостинга можно, но это дополнительный “костыль”. Гораздо проще, быстрее и удобнее использовать другие методы.

Выводы

Новички обычно размещают код в body через файл footer.php, и это хороший способ, если используется дочерняя тема. Но при смене темы нужно не забыть перенести его на новый шаблон. Удобным вариантом является и вставка напрямую в настройках темы, если в ней предусмотрена такая функциональность.

На своих сайтах я предпочитаю вставлять код в body через плагин Clearfy Pro. Причина здесь понятная — данный плагин является незаменимым, поэтому я уверен, что даже при смене темы я его оставлю включенным. А это значит, что не нужно будет ничего переносить. Ставить же еще дополнительные плагины только для рассматриваемых целей не имеет смысла.

Если вы еще не опробовали Clearfy Pro на своем сайте, то рекомендую это сделать. Сам плагин можно сейчас забрать со скидкой в магазине разработчиков по промокоду.

-15% на Clearfy Pro

Добавить комментарий

наверх
×

Пора действовать!

Скидки на
WordPress!

-20%
на премиум темы

Успей купить ⋙