Вы хотите показать собственный заголовок для вашего сайта WordPress?
Многие темы WordPress имеют встроенный заголовок, который находится вверху каждой страницы. Возможно, вам придется настроить его, чтобы добавить важные ссылки, значки социальных сетей, поиск по сайту или другие элементы, чтобы произвести хорошее первое впечатление.
В этой статье мы покажем вам, как настроить заголовок WordPress и даже создать полностью настраиваемый заголовок для всего сайта или отдельных страниц.
Что такое заголовок в WordPress?
Заголовок вашего веб-сайта — это верхняя часть каждой страницы вашего веб-сайта WordPress, и, вероятно, первое, что увидят ваши посетители.
Он часто отображает логотип и заголовок вашего веб-сайта, меню навигации и другие важные элементы, которые вы хотите, чтобы пользователи видели в первую очередь.
Например, вот наша область заголовка на WPBeginner, которую миллионы читателей видят каждый месяц.
Настраивая заголовок своего сайта, вы можете придать ему уникальный дизайн и сделать его более полезным для посетителей. Вы можете ссылаться на свои самые популярные страницы, отображать значки социальных сетей или номер своего рабочего телефона , а также отображать кнопки призыва к действию для увеличения количества конверсий.
С учетом сказанного давайте посмотрим, как легко настроить заголовок WordPress.
Настройте заголовок с помощью настройщика темы WordPress
Многие популярные темы WordPress позволяют использовать настройщик темы WordPress для внесения изменений в область заголовка вашего макета WordPress. Эту функцию иногда называют настраиваемым заголовком , но не все темы поддерживают ее.
Вы должны начать с перехода к Внешний вид »Настроить в области администрирования WordPress.
Примечание . Если вы не видите «Внешний вид» » «Настроить» в меню администратора WordPress, а видите только «Внешний вид» «Редактор (бета-версия)», это означает, что в вашей теме разрешено полное редактирование сайта. В этом случае вам следует перейти к следующему разделу.
Ваша тема может добавить раздел «Заголовок» в настройщик или добавить параметры заголовка в разделе «Цвет», но это зависит от темы к теме. Вот несколько примеров.
Некоторые темы, такие как Twenty Twenty-One, вообще не предлагают параметры настройки заголовка. В этом случае мы рекомендуем вам использовать плагин для создания тем перетаскивания, такой как SeedProd, который мы рассмотрим ниже.
Тема Twenty Sixteen позволяет добавлять фоновое изображение в заголовок и даже добавлять случайные изображения заголовка .
Некоторые бесплатные и премиальные темы WordPress предлагают еще больше возможностей настройки темы. Например, вы можете изменить стиль шрифта заголовка, макет, цвета и многое другое. Но вы ограничены тем, что позволяет вам делать разработчик темы.
Например, вы можете создать собственный заголовок с помощью настройщика темы с темой Astra .
Astra имеет специальную опцию «Конструктор заголовков» на панели слева. Здесь вы найдете различные настройки для редактирования внешнего вида и стиля заголовка. Вы можете создать собственный заголовок, добавив блоки, как при редактировании записи блога или страницы в редакторе контента WordPress .
Чтобы начать, просто наведите указатель мыши на пустую область в заголовке и щелкните значок «+», чтобы добавить блок заголовка.
Затем вы можете выбрать любой блок, который хотите добавить в свой собственный заголовок. Например, вы можете добавить блок виджетов , блок аккаунта, блок поиска и многое другое.
Кроме того, конструктор заголовков также позволяет перетаскивать блоки и размещать их над или под заголовком.
Вы можете дополнительно настроить каждый блок, который вы добавляете в заголовок.
Например, выбор блока «Название сайта и логотип» даст вам возможность загрузить название сайта и логотип, изменить ширину логотипа, отобразить слоган сайта и многое другое.
Кроме того, вы также можете изменить цвет фона заголовка или добавить фоновое изображение, которое будет отображаться в заголовке.
Когда вы закончите редактирование пользовательского заголовка, просто нажмите кнопку «Опубликовать».
Для получения более подробной информации см. наше окончательное руководство по использованию настройщика тем WordPress .
Настройте заголовок с помощью полнофункционального редактора сайта WordPress.
WordPress добавил полное редактирование сайта в WordPress версии 5.9 . Если ваша тема поддерживает новую функцию, она заменяет настройщик темы. Однако в настоящее время есть только несколько тем, которые работают с полноценным редактором сайта.
Когда вы используете совместимую тему, вы можете настроить свой заголовок, перейдя в « Внешний вид» «Редактор» . Это запустит полноценный редактор сайта, который похож на редактор блоков , который вы используете для написания постов и страниц WordPress.
Когда вы щелкнете по заголовку, вы заметите, что имя шаблона в верхней части страницы изменится на «Заголовок страницы».
Теперь, когда вы нажмете значок «Настройки» на панели инструментов, вы увидите параметры для настройки макета, цвета, границы и размеров заголовка.
В качестве примера мы изменим цвет фона заголовка. Во-первых, вам нужно нажать на раздел «Цвет», чтобы развернуть его. После этого вы должны нажать на опцию «Фон».
Появится всплывающее окно, позволяющее выбрать сплошной цвет или градиент. Там также будет несколько цветов, которые вы можете выбрать. Когда вы нажимаете на цвет, фон вашего заголовка будет немедленно изменен.
Вы можете найти дополнительные параметры настройки, щелкнув значок «Стили» в правом верхнем углу страницы. Это позволит вам изменить шрифт, цвета и макет заголовка.
Создавайте собственные макеты заголовков и страниц с помощью SeedProd
Если вы хотите полностью контролировать свои верхние и нижние колонтитулы и боковые панели, чтобы придать вашему веб-сайту уникальный дизайн, мы рекомендуем использовать SeedProd .
SeedProd — лучший плагин для создания тем WordPress, который позволяет вам легко создавать собственные темы WordPress без написания кода. Это включает в себя создание верхних и нижних колонтитулов и всего остального, что необходимо для привлекательной темы WordPress.
Вы даже можете создать несколько пользовательских стилей заголовков для разных страниц и разделов вашего сайта.
Примечание. Вы можете использовать бесплатную версию SeedProd для создания настраиваемых целевых страниц, включая настраиваемые заголовки, но вам потребуется версия Pro для создания полностью настраиваемых тем, которые включают макеты заголовков для всего сайта.
Все, что вам нужно сделать, это щелкнуть ссылку «Редактировать дизайн», расположенную под заголовком.
Это откроет заголовок в редакторе перетаскивания SeedProd.
Отсюда вы можете легко настроить свой заголовок, добавив новые блоки.
Существуют блоки для тегов шаблонов, таких как логотип сайта, любые ваши виджеты WordPress, и расширенные блоки, такие как таймер обратного отсчета, меню навигации или кнопки обмена в социальных сетях.
Самое приятное то, что вы можете дополнительно настроить каждый блок с помощью конструктора тем. Например, вы можете изменить размер и выравнивание вашего логотипа или выбрать, какие страницы показывать в навигационном меню. Он даже позволяет добавить изображение в шапку .
С помощью SeedProd вы также можете добавить полный раздел в шаблон заголовка вашей темы.
Разделы представляют собой группу блоков, и вы можете использовать их для разных областей вашего сайта. Это включает в себя заголовки, нижние колонтитулы, функции, отзывы , призыв к действию и многое другое.
Чтобы использовать раздел заголовка, сначала перейдите на вкладку «Разделы» на панели «Дизайн».
После этого выберите раздел заголовка, который вы хотели бы использовать для своего веб-сайта. SeedProd предлагает несколько шаблонов разделов, которые вы можете использовать.
Затем перейдите к настройке раздела заголовка.
Когда вы будете довольны своим пользовательским заголовком, не забудьте нажать кнопку «Сохранить», чтобы сохранить изменения.
Теперь вы готовы опубликовать свой собственный заголовок.
Просто перейдите на страницу SeedProd » Theme Builder на панели управления WordPress и установите переключатель рядом с параметром «Включить тему SeedProd» в положение «Да».
Как только вы включите эту опцию, SeedProd заменит вашу тему WordPress по умолчанию новой пользовательской темой и заголовком.
Теперь вы можете посетить свой веб-сайт, чтобы увидеть новый настраиваемый заголовок в действии.
Создайте разные пользовательские заголовки для каждой страницы
Знаете ли вы, что с помощью SeedProd вы можете создавать собственные заголовки для разных страниц?
Конструктор тем позволяет добавлять собственные заголовки для каждой страницы вашего сайта WordPress . Таким образом, вы можете отображать настраиваемый заголовок для разных категорий, тегов, типов сообщений, типов страниц и многого другого.
Для начала вам нужно перейти в SeedProd »Theme Builder на панели инструментов WordPress и нажать кнопку «Добавить новый шаблон темы».
Появится новое всплывающее окно, в котором вам нужно будет ввести данные шаблона темы.
Идите вперед и введите имя для вашего шаблона темы. После этого выберите «Заголовок» в качестве типа шаблона в раскрывающемся меню. Поле «Приоритет» можно оставить пустым.
Затем вам нужно будет ввести условия отображения для вашего пользовательского заголовка. Например, мы использовали условия, при которых он будет отображаться на всех постах и страницах, которые находятся в категории туториалов.
Не забудьте нажать кнопку «Сохранить», когда закончите.
После этого вы можете продолжить и отредактировать пользовательский заголовок с помощью конструктора тем SeedProd с перетаскиванием.
Когда вы закончите редактирование пользовательского заголовка, просто нажмите кнопку «Сохранить» вверху.
Добавление пользовательского заголовка для каждой категории
Большинство веб-сайтов отображают один и тот же заголовок для всех сообщений, страниц, категорий и страниц архива. Однако вы можете отображать разные заголовки для каждой категории WordPress .
Это можно сделать, добавив код в файлы темы, но у вас будет больше контроля с помощью конструктора тем.
Ранее мы показали вам, как настроить заголовок с помощью плагина для создания тем SeedProd . SeedProd также позволяет создавать несколько настраиваемых заголовков и отображать их для разных категорий, используя условную логику.
Чтобы создать новый заголовок, вам нужно перейти в SeedProd »Theme Builder и нажать оранжевую кнопку «Добавить новый шаблон темы». Кроме того, вы можете продублировать свой текущий заголовок и использовать его в качестве отправной точки.
Появится всплывающее окно, в котором вы можете дать шаблону темы имя и выбрать «Заголовок» в раскрывающемся меню «Тип».
Также необходимо указать приоритет. Это используется, если более одного заголовка соответствует условиям для определенной страницы, и будет отображаться заголовок с наибольшим приоритетом. Заголовок по умолчанию имеет приоритет 0, поэтому убедитесь, что вы ввели 1 или выше.
После этого вам нужно будет настроить одно или несколько условий. Это позволяет SeedProd знать, когда отображать определенный заголовок. Вы просто выбираете условия из выпадающего меню.
В первых двух меню вам нужно выбрать «Включить», а затем «Имеет категорию». В последнем поле вы должны ввести название категории, в которой вы хотите, чтобы заголовок отображался.
Вы можете легко отобразить один и тот же заголовок для нескольких категорий, нажав кнопку «Добавить условие» и включив другую категорию. Когда вы закончите, не забудьте нажать кнопку «Сохранить», чтобы сохранить новый заголовок.
Теперь вы можете настроить дизайн каждого нового заголовка с помощью редактора перетаскивания SeedProd, как мы показывали вам ранее.
Добавьте область виджетов в заголовок WordPress
Если вы создаете собственную тему с нуля, используя код, возможно, вы захотите добавить виджет WordPress в свой заголовок, чтобы привлечь внимание ваших посетителей. Виджеты позволяют легко добавлять блоки контента в определенные разделы вашей темы, но не каждая тема включает область виджета заголовка.
Ранее мы упоминали, как просто добавлять виджеты в шапку с помощью конструктора тем SeedProd . Но что, если вы хотите добавить виджет в заголовок обычной темы WordPress?
Некоторые темы, например тема Astra , позволяют сделать это с помощью настройщика темы WordPress. Например, Astra добавляет опцию «Конструктор заголовков», которая позволяет полностью настроить заголовок, включая добавление виджетов.
Если ваша тема WordPress в настоящее время не имеет области виджетов WordPress в заголовке, вам необходимо добавить ее вручную, добавив следующий код в файл functions.php , в плагин для конкретного сайта или с помощью кода плагин сниппетов .
Это более сложный вариант, так как вам нужно знать, где разместить код и как оформить его с помощью CSS.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function wpb_widgets_init() { register_sidebar( array( 'name' => 'Custom Header Widget Area', 'id' => 'custom-header-widget', 'before_widget' => '<div class="chw-widget">', 'after_widget' => '</div>', 'before_title' => '<h2 class="chw-title">', 'after_title' => '</h2>', ) ); }add_action( 'widgets_init', 'wpb_widgets_init' ); |
Этот код регистрирует новую боковую панель или готовую область виджета для вашей темы.
Если вы перейдете в Внешний вид » Виджеты , вы увидите новую область виджетов с надписью «Пользовательская область виджета заголовка». Теперь вы можете добавить свои виджеты в эту новую область.
Наконец, вам нужно добавить некоторый код в шаблон заголовка вашей темы, расположенный в файле header.php вашей темы. Это добавит созданную ранее область виджетов в заголовок, чтобы виджеты отображались на вашем веб-сайте.
Вам нужно скопировать этот фрагмент кода и вставить его туда, где вы хотите, чтобы виджет отображался.
|
1
2
3
4
5
6
7
8
|
<?php if ( is_active_sidebar( 'custom-header-widget' ) ) : ?> <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary"> <?php dynamic_sidebar( 'custom-header-widget' ); ?> </div> <?php endif; ?> |
В зависимости от вашей темы вам также может понадобиться добавить CSS в WordPress , чтобы управлять отображением области виджетов.
Добавьте случайные изображения заголовков в свой блог WordPress
Еще один способ сделать ваши заголовки WordPress более привлекательными — добавить случайные изображения в раздел заголовка.
Показ изображений, которые меняются случайным образом, помогает привлечь внимание посетителей и сделать ваш контент более привлекательным.
Чтобы добавить случайные изображения заголовка в свой блог WordPress , вы можете использовать настройщик темы и загрузить изображения в раздел заголовка. Этот параметр может различаться в зависимости от используемой вами темы WordPress.
Затем выберите параметр «Случайно загружать заголовки».
Если вы хотите больше контроля и гибкости при отображении случайных изображений в разделе заголовка, вы также можете использовать плагин WordPress .
Добавьте код в шапку вашего сайта (дополнительно)
Наконец, если вы хотите добавить пользовательский код в раздел заголовка вашего веб-сайта, вы можете легко сделать это с панели инструментов WordPress. Этот метод рекомендуется для опытных пользователей и не подходит для начинающих, поскольку он включает в себя редактирование кода и требует технических знаний.
Вы можете найти заголовочные файлы вашей темы, выбрав Внешний вид » Редактор файлов темы в панели администратора WordPress. В файлах темы style.css вы можете прокрутить вниз до раздела заголовка сайта и добавить или удалить код.
Примечание. Мы не рекомендуем вам напрямую редактировать файлы темы, потому что малейшая ошибка может сломать ваш сайт и испортить дизайн.
Более простой способ добавить пользовательский код для редактирования шапки вашего сайта — использовать плагин « Вставить верхние и нижние колонтитулы».
Сначала установите и активируйте плагин «Вставить верхние и нижние колонтитулы».
После активации вы можете перейти в «Настройки» » Вставить верхние и нижние колонтитулы на панели инструментов WordPress. Затем введите пользовательский код в разделе «Скрипты в заголовке».
После ввода кода сохраните изменения.
Для получения более подробной информации вы можете посмотреть наше руководство о Как создать бесплатный сайт на WordPress (бесплатный домен + хостинг) .
Мы надеемся, что это руководство помогло вам научиться настраивать заголовок WordPress.
