4 простых метода (3 без кода)

Опубликовано: 2022-07-21

Заголовок — это первый элемент вашего сайта, который видят большинство посетителей. Как правило, именно здесь размещаются логотип и меню вашего сайта, и это неотъемлемая часть каждой страницы. Если вы не знаете, как редактировать заголовок WordPress, вам будет трудно ️ произвести сильное первое впечатление.

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

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

Оглавление:

  1. Отредактируйте заголовок с помощью настройщика
  2. Используйте полное редактирование сайта (и совместимую тему)
  3. Отредактируйте заголовок с помощью конструктора страниц WordPress.
  4. Добавьте пользовательский код в шапку с помощью плагина

1. Отредактируйте заголовок с помощью настройщика

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

Чтобы получить доступ к Customizer, перейдите на панель управления и нажмите « Внешний вид » > « Настроить » . Настройщик отобразит меню параметров слева и предварительный просмотр вашего веб-сайта справа:

Настройщик WordPress

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

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

После того, как вы найдете параметры заголовка своей темы, варианты, которые вы видите сейчас, будут зависеть от того, какую тему вы используете. Например, наша тема Neve включает в себя параметры для изменения вашего логотипа, цвета заголовка и меню, отображаемого в этом разделе:

Настройка заголовка с использованием темы Neve

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

Размещение элементов заголовка с использованием темы Neve в настройщике

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

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

2. Используйте полное редактирование сайта (и совместимую тему)

Полное редактирование сайта — это новая функция, которая позволяет редактировать шаблоны тем с помощью редактора блоков. Это работает только для тем с поддержкой блоков, поэтому оно может быть доступно или недоступно на вашем сайте.

Чтобы узнать, поддерживает ли ваша тема полное редактирование сайта, откройте меню « Внешний вид » и найдите параметр « Редактор »:

Доступ к полному редактированию сайта в WordPress

Выберите это и откроется редактор блоков. Однако вы будете редактировать свои шаблоны тем, а не отдельные страницы или сообщения.

По умолчанию редактор откроет шаблон домашней страницы, который должен включать элемент Заголовок :

Использование полного редактирования сайта в WordPress

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

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

Использование полного редактирования сайта для редактирования заголовка WordPress

На этом этапе вы можете добавить или удалить блоки из заголовка. Чтобы удалить или отредактировать существующий блок, выберите его и используйте контекстное меню, которое появляется на экране при этом:

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

Когда вы выбираете блок, вы также можете редактировать его с помощью блока меню настроек в правой части экрана. Это меню обычно содержит параметры стиля, и они различаются в зависимости от того, какой блок вы редактируете:

Пример вариантов блока.

Чтобы добавить новый блок, выберите элемент Заголовок и найдите значок плюса . Эта кнопка откроет меню, в котором вы сможете выбрать, какой блок добавить:

Добавление нового блока в шапку WordPress

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

Редактирование меню в шапке WordPress

Если вас устраивают изменения в заголовке, нажмите « Сохранить » . Это сохранит изменения в шаблоне заголовка темы, и они автоматически отразятся на вашем сайте.

3. Отредактируйте заголовок с помощью конструктора страниц WordPress.

Некоторые плагины для создания страниц WordPress предлагают варианты редактирования заголовка WordPress. Например, Elementor Pro включает в себя инструмент Theme Builder, к которому вы можете получить доступ с премиальной лицензией.

Если у вас нет доступа к Elementor Pro, вы можете использовать бесплатное стороннее расширение, например плагин Elementor Header & Footer Builder на WordPress.org.

Однако мы собираемся показать вам, как это сделать с помощью Elementor Pro и его функции Theme Builder.

На практике Elementor Theme Builder работает аналогично полному редактированию сайта.

Чтобы получить доступ к Theme Builder, перейдите в Templates > Theme Builder . Выберите параметры заголовка в разделе SITE PARTS и найдите существующие шаблоны справа. Должен быть только один шаблон заголовка, и вы можете нажать кнопку « Редактировать » рядом с ним:

Использование конструктора тем Elementor

Это запустит редактор Elementor. Отсюда вы можете выбрать создание заголовка с использованием блоков Elementor или импортировать готовые шаблоны. Если вы нажмете на значок папки в теле редактора, вы увидите, к каким шаблонам заголовков у вас есть доступ:

Выбор шаблона заголовка Elementor

Если вы используете Elementor, мы рекомендуем вам воспользоваться этими шаблонами. Это позволяет вам экспериментировать с несколькими стилями заголовков, которые вы можете редактировать, добавляя или настраивая модули:

Добавление новых модулей в Elementor.

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

При использовании Theme Builder вы редактируете только определенный шаблон темы. Однако вы по-прежнему можете использовать весь набор модулей и параметров конфигурации, которые предлагает Elementor.

После того, как вы закончите редактирование шаблона заголовка, сохраните его с помощью кнопки « Опубликовать ». Затем Elementor попросит вас выбрать, на каких страницах должен отображаться шаблон:

Выбор на каких страницах отображать шаблон Elementor

Если вы уже не платите за премиальную лицензию Elementor, инструмент Theme Builder сам по себе может не оправдать покупку. Он делает то же самое, что и полное редактирование сайта, но по более высокой цене. Основное отличие состоит в том, что вы можете использовать более широкий набор модулей Elementor, и если вы уже используете Elementor, будет проще убедиться, что дизайн вашего заголовка соответствует остальной части вашего сайта.

4. Добавьте пользовательский код в шапку с помощью плагина

Как правило, использование плагинов — самый простой способ реализовать настройки в WordPress. Однако это обычно не относится к заголовкам. Если вам нужен плагин, который позволит вам визуально редактировать заголовки, вам нужно будет использовать компоновщик страниц. Как мы обсуждали в предыдущем разделе, большинство компоновщиков страниц, предлагающих эту функциональность, имеют высокую цену.

Бесплатные плагины, которые позволяют настраивать заголовок, обычно предлагают более простой способ добавления в него пользовательского кода. Альтернативой является редактирование файлов темы вручную с помощью дочерней темы, что может быть пугающим (и рискованным), если у вас нет опыта веб-разработки.

Одним из фантастических примеров такого плагина является Header Footer Code Manager. Этот инструмент позволяет добавлять фрагменты HTML, CSS и JavaScript в верхний и/или нижний колонтитулы и выбирать, на каких страницах эти фрагменты будут загружаться:

Когда плагин активен, перейдите на страницу HFCM > Добавить новые фрагменты на панели инструментов. Здесь вы можете выбрать, какой тип сниппета вы хотите добавить, где он должен отображаться и добавлять ли его в верхний или нижний колонтитул:

Добавление пользовательского кода в заголовок WordPress

Если вы планируете добавлять в заголовок новые элементы, вам потребуется использовать HTML. Чтобы изменить стиль заголовка и содержащихся в нем элементов, вы можете использовать фрагменты кода CSS.

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

Настройте заголовок WordPress сегодня

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

У вас есть вопросы о том, как редактировать заголовок в WordPress? Давайте поговорим о них в разделе комментариев ниже!

Бесплатное руководство

5 основных советов по ускорению
Ваш сайт WordPress

Сократите время загрузки даже на 50-80%
просто следуя простым советам.