Администратор сайта должен знать несколько базовых вещей, и одна из них касается добавления кода внутрь тегов. Зачастую можно встретить, при необходимости подключить к ресурсу сторонний сервис, требование добавить некий код в head. В этой статье отвечу на основные вопросы по поводу данного тега: что он собой представляет, где находится и как добавить код в head WordPress-сайта.
Раздел head в WordPress – что это такое
Формирование любой страницы сайта, независимо от выбранного CMS, строится на базе нескольких уже выработанных основных правил. Одно из этих правил предполагает разметку страницы контейнерами для помещения в них данных.
Весь код стандартной страницы размещен в контейнере <html>...</html>, внутри которого есть два основных блока — head и body. Контейнер <head>...</head> обычно закрывается до открытия body, и он служит для размещения служебных данных, которые считываются обработчиком браузера, поисковиками и другими “роботизированными” системами.
Перечисленные выше правила актуальны для любого сайта независимо от его CMS. В равной степени они относятся и к WordPress.
Приведу несколько примеров того, что обычно размещают в хеад порталов на ВордПресс:
- Счетчики и сервисы аналитики, среди которых наиболее известными являются Яндекс Метрика и Google Analytics.
- Коды верификации, подтверждающие владение данным порталом.
- Скрипты, которые должны выполняться сразу после загрузки сайта. Например, для отображения баннерной и другой рекламы, запуска онлайн-чата и пр.
- Стили (css), необходимость в загрузке которых имеется в первую очередь.
- Шрифты и иконки, используемые для отображения материалов и “прорисовки” элементов шаблона.
- Метаданные, считываемые поисковыми и другими роботами.
Важно: не путайте <head> и <header> — это разные секции в коде, хотя и похожие по названию.
Теперь, когда вы понимаете, что такое <head>, самое время разъяснить, как работать с этой секцией в коде ресурса, созданного на базе WordPress.
Плагины для работы с head на WordPress
Практически любой вопрос на WordPress можно решить при помощи плагинов, и под каждую задачу их есть великое множество. При отсутствии навыков в редактировании кода шаблона самым простым решением для добавления всего необходимого в хеад является использование уже готовых модулей.
Рассмотрим ниже несколько вариантов, которые справятся с поставленной задачей.
Clearfy Pro — лучшее многофункциональное решение
Многофункциональный вариант российских разработчиков из WPShop, который уже давно стал “золотой классикой” среди веб-мастеров при настройке новых сайтов на WordPress или оптимизации давно работающих ресурсов.
Обратите внимание: Clearfy Pro отсутствует в репозитории WordPress, его можно приобрести на сайте разработчиков ВПШоп.
Само ПО предлагает широкую функциональность. Среди полезных опций есть и возможность в несколько кликов добавить произвольный код в head.
Чтобы это сделать:
- Перейдите в сам модуль и выберите заголовок “Код” среди доступных настроек.
- Здесь есть форма для ввода данных в пункте “Код в <head>”. Активируйте сперва переключатель.
- Далее введите свой код в текстовое поле.
- Пролистайте вниз страницу и нажмите “Сохранить”.
После этого данные будут добавлены прямо перед закрывающим тегом секции хеад.
Плюс Clearfy Pro перед другими решениями, которые будут рассмотрены ниже, в его многофункциональности. Как известно, лучше не перегружать WP-ресурс большим количеством плагинов. Поэтому комплексные решения, которые выполняют целый ряд полезных функций, являются предпочтительными. Такое определение подходит Clearfy Pro.
Это далеко не полный список возможностей. И все перечисленное необходимо практически на каждом WordPress-портале.
Немаловажно, что данный продукт не сказывается на скорости работы сайта, поэтому его выбирают многие опытные администраторы и веб-мастеры. Еще одним его привлекательным плюсом является небольшая цена, и ее реально сделать еще ниже при помощи промокода.
Head, Footer and Post Injections
Решение, которое устанавливается бесплатно из репозитория WordPress с целью быстро добавить код в head или другой сегмент кода.
Чтобы им воспользоваться, сперва проведите инсталляцию на WordPress и активируйте. Когда Head, Footer and Post Injections установлен, переходите в раздел “Настройки” — “Head and Footer”.
Здесь можно вставить нужный код в необходимое место, в том числе и в хеад. Не забудьте нажать “Сохранить”, когда добавите скрипт или другую информацию.
Само решение бесплатное, и оно вполне рабочее. Хорошо подойдет новичкам, которые могут столкнуться с необходимостью вставить код не только в head, но и в другие секции. Например, перед или после содержимого записи.
Из интересных моментов можно выделить функциональность вставки данных не только на всех страницах сайта, но и исключительно на главной, что иногда бывает необходимо.
Еще отмечу возможность добавить нужный код на AMP-страницы, что порой тоже нужно для решения специфических задач.
AMP-страницы — это "облегченные" версии обычных страниц, на которые поисковая система Google может перенаправлять пользователя, чтобы он быстрее получил необходимую информацию.
Head & Footer Code
Если попытаться в репозитории WordPress найти надстройку, которая позволит добавить код в head, то на первом месте, скорее всего, окажется Head & Footer Code.
Это максимально простой инструмент, который стоит рассмотреть из-за функции приоритета. Те варианты, которые мы изучили выше, вставляют данные непосредственно перед закрывающим тегом </head>. Здесь же есть возможность его сдвинуть.
Установив Head & Footer Code, вы обнаружите это решение в разделе “Инструменты”. В секции Head Code указывается информация, которую следует выводить в контейнере хеад. Добавив ее, сохраните изменения, чтобы код появился в теле страницы.
В пункте HEAD Priority можно задать местоположение вставляемого кода. 10 — это непосредственно перед закрывающим тегом </head>, а 1 — это почти сразу после открывающего <head>. Ранжирование скриптов или метаданных относительно друг друга может потребоваться опытному веб-мастеру.
Yoast SEO
Базовый плагин сеошников Yoast SEO позволяет добавить коды верификации поисковых инструментов. Допустим, если стоит задача вставить код верификации Яндекс, то вполне реально обойтись без установки дополнительных надстроек, воспользовавшись опциями данного модуля.
В разделе общих настроек перейдите на вкладку “Инструменты веб-мастеров”. Здесь вставьте нужные данные и нажмите “Сохранить изменения”.
Обращу внимание, что вставлять нужно именно буквенно-цифровую комбинацию для верификации, а не целиком метакод.
Явный минус: позволяет добавлять верификацию только Яндекс, Google, Bing и Baidu.
При вставке таким способом код добавляется в первую половину контейнера head, а не в конец.
Woody code snippets
Woody code snippets предлагает систему сниппетов, которую легко использовать и для добавления в хеад нужного кода.
Чтобы его использовать в наших целях, установите плагин из репозитория. После этого в левом меню появится соответствующая вкладка инструмента. Перейдите на нее и переключитесь на раздел “Добавить сниппет”. Здесь выберите вариант “Универсальный сниппет” — “Создать элемент”.
Дайте название сниппету. Эта техническая информация будет видна только вам в админке. Заполните сам код, который нужно вставить. Внизу выберите пункт “Авто-размещение” для вопроса “Где можно выполнять код?” В качестве места добавления выберите “Шапка”. Теперь остается только опубликовать созданный сниппет.
При рассмотренном выше варианте размещения код встанет перед закрывающим тегом шапки.
У Woody code snippets есть существенное преимущество перед конкурентами — возможность настроить условную логику для создаваемого кода. Кроме того, можно создавать самые разные сниппеты и получать их в формате шорткодов. Но часть функций доступна только в платной версии.
Flat Pm
Достаточно мощный менеджер, который используется многими веб-мастерами в качестве инструмента для расстановки блоков рекламы. Установите его из хранилища плагинов, тогда слева в админке появится раздел “Flat PM”.
Чтобы вставить код в head, нужно перейти в раздел “Header и Footer” и добавить информацию в соответствующую область, после чего нажать “Сохранить настройки”.
Использовать инструмент только для добавления чего-то в head нецелесообразно, учитывая, что к коду могут применяться глобальные настройки плагина с отложенным выводом. Его имеет смысл применять, когда на ресурсе нужно настроить рекламу. Но здесь также следует учитывать, что часть опций доступна только в платном варианте.
Как добавить HTML или JS код напрямую в head шаблона
Если необходимо просто добавить информацию в head на WordPress, вовсе не обязательно устанавливать для этого отдельные плагины. Например, это можно сделать средствами темы, причем несколькими способами.
Добавить код в настройках самого шаблона
Большинство современных тем дают возможность веб-мастерам добавить код в head. Составить универсальную инструкцию, каким образом это сделать, не получится — нужно копаться в опциях каждого конкретного шаблона, либо посмотреть документацию.
Рассмотрим в качестве примера вставку в head кода в популярной российской теме Reboot. Здесь это можно сделать просто через настройки в кастомайзере — нужно перейти в раздел “Коды”.
И далее вставить требуемый код в соответствующее поле, после чего нажать “Опубликовать”.
Через дочернюю тему (подтему)
Подключение таких тем используется с целью избежать редактирования родительского шаблона, где внесенные изменения могут стереться при обновлении.
Добавив дочерний вариант на сайт, можно прямо из админки в инструменте “Внешний вид” — “Редактор тем” открыть файл с секцией head (обычно в WordPress это файл header.php) и внести изменения.
В файлах шаблона
Вариант, схожий с редактированием дочерней темы за тем исключением, что изменения вносятся в основной шаблон. В админке WP в редакторе тем вставьте желаемый код в секцию head.
Не забудьте отключить автоматическое обновление шаблона (если оно активировано), когда вносите изменения в его файлы. Если этого не сделать, добавленный пользовательский контент может быть стерт с апдейтом. Часто веб-мастеры об этом забывают, из-за чего обновление может удалить стили, добавленные прямо в файлы шаблона, или другие важные изменения.
Вставка кода в head с помощью хука
Рассмотрю еще один метод, который подойдет продвинутым веб-мастерам. Есть плагин ProFunctions от WPShop, который внедряется в стандартный файл functions.php темы сайта, позволяя не затирать внесенные при обновлении изменения. С помощью него и простого хука без проблем удается добавить нужный код в хеад.
Обратите внимание: Сам модуль простейший и легкий. Он не нагружает дополнительно сайт.
Первым делом скачайте ProFunctions и установите его в админке WordPress, после чего выберите для редактирования в редакторе плагинов.
Добавьте сам код и хук для его вызова: wp_head. Ниже привожу пример кода:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function code_for_head() { ?> <!--вставьте здесь код --> <?php } add_action( 'wp_head', 'code_for_head' ); |
Так это будет выглядеть в самой админке WordPress:
Добавив все необходимое, нажмите “Обновить файл”.
Необходимый код будет выполняться после основных сценариев wp_head.
Выводы
Оптимальный способ вставки в head на WordPress зависит от того, что именно нужно добавить. Если требуется просто верифицировать сайт для Яндекс или Google, то прямо в Yoast SEO указывайте необходимые данные. Когда же необходимо вставить специфичный код, проще всего использовать возможности самой темы.
Я же всегда выбираю вариант добавления необходимой информации в head через плагин Clearfy Pro. Сама разработка у меня является обязательной для установки на всех WordPress-проектах, и она позволяет, помимо прочих полезных функций, работать с head.
Да, этот вариант платный, но он окупает свою стоимость с лихвой даже при покупке только на один домен. Тогда как есть и неограниченная лицензия, которую можно использовать на десятках сайтов, в пару кликов подготавливая новые WP-проекты к старту.