Каждый администратор веб-сайта должен быть ознакомлен с несколькими основными аспектами, одна из которых касается внедрения кода в теги. Часто вы сталкиваетесь с запросами на добавление определённого кода в заголовок при подключении сторонних сервисов к вашему ресурсу. В данной статье я постараюсь ответить на основные вопросы о данном элементе: что он собой представляет, его местоположение и как вставить код в заголовок сайта на платформе WordPress.
Код, добавленный в раздел <head>, может включать в себя метатеги, скрипты, стили CSS и прочие элементы, которые влияют на SEO-оптимизацию и функциональность сайта. Например, для подключения Google Analytics необходимо вставить специальный код отслеживания, чтобы собирать статистику о посетителях.
Существует несколько способов добавления кода в заголовок WordPress, каждый из которых подходит для различных ситуаций. Один из наиболее распространённых методов — использование плагинов, таких как Insert Headers and Footers, который упрощает процесс, позволяя добавлять код без редактирования файлов темы.
Другой вариант — редактирование файла header.php вашей темы. Для этого перейдите в Внешний вид > Редактор, найдите файл header.php и вставьте нужный код перед закрывающим тегом </head>. Однако будьте осторожны: любые изменения в коде темы могут привести к неисправностям на сайте.
Также можно использовать функцию wp_head в functions.php вашей темы. Для этого добавьте следующий код:
add_action('wp_head', 'my_custom_function');
function my_custom_function() {
echo '<!-- Ваш код здесь -->';
}Этот метод позволяет избежать проблем при обновлении темы, так как код будет сохраняться и независимо от внешнего вида сайта.
В заключение, правильное добавление кода в раздел <head> может заметно улучшить функциональность и видимость вашего сайта. Выберите наиболее подходящий для вас метод и не забывайте делать резервные копии перед внесением изменений.
Раздел head в WordPress – что это такое
Создание любой страницы веб-сайта, независимо от используемой CMS, основывается на нескольких устоявшихся правилах. Одно из важнейших правил подразумевает использование контейнеров для организации данных на странице.
Вся структура стандартной страницы заключена в контейнере ., который делится на два основных раздела — head и body. Раздел
. закрывается до открытия body и предназначен для хранения служебных данных, считываемых браузерами, поисковыми системами и прочими автоматизированными системами.Данные принципы применимы для любого сайта, вне зависимости от его CMS, и относятся также к WordPress.
Вот несколько примеров того, что часто размещается в секции head на WordPress-порталах:
- Счетчики и аналитические сервисы, такие как Яндекс Метрика и Google Analytics.
- Коды подтверждения, удостоверяющие право на управление данным сайтом.
- Скрипты, которые запускаются сразу после загрузки страницы, например, для отображения рекламы, запуска онлайн-чатов и другого.
- Стили (CSS), которые необходимы для первоначальной загрузки.
- Шрифты и иконки для отображения материалов и создания элементов дизайна.
- Метаданные, которые считываются поисковыми и другими системами.
Важно помнить, что
и — это не одно и то же, несмотря на схожесть в названиях.Теперь, когда вы в курсе, что такое
, самое время объяснить, как работать с этой секцией в коде ресурса, работающего на WordPress.Плагины для работы с head на WordPress
Большинство вопросов в WordPress можно решить при помощи плагинов, и для каждой задачи существует множество таких инструментов. Если у вас нет опыта редактирования кода шаблона, самым простым решением для добавления необходимых элементов в head будет использование готовых модулей.
Давайте рассмотрим несколько вариантов, которые помогут вам в этом.
Clearfy Pro — идеальное многофункциональное решение
Это многофункциональное решение от российских разработчиков из WPShop, которое давно стало популярным выбором среди веб-мастеров для настройки новых сайтов на WordPress или оптимизации существующих ресурсов.
Обратите внимание: Clearfy Pro не доступен в официальном репозитории WordPress, его можно приобрести на сайте разработчиков WPShop.
Данный инструмент предлагает обширные возможности, включая простую функцию добавления произвольного кода в head всего за несколько кликов.
Для этого выполните следующие действия:
- Перейдите в модуль и выберите пункт “Код” из доступных настроек.
- В форме для ввода данных активируйте переключатель “Код в ”.
- Вставьте свой код в текстовое поле.
- Промотайте страницу вниз и нажмите “Сохранить”.
После выполнения этих шагов ваш код будет добавлен прямо перед закрывающим тегом в разделе head.
Преимущество Clearfy Pro перед другими решениями, которые мы рассмотрим далее, заключается в его многофункциональности. Известно, что не стоит перегружать WordPress слишком большим количеством плагинов. Поэтому лучше использовать комплексное решение, которое выполняет сразу несколько полезных функций — таким продуктом и является Clearfy Pro.
С его помощью вы можете:
- Минимизировать код.
- Удалять ненужные ссылки.
- Улучшать SEO.
- Настраивать редиректы.
- Избавляться от дубликатов страниц.
- Укреплять защиту сайта от взломов или кражи контента.
- Улучшать стандартные комментарии.
- Добавлять полезные модули, например, восстанавливать классический редактор WordPress, активировать уведомления об использовании cookie и многое другое.
Это лишь малая часть возможностей, которые может предложить Clearfy Pro, и такие функции необходимы практически для каждого WordPress-портала.
Кроме того, данный продукт не влияет на скорость загрузки сайта, что делает его популярным выбором среди опытных администраторов и веб-мастеров. Дополнительно стоит отметить его доступную цену, которую можно снизить с помощью промокода.
Скидка 10% на Clearfy Pro
Это решение, которое можно бесплатно установить из репозитория WordPress и которое быстро позволит вам вставить код в head или другие секции кода.
Чтобы воспользоваться этим плагином, сначала установите и активируйте его в WordPress. После установки переходите в раздел “Настройки” — “Head and Footer”.
В этом разделе вы сможете вставить нужный код в соответствующее место, включая head. Не забудьте нажать “Сохранить” после добавления скрипта или другой информации.
Это бесплатное решение, которое идеально подойдёт новичкам, сталкивающимся с необходимостью вставить код не только в head, но и в другие секции, например, перед или после текста записи.
Кроме того, одним из преимуществ является возможность добавления кода на AMP-страницы, что иногда необходимо для выполнения специфических задач.
AMP-страницы представляют собой «облегчённые» версии обычных страниц, которые Google может использовать для быстрого перенаправления пользователей, чтобы они оперативно получали необходимую информацию.
Если вы начнёте искать плагин для добавления кода в head в репозитории WordPress, скорее всего, сначала встретите Head & Footer Code.
Этот инструмент отличается своей простотой и стоит рассмотреть из-за функции приоритета. В отличие от предыдущих инструментов, которые добавляют данные сразу перед закрывающим тегом , здесь у вас есть возможность определить, где именно будет располагаться код.
После установки Head & Footer Code вы сможете найти его в разделе “Инструменты”. В секции Head Code укажите информацию, которую нужно отобразить в разделе head. После добавления не забудьте сохранить изменения, чтобы код появился на странице.
В блоке HEAD Priority можно задать местоположение вставляемого кода: значение 10 соответствует позиционированию непосредственно перед закрывающим тегом , а 1 — чуть после открывающего . Упорядочение скриптов или метаданных может потребоваться опытному веб-мастеру.
Yoast SEO
Популярный плагин для SEO, Yoast SEO, предлагает возможность добавления кодов верификации для различных поисковых систем. Если ваша задача заключается в интеграции кода верификации Яндекс, это можно сделать без установки дополнительных модулей, используя возможности данного плагина.
В общих настройках перейдите на вкладку “Инструменты веб-мастеров”. Введите нужные данные и нажмите “Сохранить изменения”.
Обратите внимание, что нужно вводить именно буквенно-цифровую комбинацию для верификации, а не полный мета-код.
Недостаток: возможность добавления верификаций только для Яндекс, Google, Bing и Baidu.
При использовании этого метода код добавляется в первую часть контейнера head, а не в его конец.
Woody Code Snippets
Woody Code Snippets предлагает систему сниппетов, которую очень удобно применять для добавления необходимого кода в head.
Для этого установите плагин из репозитория. В меню слева появится соответствующая вкладка. Перейдите туда и щелкните по разделу “Добавить сниппет”. Выберите опцию “Универсальный сниппет” — “Создать элемент”.
Присвойте вашему сниппету имя. Эта информация будет видна только вам в админ панели. Затем введите код, который нужно внедрить. Внизу выберите “Авто-размещение” на вопрос “Где можно выполнять код?” и установите значение “Шапка”. Затем просто опубликуйте созданный сниппет.
При таком способе размещение кода будет производиться перед закрывающим тегом в шапке.
Woody code snippets обладает значительным преимуществом по сравнению с конкурентами — возможностью настроить условную логику для генерируемого кода. Также доступно создание различных сниппетов с получением их в формате шорткодов. Однако важно отметить, что некоторые функции доступны исключительно в платной версии.
Flat Pm
Этот мощный менеджер активно используется многими веб-мастерами как инструмент для размещения рекламных блоков. Установите его из репозитория плагинов, и в админ-панели появится новый раздел “Flat PM” слева.
Чтобы добавить код в секцию head, вам нужно перейти в раздел «Header и Footer», ввести необходимую информацию в соответствующее поле и затем нажать “Сохранить настройки”.
Использовать данный инструмент исключительно для вставки в head нецелесообразно, поскольку к вашему коду могут применяться глобальные настройки плагина с отложенным выводом. Лучше всего его применять, когда на сайте нужно настроить рекламные элементы. Однако следует учитывать, что некоторые опции доступны только в платной версии.
Как добавить HTML или JS код напрямую в head шаблона
Если вам требуется просто добавить информацию в раздел head на WordPress, это можно сделать без необходимости установки специализированных плагинов. Например, существуют разные способы реализовать это в рамках самой темы.
Добавление кода через настройки темы
Многие современные темы предоставляют веб-мастерам возможность вставлять код в head. Тем не менее, универсальные инструкции по этому процессу не составить — необходимо изучать параметры каждой конкретной темы или обращаться к документации.
Например, рассмотрим тему Reboot, где это можно сделать легко через настройки в кастомайзере — просто перейдите в раздел “Коды”.
Затем вставьте нужный код в соответствующее поле и нажмите “Опубликовать”.
Использование дочерней темы
Дочерние темы создаются для того, чтобы избежать внесения изменений в родительский шаблон, которые могут быть потеряны при обновлении.
Добавив дочерний вариант на сайт, вы можете непосредственно в админке в разделе “Внешний вид” — “Редактор тем” открыть файл с секцией head (обычно это header.php в WordPress) и внести необходимые изменения.
Файлы шаблона
Этот метод схож с редактированием дочерней темы, но изменения вносятся в основной шаблон. В админке WP в редакторе тем добавьте нужный код в секцию head.
Не забудьте отключить автоматические обновления шаблона (если они включены) при редактировании его файлов. В противном случае добавленные вами элементы могут быть удалены во время обновления. Часто веб-мастеры забывают об этом, что приводит к потерям стилей и другим важным изменениям, внесенным в файлы шаблона.
Вставка кода в head с помощью хука
Также существует еще один метод, который станет полезен опытным веб-мастерам. Плагин ProFunctions от WPShop позволяет настраивать стандартный файл functions.php темы, что помогает избежать потери изменений при обновлениях. С его помощью и простого хука можно легко добавить необходимый код в head.
Учтите: сам модуль является легким и не нагружает сайт.
Сначала загрузите ProFunctions и установите его через админку WordPress, затем выберите его для редактирования в плагинах.
Добавьте ваш код и хук для его вызова: wp_head. Привожу ниже пример кода: