Как добавить код в head wordpress
Перейти к содержимому

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

  • автор:

Как добавить произвольный код при помощи 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?

Хочу избавится от плагина добавляющего пользовательский код в HEAD тег.

Как добавить между тегов head свой код, без сторонних плагинов?

  • Вопрос задан более трёх лет назад
  • 209 просмотров

Комментировать
Решения вопроса 1

pavel_ataykin

Павел Атайкин @pavel_ataykin
Верстаю и программирую всякое.

Например можно в header.php там как раз и заполняется тег head.
Ещё можно через хук wp_head

P.S. Зависит от того, что вы хотите получить 🙂

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Ответы на вопрос 2

dimovich85

Dima Polos @dimovich85
https://u-academy.net/
Подписка на хук wp_head
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

wppanda5

WP Panda @wppanda5 Куратор тега WordPress
WordPress Mедведь

Вот в данном случае таки лучше пользоваться плагинами, они всего лишь вешаются на wp_head, и это удобнее чем ковыряться в коде

Ответ написан более трёх лет назад

pavel_ataykin

Павел Атайкин @pavel_ataykin

Привет! Я хочу дополнить твой комментарий 🙂

Тут 2 стороны медали:
1) Для такой простой задачи ставить плагин излишне с точки зрения качества сайта. Плагин — это + доп нагрузка на проц при загрузке ядра wp каждый раз. Так же это дополнительная зависимость с проверкой совместимости.
2) В случае когда ты не разработчик и нет желание изучать вопрос плагин обязательное решение т.к. не трогая код темы его сложнее сломать 🙂

P.S. Кому то нравится ковыряться в коде, кому то хочется установить плагин и жить спокойно дальше. Если высказываете своё мнение, то укажите это, пожалуйста 🙂

wppanda5

WP Panda @wppanda5 Куратор тега WordPress

Павел Атайкин,
Не согласен, плагин по сути не отличается от кода в теме
да подключение плагина занимает несколько больше времени, чем простой require файла, но не критично.

Качественно написанный плагин будет всегда лучше чем говонокод встроенный в тему. Тем более в данном случае использование плагина оправдано.

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

pavel_ataykin

Павел Атайкин @pavel_ataykin

WP Panda,
1) Повесить функцию на хук в теме != говнокод по определению.
2) Речь не идёт про Elementor

Хранить код в плагине не лучшая идея и вот почему:
1) Чтобы получить код, который нужно выполнить плагин делает запрос в бд
2) Только после этого он его добавляет в файлы

Об этом я и писал. Если есть желание изучить вопрос = код в тему, если нет = плагин.
P.S. Речь идёт именно про этот вопрос, другие плагины не рассматриваем

wppanda5

WP Panda @wppanda5 Куратор тега WordPress

Павел Атайкин,
!= — вы видимо как то не очень уверены в этом)
Я не говорю что это говнокод, я говорю, о том, что в данном случае важно это оперативный доступ, и плагин его дает и именно такие штуки хардкодить не надо

Про запрос и как хранить, посмотрите как работают опции, как хранятся и как берутся, это вообще никак не влияет на загрузку.

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

pavel_ataykin

Павел Атайкин @pavel_ataykin

WP Panda, Почитал, понял! Получается отличается только место, где будет храниться этот самый «хардкод»? 🙂 Либо в админке, либо в functions.php

wppanda5

WP Panda @wppanda5 Куратор тега WordPress
Павел Атайкин,
то, что хранится в опциях оно по определению не хардкод

mipfikus

mipfikus @mipfikus Автор вопроса

WP Panda, Павел Атайкин, пока вы дисскусировали, я добавил за 1 минуту код в файл header.php (ctrl+c ctrl+v) и радуюсь жизни

Как добавить код в head для отдельной страницы в вордпресс?

Как добавить код в head для отдельной страницы в вордпресс? Есть ли для этого плагины или копаться в внешний вид/редактор?

Лучший ответ

Есть плагины. У меня на WordPress такой стоит: «Head, Footer and Post Injections»
Страница плагина: https://ru.wordpress.org/plugins/header-footer/

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

Остальные ответы
Похожие вопросы
Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.

Все способы добавить код в 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

clearfy pro

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

вкладка код clearfy

clearfy вставить код в header

проверка кода в хед в браузере

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

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

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

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

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

Head & Footer Code

HeadFooter Code

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

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

HeadFooter Code plugin

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

HeadFooter Code header

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

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

HeadFooter Code настройки

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

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

Head, Footer and Post Injections

плагин 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

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

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

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

woody code установка

woody-code добавить сниппет woody code uni snippets вставляем код в шапку сайта

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

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

тема ребут

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

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

код в хед в теме reboot

код в хеад в теме reboot

Хук 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 сайта вручную. Но для этого нужно отредактировать файлы вашего шаблона.

редактирование header.php

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *