Как добавить код в body, header и footer CMS WordPress. 4 Способа.

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

В WordPress, тег <body> используется так же, как и в обычном HTML — он представляет основное содержимое страницы. Однако, в контексте WordPress, весь контент страницы (заголовки, тексты, изображения, формы, и т.д.) обычно добавляется с помощью специальных функций и шаблонов, а не напрямую в HTML файлы.

Тег в HTML используется для определения метаданных документа, то есть информации о самом документе, которая не отображается напрямую на веб-странице. Внутри тега обычно содержатся такие элементы как:

1. Заголовок страницы (<title>): Определяет название веб-страницы, которое отображается на вкладке браузера.
2. Метатеги (<meta>): Описывают метаданные документа, такие как описание страницы, ключевые слова, кодировку символов и другую информацию, которая помогает поисковым системам и браузерам правильно интерпретировать страницу.
3. Ссылки на внешние ресурсы (<link>): Могут использоваться для подключения таблиц стилей (CSS), иконок для вкладки браузера (favicon), а также других внешних ресурсов.
4. Скрипты (<script>): Позволяют подключать JavaScript-код к странице, который может обеспечивать интерактивность и другие функции.
5. Различные другие метаданные и инструкции, такие как стили, скрипты, метаинструкции для поисковых систем и т.д.

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

1. Хедер (header): Это верхняя часть страницы, которая обычно содержит логотип вашего сайта, название, меню навигации, а также другие элементы, такие как поиск или контактные данные. Хедер обычно остается неизменным на всех страницах вашего сайта и помогает пользователям быстро ориентироваться и переходить между различными разделами сайта.
2. Футер (footer): Это нижняя часть страницы, которая обычно содержит дополнительные ссылки на страницы сайта, контактную информацию, а также копирайт или другую информацию о правах на содержимое. Футер также может содержать дополнительные элементы, такие как ссылки на социальные сети или информацию о категориях сайта. Подобно хедеру, футер обычно присутствует на всех страницах сайта и предоставляет дополнительные сведения или функциональность.

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

Почему скрипты размещают в Футере?

Подключение JavaScript-скриптов в самом начале страницы, между тегами <head> и </head> рекомендуется для стилей CSS, так как это позволяет браузеру сначала загрузить и отобразить структуру страницы, а затем применить к ней стили. Однако, для JavaScript ситуация отличается.

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

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

Способы добавления кода в тело WordPress.

Insert Headers and Footers

Плагин Insert Headers and Footers представляет собой бесплатное дополнение для WordPress, которое упрощает добавление кода в разделы и вашего сайта. Чтобы воспользоваться этим плагином, выполните следующие шаги:

1. Установите плагин из официального каталога плагинов WordPress.
2. После установки и активации плагина, перейдите в админ-раздел WordPress и выберите раздел «Настройки» > «Insert Headers and Footers».
3. В разделе «Scripts in Body» вставьте свой JavaScript-код, который вы хотите добавить перед закрывающим тегом . Это может быть код для аналитики, рекламы или другие скрипты.
4. После вставки кода сохраните изменения, чтобы они вступили в силу.

Плагин Insert Headers and Footers позволяет управлять добавлением JavaScript-кода на вашем сайте без необходимости вносить изменения в темы или шаблоны WordPress. Это удобное решение для тех, кто не хочет или не умеет вносить изменения в код сайта напрямую.

Clearfy Pro

Плагин Clearfy Pro — это премиум-продукт, предназначенный для оптимизации и защиты вашего WordPress-ресурса. Он также предоставляет возможность добавлять код в раздел вашего сайта. Чтобы воспользоваться этой функцией, выполните следующие шаги:

1. Перейдите в админ-раздел вашего WordPress и выберите Clearfy Pro.
2. Перейдите на вкладку «Код».
3. Включите опцию «Код перед «.
4. Добавьте свой JavaScript-код в соответствующее поле ниже этой настройки.
5. Нажмите кнопку «Save», чтобы сохранить внесенные изменения.

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

Встроенные инструменты темы

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

Например, в теме Reboot от команды WPShop.ru, для вставки произвольного HTML-кода в тело страницы, разработчики предоставили специальную опцию, которую можно найти в административном меню WordPress:

1. Перейдите в раздел «Внешний вид» в админ-панели вашего сайта.
2. Выберите пункт «Настроить».
3. В меню настроек, найдите опцию с названием «Коды» или что-то похожее. В этой секции вы сможете вставить ваш произвольный HTML-код.
4. Вставьте свой HTML-код в соответствующее поле или текстовый редактор, предоставленный разработчиками темы.
5. После того как вы вставите свой код, сохраните изменения.

Шаблон темы

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

1. Откройте файловый менеджер или FTP-клиент и найдите каталог вашей темы WordPress. Обычно он находится в директории wp-content/themes/.
2. Внутри каталога вашей темы найдите файл footer.php и откройте его для редактирования. Обычно этот файл содержит закрывающий тег </body> и </html> и используется для вывода элементов футера вашего сайта.
3. Вставьте свой HTML-код или JavaScript-скрипты перед закрывающим тегом </body>. Это может быть, например, код для аналитики, встраиваемые виджеты или другие элементы, которые вы хотите добавить на каждой странице вашего сайта.
4. Сохраните внесенные изменения и закройте файл footer.php.