WordPress — это самая популярная в мире система управления контентом (CMS). Поскольку это платформа с открытым исходным кодом, вы можете легко вносить собственные правки в свою установку WordPress. Такой уровень гибкости является одним из главных преимуществ этой CMS. Но почти каждый сайт WordPress требует доработки для успешной работы. Например, вы хотите интегрировать Google Analytics или аналогичный скрипт отслеживания. Тогда вам нужно будет добавить фрагменты кода в фреймворк вашей темы. Такие административные задачи часто связаны с редактированием заголовка WordPress. Мы покажем вам лучшие способы сделать это в нашем пошаговом руководстве.
- Что такое заголовок WordPress и каковы его элементы?
- Невидимые элементы в HTML-заголовке
- Видимые элементы в заголовке страницы
- Как редактировать заголовок в WordPress?
- Использование плагина для редактирования заголовка WordPress
- Изменение кода темы для редактирования заголовка WordPress
- Добавление кода в файл header.php
- Создание функций в файле functions.php
- Добавление дополнительных скриптов и таблиц стилей в WordPress — вот как это сделать
- Создание дочерней темы
- Использование диспетчера тегов Google для редактирования заголовка WordPress
Что такое заголовок WordPress и каковы его элементы?
Термин «заголовок WordPress» может сбить с толку. В связи с веб-сайтом, заголовок обычно описывает видимую область в верхней части страницы. Там обычно располагается логотип сайта и главное меню страницы. Почти на каждом сайте есть заголовок. С другой стороны, документ HTML, в просторечии называемый «страницей», состоит из двух компонентов: заголовка HTML (<head>) и тела HTML (<body>). Видимые элементы содержатся только в теле HTML, в то время как невидимые элементы отображаются только в голове HTML.
Опубликуйте свой собственный сайт WordPress с помощью IONOS. Получите профессиональный WordPress хостинг прямо сейчас.
В WordPress заголовок включает в себя как HTML head, так и заголовок страницы. Поэтому, когда мы говорим об изменении заголовка WordPress, мы имеем в виду два типа элементов:
- Невидимые элементы в HTML-заголовке
- Видимые элементы в заголовке страницы
Мы объясним оба элемента в следующих разделах.
Невидимые элементы в HTML-заголовке
Элементы в шапке HTML не видны посетителям страницы. Вместо этого их оценивают браузер и поисковые системы. Наиболее распространенные элементы, встречающиеся в шапке HTML, включают:
- Ссылки на таблицы стилей
- Ссылки на файлы сценариев
- Ссылки на шрифты
- ссылки на фавиконы
- Различные типы мета-тегов
Теги сценариев, размещенные в HTML-главе, могут снижать производительность, например, замедлять загрузку страницы. В зависимости от приложения, эта проблема может быть решена путем добавления атрибутов «async» и «defer». Рекомендуется включать такие теги сценариев в нижний колонтитул WordPress.
Видимые элементы в заголовке страницы
Заголовок страницы содержит видимые элементы в верхней части страницы. Начиная с HTML5, принято оформлять заголовок страницы элементом <header>. Однако это не является обязательным. В принципе, можно использовать и элемент <div>. В заголовке страницы часто встречаются следующие элементы:
- Логотип
- Меню
- Изображение заголовка
- Строка поиска
Как редактировать заголовок в WordPress?
Как уже было сказано, при редактировании заголовка в WordPress необходимо различать добавление дополнительного кода в HTML-шапку или изменение визуального вида сайта. Далее мы сосредоточимся на интеграции дополнительных невизуальных элементов в HTML-заголовок.
Визуальные изменения заголовка страницы гораздо сложнее. Как именно вы это сделаете, зависит от используемой темы. Кроме того, эти изменения обычно требуют определенных навыков дизайна и кодирования.
Некоторые добавленные теги сценариев могут потребовать согласия пользователя, прежде чем они будут загружены. Это происходит, например, если используются файлы cookie или собираются персональные данные. В этом случае вам нужно будет продумать, как каждый дополнительный сценарий интегрировать в существующее решение, предусматривающее согласие на использование файлов cookie.
Вот три метода размещения дополнительного кода в HTML-заголовке WordPress:
- Использовать плагин
- Изменить код темы
- Использовать диспетчер тегов Google
Ниже приведены преимущества и недостатки каждого метода:
| Метод | Преимущество | Недостаток |
|---|---|---|
| Использование плагина | Простое приложение | Фрагменты кода хранятся в базе данных; трудно интегрировать с согласием на использование cookie; отсутствие контроля; может вызвать проблемы с производительностью |
| Изменение кода темы | Сниппеты кода становятся частью кодовой базы; возможны визуальные изменения; полный контроль над сложными приложениями | Требуется редактирование кода темы и навыки кодирования |
| Использование менеджера тегов Google | Простое приложение; управление фрагментами кода осуществляется централизованно вне сайта; хорошо интегрируется с согласием на использование cookie; в принципе, можно реализовать и сложные приложения | Требуется одноразовая настройка |
Использование плагина для редактирования заголовка WordPress
Вы можете получить доступ к различным плагинам, помогающим вставить код в HTML-заголовок, из каталога плагинов WordPress. Эти плагины в основном подходят для добавления мета-тегов, таблиц стилей или скриптов на страницу. Добавление видимых элементов в заголовок страницы обычно невозможно. Плагины просты в использовании, и большинство из них можно добавить без предварительных навыков кодирования. В зависимости от плагина, контроль над вставляемым кодом ограничен. Ниже приведен обзор широко используемых плагинов для кода заголовка:
- Head, Footer и Post Injections
- Скрипты для заголовков и колонтитулов
- Менеджер кода для заголовков и колонтитулов
Ниже мы покажем вам, как использовать плагин «Header and Footer Scripts» для размещения дополнительного кода в HTML-заголовке заголовка WordPress шаг за шагом.
Изменение кода темы для редактирования заголовка WordPress
Изменяя код темы, вы сохраняете полный контроль над содержимым заголовка WordPress. Любые внесенные изменения становятся частью кодовой базы темы и поэтому подлежат контролю версий. Это предпочтительный вариант для опытных пользователей и администраторов. У вас есть несколько вариантов изменения кода темы:
- Добавить код в файл шаблона header.php
- Добавить дополнительные функции в файлfunctions.php
- Создать дочернюю тему и добавить изменения
| Метод | Преимущества | Недостатки |
|---|---|---|
| Добавление кода в файл header.php | концептуально прост для понимания; точный контроль порядка внедрения кода; также работает для видимых изменений | жестко закодированные изменения; при повторных изменениях возрастает риск того, что они запутаются. |
| Создание функций в файле functions.php | четкое разделение между представлением и функциональностью; можно задать порядок внедрения кода | большая сложность; может запутать новичков |
| Создание дочерней темы | изменения безопасны для обновлений и могут быть легко отменены при необходимости | немного больше усилий; требуется одноразовое изменение темы. |
Добавление кода в файл header.php
Самый простой способ добавить код в заголовок WordPress — это отредактировать файл «header.php». Этот файл WordPress является универсальным шаблоном, который используется практически в каждой теме. Давайте рассмотрим на примере официальной темы «TwentyTwenty», как устроен типичный файл header.php:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php
wp_body_open();
?>
<header id="site-header" class="header-footer-group" role="banner">Приведенный выше код показывает заголовок WordPress. HTML-заголовок располагается между открывающим <head> и закрывающим </head> тегом. Помимо нескольких метатегов, HTML-заголовок содержит вызов функции WordPress wp_head — так называемый WordPress hook. Программно это связано с тем, чтобы в HTML head можно было поместить другие элементы. Эти элементы добавляются перед закрывающим тегом </head>. Поэтому хук wp_head подходит только для добавления невидимых элементов.
Чтобы добавить больше элементов в HTML-головку, просто поместите свой код до или после вызова wp_head (). Обратите внимание, что порядок элементов важен, особенно когда речь идет о таблицах стилей и скриптах. Для метатегов порядок обычно не имеет значения. Теги стилей и скриптов не следует вручную размещать в заголовке WordPress. Подробнее об этом вы можете узнать в следующем разделе.
За HTML head следует HTML body, где за открывающим тегом <body> следует элемент заголовка.
Создание функций в файле functions.php
Как и файл header.php, файл functions.php присутствует в большинстве тем WordPress. Однако это не PHP-шаблон, который переводится непосредственно в HTML. Скорее, код в functions.php используется для настройки темы и сайта. Можно определить функции и связать их с хуками WordPress. В качестве простого примера давайте добавим мета-тег robots в HTML-главу:
function robots_meta() {
echo '<meta name="robots" content="index, follow, noarchive">';
}
add_action( 'wp_head', 'robots_meta' );Сначала мы определяем новую функцию в functions.php, которая выводит HTML-код мета-тега. Назовем ее robots_meta (). Вы можете выбрать любое название, но лучше выбрать такое, которое отражает то, что делает функция. Функция WordPress add_action () называется так же, как и определение функции. Мы называем этот хук WordPress «wp_head», который мы будем использовать для ссылки на нашу функцию «robots_meta». Вызов wp_head () приводит к вызову robots_meta (); HTML-код, содержащийся в robots_meta (), выводится в HTML-заголовке.
Давайте изменим наш пример. Мы хотим разрешить включение «is_front_page ()» в кэш Google, опустив «noarchive» на главной странице WordPress. И мы хотим исключить из индексации страницы, на которых активированы комментарии WordPress («is_single () && comments_open ()»), добавив «noindex»:
function robots_meta() {
if ( is_front_page() ) {
echo '<meta name="robots" content="index, follow">';
}
else if ( is_single() && comments_open() ) {
echo '<meta name="robots" content="noindex, follow, nocache">';
}
else {
echo '<meta name="robots" content="index, follow, nocache">';
}
}
add_action( 'wp_head', 'robots_meta' );Добавление дополнительных скриптов и таблиц стилей в WordPress — вот как это сделать
Иногда вам необходимо добавить на сайт WordPress внешнее программное обеспечение, например, скрипт отслеживания или решение о согласии на использование cookie. Часто рекомендуется вставить фрагмент кода непосредственно в заголовок WordPress для загрузки дополнительных скриптов или таблиц стилей. На практике это требует определенной осторожности, поскольку порядок добавления скриптов или таблиц стилей имеет решающее значение!
Вновь определенные свойства стиля дополняют или перезаписывают ранее определенные свойства. Если порядок определения стилей будет обратным, это может привести к серьезным ошибкам отображения. То же самое относится и к сценариям. Если сценарий обращается к переменным или функциям, которые были определены в другом сценарии, возникает зависимость. Зависимый сценарий должен быть загружен последним.
WordPress имеет специальные функции и крючки для интеграции дополнительных скриптов и таблиц стилей. Скрипты и таблицы стилей ставятся в очередь («enqueue»), что отражается в их названиях, например, «wp_enqueue». Следующий код является примером загрузки таблиц стилей и скриптов в файле functions.php:
function add_theme_scripts() {
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );Создание дочерней темы
Когда вы адаптируете код темы WordPress, рекомендуется создать дочернюю тему. Дочерняя тема «наследует» код «родительской темы», выборочно добавляя и перезаписывая компоненты. Использование дочерней темы гарантирует, что изменения будут отделены от кода оригинальной темы. Это также означает, что обновления могут быть сделаны без перезаписи исходной родительской темы. Для создания дочерней темы можно использовать два ранее рассмотренных метода.
Использование диспетчера тегов Google для редактирования заголовка WordPress
Помимо плагинов или изменения кода темы для размещения кода в заголовке WordPress, есть еще один вариант: использование менеджера тегов Google. Вам нужно будет добавить его на свой сайт только один раз, либо добавив код темы, либо используя плагин. Затем из отдельного интерфейса в своем аккаунте Google вы сможете отслеживать код и метатеги и интегрировать их в свой сайт WordPress. Этот метод часто предпочитают менеджеры по маркетингу, поскольку он позволяет им привязать конкретный код в HTML-голове, не прибегая к помощи профессиональных кодеров.
Если вы управляете масштабными изменениями кода заголовка на коммерческом сайте WordPress, лучше всего использовать Google Tag Manager. Если вы являетесь разработчиком или сотрудничаете с кодерами, вы можете создать дочернюю тему. Плагины рекомендуются только для внесения простых изменений в заголовок WordPress.