от

Добавление кода в раздел <body> вашего сайта WordPress может помочь вам интегрировать необходимые инструменты, такие как Google Analytics, Facebook Pixel или сторонние скрипты, без значительного влияния на скорость загрузки. Важно иметь в виду, что неправильное добавление кода может вызвать ошибки или замедлить работу сайта, поэтому следуйте следующим рекомендациям:

Способы добавления кода в <body>

  • Использование плагинов: Наиболее безопасный способ — установить плагин, который позволяет добавлять кастомный код. Например, такой плагин, как Insert Headers and Footers, позволяет просто и удобно вставлять код в нужные разделы вашего сайта.
  • Редактирование файла темы: Вы также можете добавить код напрямую в файл footer.php вашей активной темы, который расположен в папке wp-content/themes/ваша-тема/. Найдите тег </body> и вставьте ваш код перед ним. Однако будьте осторожны, так как любые изменения в коде темы могут повлиять на весь сайт.
  • Использование функции wp_footer(): Если вы разрабатываете собственную тему или плагин, вы можете использовать функцию wp_footer() для вставки вашего кода. Это делается в файле functions.php через хук wp_footer. Например: 
    add_action('wp_footer', 'my_custom_code');
function my_custom_code() {
echo '<script>console.log("Hello, World!");</script>';
}

Не забывайте делать резервные копии ваших файлов перед внесением каких-либо изменений, чтобы в случае ошибки можно было быстро восстановить предыдущую версию. Также следите за влиянием добавленного кода на производительность вашего сайта с помощью инструментов, таких как Google PageSpeed Insights.

Зачем добавлять скрипты в Footer

Рекомендуется подключать скрипты в шапке сайта (в секции wp head), то есть между тегами <head> и </head>. Это правильно для CSS-стилей, однако для JavaScript это не совсем оптимально. Вот основные причины.

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

Кроме того, размещение скриптов в подвале (footer) позволяет ускорить рендеринг страницы, поскольку браузер в первую очередь отображает HTML-контент, а затем загружает и выполняет скрипты. Это создает более плавный пользовательский опыт и позволяет избежать блокировки рендеринга.

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

Как вставить код в body WordPress

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

Insert Headers and Footers

Это бесплатный плагин для WordPress, который автоматизирует процесс.

  • Сначала установите и активируйте плагин.
  • В административной панели перейдите в раздел Настройки > Insert Headers and Footers.
  • Вставьте ваш код в поле Scripts in Body.
  • Нажмите кнопку Save.

Поле Scripts in Body в плагине Insert Headers and Footers

Clearfy Pro

Это платное решение, предназначенное для оптимизации ресурсов WordPress. Одна из его функций – возможность вставлять произвольный код в секцию body.

  • Откройте панель Clearfy Pro.
  • Перейдите на вкладку Код.
  • Включите опцию Код перед и вставьте код в указанное поле.
  • Сохраните изменения.

Добавление кода в body в плагине Clearfy Pro

Активируйте промокод на 10%.

Встроенные средства темы

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

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

Вставка кода в настройщике темы Reboot

Шаблон темы

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

Если вы избегаете установки дополнительных плагинов, этот способ будет наиболее подходящим.

  • В папке с активной темой найдите файл footer.php, который присутствует в каждой теме.
  • Добавьте код скрипта перед закрывающим тегом .

Файл-шаблон footer.php WordPress-темы

Советы по вставке кода

Перед внесением изменений в код WordPress, рекомендуется создать резервную копию сайта на случай, если что-то пойдет не так. Используйте плагин для резервного копирования или функция, предоставляемая вашим хостингом.

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

Следите за производительностью сайта после внесения изменений, так как некоторые скрипты могут замедлить загрузку или приводить к ошибкам.

HTML и CSS

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

JavaScript и внешние библиотеки

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

Оставьте комментарий