Как добавить код в head wordpress

Как добавить код в Head WordPress

Разбираемся как быстро добавить код в Head WordPress.

Header — что это, где находится и зачем нужен

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

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

Как добавить код в Head WordPress

Разберем простые и рабочие методы.

Плагин Clearfy Pro

Если используете это многофункциональное решение, то устанавливать больше ничего не надо. Код в шапку можно добавить двумя кликами. Для этого просто перейдите в Clearfy Pro и на вкладке Код вставьте свои данные в поле Код в .

После того, как нажмете кнопку Сохранить настройки, плагин добавит ваш код на все страницы сайта.

Плагин Head, Footer and Post Injections

Еще один плагин для вставки кода в шапку и подвал.

Первым делом установите и активируйте дополнение. Затем перейдите в админ-раздел Настройки > Header and Footer, откройте вкладку Head and Footer.

В блок page section injection добавьте свой код и кликните Сохранить.

Правка файлов темы

Еще один способ добавить код в шапку — использовать шаблоны активной темы ВордПресс. Отлично подходит, если не хотите устанавливать дополнительные плагины.

Работать нужно с файлом header.php, который отвечает за работу верхней части WP-сайта. В каждой теме его содержимое отличается.

На примере покажем работу с темой Twenty Twenty.

Если открыть указанный файл, то нужный блок будет в самом его начале.

Свой код вставьте перед закрывающим тегом .

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

Файл functions.php

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

Для этого в самый конец вставьте код

add_action( 'wp_head', function() < ?> );

Строку замените на свой код и сохраните изменения.

Как добавить произвольный код при помощи wp_head()

Хук wp_head позволяет добавить любой код на PHP для вывода через функцию wp_head(), ну а с помощью PHP без труда можно вставить HTML, CSS и JavaScript .

Но с одной стороны — зачем это надо, если можно открыть файл header.php и просто затолкать туда всё, что захочется?

Ответ: а если нет доступа к файлам темы?

Короче говоря, этот хук широко используется в разработке плагинов для вставки например дополнительных CSS-стилей и прочей ерунды.

Вот как он выглядит:

add_action("wp_head", "wp_head_extra_code"); function wp_head_extra_code() { // тут ваш PHP-код }

 add_action("wp_head", "wp_head_extra_code"); function wp_head_extra_code() { if(is_single()): echo ''; else: ?> #comment  endif; }

Вставлять в functions.php, ну это уж вы должны знать.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Как добавить код в head wordpress?

Существует несколько способов добавить код в раздел WordPress, вот некоторые из них:

1. Использовать плагин: Существует множество плагинов, которые позволяют добавить код в WordPress. Один из наиболее распространенных плагинов — это «Header and Footer Scripts», который позволяет добавить код в разделы и на всех страницах вашего сайта.
2. Редактирование файла header.php: Вы можете открыть файл header.php вашей темы WordPress и добавить свой код в раздел непосредственно внутри тега . Но следует быть осторожным при редактировании файлов темы, так как это может привести к проблемам при обновлении темы.
3. Использование функции wp_head(): Вы можете использовать функцию wp_head() внутри вашего тематического файла header.php . Эта функция вызывается автоматически WordPress и позволяет плагинам и темам добавлять свой код в раздел .
4. Использование функции add_action(): Вы можете добавить свой код в раздел с помощью функции add_action() , которая позволяет вам добавлять свои функции в хуки WordPress. Вы можете использовать хук wp_head , чтобы добавить свой код в раздел . Например:

javascript Copy code
function my_custom_code( ) < // ваш код здесь > add_action('wp_head', 'my_custom_code'); 

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

Все способы добавить код в head WordPress

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

Для чего нужен блок head в коде страницы

Блок . расположен между HTML-тегами и . Он используется для хранения метаданных (информации для поисковых роботов и браузеров), подключения скриптов, шрифтов, стилей и фактически является контейнером для «технической» части HTML-документа.

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

Вот что обычно требуется вставить в head сайта:

• Коды верификации для Я.Вебмастер, Google Search Console, Вебмастер Mail.ru и других поисковых систем.
• Разнообразные счетчики, такие как Яндекс Метрика, Google Analytics.
• Коды сетей контекстной, тизерной, баннерной рекламы, а также партнерских интеграций.
• Фрагменты программного кода JavaScript для ретаргетинга, который сегментирует базу посетителей сайта, например, зарегистрированных в конкретной социальной сети (ВКонтакте и пр.).
• JS-скрипты, шрифты и css-файлы, которые при загрузке страниц должны исполняться в первую очередь.
• Подключение собственных css-стилей, не предусмотренных в самой теме WordPress.

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

Начнем с плагинов.

Плагины для вставки кода в хеад

Самый простой способ, особенно для новичка, добавить нужный код в секцию head на WordPress — использовать какой-либо плагин, который позволяет вставить скрипты и html-коды в шапку сайта. Это просто, быстро, и отсутствует вероятность повреждения файлов движка WP.

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

Clearfy PRO

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

1. Зайдите в настройки плагина Clearfy Pro на вкладку «Код».
2. Пролистайте страницу почти в самый низ и найдите секцию, как на скрине.
3. Активируйте параметр.
4. Вставьте в поле для ввода свои данные.
5. Внизу страницы нажмите на кнопку «Сохранить изменения».
6. Проверьте корректность вставки (кнопка F12 в браузере, раздел «Elements»).

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

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

Сейчас есть возможность взять его с 15 % скидкой:

Активировать промокод на Clearfy

Head & Footer Code

Плагин Head & Footer Code сильно проще предыдущего.

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

После установки найдите его в инструментах и кликните по названию.

В текстовом поле раздела HEAD Code введите свои данные для хеад сайта (в нашем случае это код верификации Яндекса).

Выставите приоритет в поле Head Priority (по умолчанию = 10). Чем меньше число — тем выше будет код внутри тега, чем больше — тем ниже соответственно с меньшим приоритетом.

В разделе Article specific settings можно дополнительно задать типы страниц или записей, на которых нужно выводить данный код. Но эта опция больше подойдет для вставки данных в body.

Корректность вставки данных проверьте в своем браузере, нажав клавишу F12 для вызова панели разработчика.

Head, Footer and Post Injections

Плагин Head, Footer and Post Injections тоже имеется в репозитории WordPress и может быть установлен прямо из админки. В нем предусмотрено гораздо больше функционала, по сравнению с предыдущим вариантом в плане добавления произвольного html-кода в Wp блог (хеад, футер, боди). При этом работает он также стабильно и быстро.

Добавить код в head через этот php-модуль довольно просто:

1. После установки в настройках кликните на «Header and Footer».
2. В первой вкладке в секции HEAD page section injection вставьте произвольный код в соответствии с вашей задачей.
3. Пролистайте в конец страницы и нажмите «Сохранить».
4. Проверьте корректность вставки на своем сайте в браузере.

Woody code snippets

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

Существует платная и бесплатная версии, но под наши сегодняшние задачи вполне хватит free-варианта.

Пошаговая инструкция по внедрению кода в head этим плагином в виде скриншотов ниже.

Темы WordPress с возможностью вставки кода в head

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

Темы от команды российских разработчиков WPShop — счастливое исключение. В настройках каждой из них есть блок «Коды» с возможностью вставки нужного кода не только перед закрывающим тегом head, но также перед закрывающим тегом body и после контента (в подвал сайта).

В админке WordPress перейдите во Внешний вид — Настроить — Коды:

Хук WordPress для добавления фрагментов кода

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

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

Перед любыми правками файлов темы ВордПресс рекомендую сделать резервную копию сайта. В этом случае, если что-то пойдет не так, всегда можно будет вернуть рабочий вариант.

Сейчас я подробно опишу, как при помощи хука добавить данные в head ВордПресс. Процесс простой, но требует внимательного отношения:

1. Откройте файл functions.php из папки вашей темы: /wp-content/themes/название_темы /functions.php .
2. В конце файла вставьте следующий код:

function site_insert_header() < ?>  add_action( 'wp_head', 'site_insert_header' );

Редактирование шаблона темы WordPress

Для тех, кто против лишних плагинов на сайте, тоже есть способ добавить свой код в head сайта вручную. Но для этого нужно отредактировать файлы вашего шаблона.

1. Откройте файл header.php из папки вашей темы. Обычно он расположен по адресу /wp-content/themes/название_темы/header.php и отвечает за показ первого экрана.
2. Добавьте нужные данные перед закрывающим тегом .
3. Сохраните изменения.
4. Проверьте код на наличие внесенных изменений, вызвав в браузере панель разработчика по клавише F12.

В каждом отдельно взятом шаблоне содержимое файла header.php может отличаться. Но основные структурные html-блоки похожи.

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

Добавить свою информацию в хеад сайта ВордПресс — задача не сложная, но всегда нужно понимать, что конкретно вы добавляете на сайт и с какими целями. Вносить правки в блок head своего проекта по принципу «в интернете где-то прочитал, что так надо, и это круто» — определенно плохая идея.