“Вставьте код в пределах тегов <body></body>” — такой текст часто встречается вебмастерам при необходимости установить сторонний сервис на сайт. Иногда требуется его разместить в подвале (footer), что тоже подразумевает работу с данным тегом. В этой статье расскажу, как установить код в body WordPress-сайта, а некоторые способы из нее подойдут и для других CMS.
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 относится к числу многофункциональных решений, которые дают возможность, помимо прочих своих полезных функций, очень просто вставить код в body. Данный плагин отсутствует в репозитории, его можно приобрести на сайте разработчиков WPShop и установить в админке WordPress.
Когда плагин будет установлен и активирован, перейдите в раздел Clearfy Pro в административной консоли и далее выберите пункт “Код”.
Пролистайте вниз доступные опции и активируйте переключатель “Код перед </body>”. Вставьте нужные данные в соответствующее поле ввода и нажмите “Сохранить изменения”.
После этого информация появится перед закрывающим тегом боди.
Если вы используете плагин кэширования, может потребоваться сбросить кэш.
Как отмечалось выше, Clearfy Pro — это многофункциональный инструмент, который позволяет не только вставлять в нужное место разметки дополнительную информацию.
Clearfy Pro дает множество возможностей, пользу которых понимает каждый опытный вебмастер. Его не имеет смысла отключать даже при смене шаблона, поэтому и вставлять различные внешние сервисы в body через него максимально правильно.
Insert Headers and Footers
Плагин Insert Headers and Footers создан, чтобы работать со сниппетами кода. В том числе через него можно добавить нужную информацию в body.
Установить решение легко из репозитория WordPress. Когда оно установлено:
- Перейдите в левом меню админки сайта в пункт “Сниппеты кода”, где находятся параметры плагина.
- Далее выберите подраздел “Шапка и подвал”.
- Здесь можно вставить все необходимое сразу после открывающего <body> в поле “Основная часть” или перед закрывающим </body> в поле “Подвал (footer)”.
- Добавив нужные данные, нажмите “Сохранить изменения”.
В отличие от двух других рассмотренных в рамках этой статьи решений, данный модуль позволяет вставить код не только перед закрывающим body, но и после открывающего. Подобное требуется крайне редко, и в начале статьи я уже объяснял, почему предпочтительно подключать скрипты сторонних сервисов именно в конце страницы.
Flat Pm
Через Flat Pm добавить нужный сервис аналитики или другой скрипт в тело тоже не составит труда.
Установите решение из магазина WP и активируйте его, после чего в левом меню появится в административной консоли пункт Flat PM. В этом меню в разделе “Header и Footer” нужно добавить в блок “Код перед </body>” необходимую информацию и убедиться, что переключатель в положении On.
Вставив все необходимое, нажмите “Сохранить настройки”.
Как вставить код в тело шаблона
Можно не устанавливать отдельный плагин, чтобы добавить код в боди, а использовать возможности шаблона или файлы темы.
Если на сайте будет меняться шаблон в будущем, нужно не забыть перенести из него вставленные данные в новую тему. Поэтому предпочтительнее для решения данного вопроса использовать плагин, который точно будет нужен и в новой теме.
Через настройки шаблонов с такой функцией
Рассмотрим в качестве примера шаблон Reboot, подробный обзор которого есть на нашем сайте. Чтобы поставить код в нем перед закрывающим body, откройте опции, где выполняется кастомизация.
После этого выберите пункт “Коды”.
Нужную информацию поместите в поле “Перед </body>” и нажмите “Опубликовать”.
Не у всех шаблонов предусмотрена такая возможность, а в некоторых настройка производится иначе.
Добавление кода в файл footer.php темы
Поскольку закрывающий тег </body> располагается в файле футера темы WordPress, можно прямо в него добавить скрипты нужных сервисов или другие сведения.
Рекомендую использовать дочернюю тему (подтему), чтобы изменения сохранились при обновлении шаблона.
Отредактировать файл footer.php можно из админки ВордПресс. Авторизуйтесь на ресурсе с аккаунтом администратора, перейдите в раздел “Внешний вид” — “Редактор тем”. Здесь выберите файл footer.php. Укажите произвольный код прямо перед закрытием тела страницы. После этого нажмите “Обновить файл”, чтобы изменения вступили в силу.
Бонус: добавление скрипта в body темы Avada
Популярная зарубежная тема Avada установлена на многих сайтах: блогах, магазинах, лендингах и других.
В качестве бонуса расскажу, как добавить скрипт в body этой темы, подобные вопросы часто возникают у вебмастеров. Это не какой-то высший класс, но нужно понимать строение конкретной темы, чтобы выполнить подключение скрипта.
Проще всего в этом шаблоне добавить скрипт в тело страницы при помощи файла functions.php. В админке перейдите: “Внешний вид” — “Редактор тем” и внесите в файл functions.php указанный ниже код, предварительно заменив "Сюда вставьте нужный код" на целевые данные.
|
1 2 3 4 5 6 7 |
add_action( 'avada_before_body_content', 'GA4TAGMGR' ); function GA4TAGMGR() { echo 'сюда вставьте нужный код'; } |
При таком методе вставка происходит после открывающего body, а не перед закрывающим.
Добавление через панель управления хостинга
Неоптимальный способ — добавление необходимого кода через панель хостинга. Есть 2 варианта, каким образом это можно сделать:
- Путем обращения в службу поддержки. В таком случае многое зависит от самого хостинга. Отзывчивая служба поддержки может согласиться внести изменения, но нельзя гарантировать, что они сделают это быстро.
- Самостоятельно внесением изменений в файлы. Нужно будет просто найти, в каком файле (обычно это footer.php) находится закрывающий тег body, и вставить данные перед ним.
Добавить код в тело страниц сайта через панель управления хостинга можно, но это дополнительный “костыль”. Гораздо проще, быстрее и удобнее использовать другие методы.
Выводы
Новички обычно размещают код в body через файл footer.php, и это хороший способ, если используется дочерняя тема. Но при смене темы нужно не забыть перенести его на новый шаблон. Удобным вариантом является и вставка напрямую в настройках темы, если в ней предусмотрена такая функциональность.
На своих сайтах я предпочитаю вставлять код в body через плагин Clearfy Pro. Причина здесь понятная — данный плагин является незаменимым, поэтому я уверен, что даже при смене темы я его оставлю включенным. А это значит, что не нужно будет ничего переносить. Ставить же еще дополнительные плагины только для рассматриваемых целей не имеет смысла.
Если вы еще не опробовали Clearfy Pro на своем сайте, то рекомендую это сделать. Сам плагин можно сейчас забрать со скидкой в магазине разработчиков по промокоду.