Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Как настроить заголовки в WordPress (плагины + пользовательский код)

  1. 1. WordPress Custom Image Header Image
  2. Что делать, если пользовательский образ заголовка WordPress не загружается?
  3. WordPress Custom Image Header Image для каждой страницы
  4. Обновление контента
  5. [4 Страницы] 21-шаговый контрольный список для Убедитесь, что сайт WordPress защищен на 99,9%
  6. 2. Использование пользовательского заголовка плагин WordPress
  7. 3. Как редактировать заголовок в темах WordPress, используя код
  8. Дополнительные команды для настройки заголовка WordPress
  9. 4. Изменение заголовка WordPress, используя лучшие практики
  10. 5. БОНУС: Примеры пользовательских заголовков WordPress
  11. Завершение

Вы видите улыбающегося парня «WP Buffs» и варианты навигации над этим сообщением в блоге? Это заголовок нашего сайта WordPress. Это универсальный элемент, который будет присутствовать на каждой странице и посте вашего сайта и часто служит первым впечатлением вашего посетителя. Не имеет значения, является ли ваш сайт блогом, интернет-магазином, цифровым портфолио или чем-то еще - заголовок чрезвычайно важен.

Не имеет значения, является ли ваш сайт блогом, интернет-магазином, цифровым портфолио или чем-то еще - заголовок чрезвычайно важен

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

Более новые темы WordPress по умолчанию могут предложить красивые изображения заголовков на выбор. Двадцать семнадцать тема даже есть популярное видео на своей домашней странице. Но если вы хотите, чтобы ваш сайт выделялся, вы должны иметь возможность создать свой собственный заголовок WordPress. Хотя есть много отличные учебники WordPress там немного сосредоточиться только на заголовке. Чтобы помочь вам, мы собрали список способов настройки заголовков в WordPress.

1. WordPress Custom Image Header Image

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

Вот что мы рекомендуем. Используя в качестве примера наш собственный сайт, предположим, что вы хотите использовать этот фоновый рисунок для заголовка. Вы можете скачать практически любое изображение на сайте, щелкнув по нему правой кнопкой мыши. Вы получите подсказку с просьбой «Сохранить изображение как». Как только изображение заголовка будет загружено на ваш собственный сайт, вы сможете получить его размеры. Таким образом, вы можете изменить размер своего предпочтительного изображения в соответствии со спецификациями настраиваемого изображения заголовка WordPress.

Что делать, если пользовательский образ заголовка WordPress не загружается?

Некоторые изображения скрыто в коде сайта и не дают возможность сохранить вышеуказанным способом. Наше изображение заголовка фактически попадает в эту категорию! Однако есть способ их получить. Используя то же изображение с нашего сайта и Safari, снова щелкните правой кнопкой мыши на изображение. Вы получите опцию «Проверять». Как только вы нажмете на нее, ваш браузер откроет панель и выделит выбранный элемент для проверки. По сути, вы можете видеть, как изображение было добавлено. Что вы действительно хотите, это найти URL или гиперссылку, которая заканчивается в формате изображения. Наиболее распространенными являются .jpg и .png, но есть и другие. Просто скопируйте эту ссылку и вставьте в новое окно. Теперь вы сможете сохранить изображение, как описано ранее.

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

WordPress Custom Image Header Image для каждой страницы

Что делать, если вы хотите разные заголовки для каждой страницы на вашем сайте WordPress? Вы можете использовать бесплатный плагин, такой как WP Header Images. Это позволяет вам добавлять свои собственные изображения заголовков на каждую веб-страницу. Он также может добавлять собственные изображения заголовков для сообщений в блоге, пользовательских сообщений и даже продуктов WooCommerce.

Просто установите плагин и перейдите в « Настройки»> «Образы заголовков WP» . Затем он будет тянуть ваши пункты меню навигации. Просто выберите изображение, которое вы хотели бы видеть на каждой странице. Вы также можете смотреть видеоурок создатель на YouTube.

Обновление контента

Бесплатный контрольный список безопасности WordPress

Бесплатный контрольный список безопасности WordPress

[4 Страницы] 21-шаговый контрольный список для
Убедитесь, что сайт WordPress защищен на 99,9%

Скачать

2. Использование пользовательского заголовка плагин WordPress

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

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

Этот плагин также позволяет публиковать виджеты на боковой панели или в нижнем колонтитуле

3. Как редактировать заголовок в темах WordPress, используя код

Все заголовки WordPress в темах имеют настройки по умолчанию, сделанные с помощью кода, который идет с ними. Тем не менее, они могут быть отредактированы, если вы не боитесь делать небольшое копирование и вставку во время кодирования. Чтобы найти файл, содержащий ваш заголовок, перейдите на панель инструментов WordPress. Затем перейдите в Внешний вид> Редактор . Теперь вы увидите файлы, которые составляют ваш сайт. Заголовок содержится в файле с именем header.php, как подчеркнуто на приведенном ниже скриншоте. Этот файл содержит в основном функции заголовка, которые мы не будем здесь рассматривать.

Файл с маркировкой styles.css - это тот, который вам нужен. Вы можете найти слово «заголовок» в файле, чтобы увидеть, какие настройки в настоящее время. ВАЖНОЕ ПРИМЕЧАНИЕ: КОПИРУЙТЕ И ВСТАВЛЯЙТЕ СВОЙ ОРИГИНАЛЬНЫЙ ФАЙЛ НА ПРОГРАММУ НОТЕПАДОВ, ДО ТОГО, ЧТОБЫ ВЫБИРАТЬ РЕДАКТИРОВАТЬ ФАЙЛЫ, НАХОДЯЩИЕСЯ В ВИДЕ > РЕДАКТОР .

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

, header {
фон: белый;}

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

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

Вы также можете добавить массу других команд, заменив «background: white;» или добавив строку под ним. Они включают, но не ограничиваются:

  • шрифт: курсив; - Меняет стиль шрифта на курсив.
  • непрозрачность фона: .5; Изменяет непрозрачность фона. 0 для полностью прозрачного фона. 1 для того, кто совсем не прозрачен.
  • размер шрифта: 20 пикселей; Изменяет размер шрифта в заголовке до 20 пикселей. Вы можете изменить 20 на любой номер, который вы выберете.
  • отступы: 20 пикселей; - Изменяет отступы или пространство вокруг заголовка до 20 пикселей. Как и выше, вы можете изменить 20 на то, что вам нравится. Вы также можете указать, на какую сторону должен идти отступ, добавив «-left» к «padding». Это также работает для верха, низа и справа.
  • border: 20px - это создает рамку вокруг заголовка шириной 20 пикселей. Как и в предыдущем примере, вы также можете добавить тире и сбоку, чтобы создать рамку только сверху, снизу, слева или справа.
  • цвет бордюра: белый; - Это изменит цвет вашей границы на белый. Вы также можете использовать шестнадцатеричный цвет.
  • высота строки: 20 пикселей; - Это устанавливает интервал в соответствии с вашим размером шрифта. Это может быть полезно, если вы используете больший шрифт, и он перекрывает разрывы строк.

Если ваш новый код не работает, попробуйте добавить «! Important» в конец команды, как в «padding-left: 0! Важный;». Если это все еще не работает, ваш заголовок может не называться «заголовок». Некоторые темы WordPress используют другие имена в качестве заголовков. К ним относятся заголовок, встроенный заголовок и другие.

4. Изменение заголовка WordPress, используя лучшие практики

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

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

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

Это было бы отличной идеей для театра, актера или   любой тип музыканта   ,

5. БОНУС: Примеры пользовательских заголовков WordPress

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

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

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

Завершение

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

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

Хотите оставить отзыв или присоединиться к разговору? Добавьте ваши комментарии 🐦 в твиттере ,

Сохранить Сохранить

Сохранить Сохранить Сохранить Сохранить

Сохранить Сохранить

Сохранить Сохранить

Как настроить заголовки в WordPress (плагины + пользовательский код)

4,3 (85,22%) 23 голос (ов)

Лилия Ф. является приглашенным участником WP Buffs блог WordPress и владелец MPP Freelance , писательская и веб-дизайнерская фирма в Хьюстоне, штат Техас. Она работает над созданием веб-сайтов, написанием контента, созданием графического дизайна и оказанием помощи авторам в самостоятельной публикации.

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