Вы видите улыбающегося парня "WP Buffs" (другими словами, наш логотип) и варианты навигации в этом сообщении в блоге? Это заголовок нашего сайта WordPress. Это универсальный элемент, который будет присутствовать на каждой странице и посте вашего сайта и часто служит первым впечатлением вашего посетителя. Не имеет значения, является ли ваш сайт блогом, интернет-магазином, цифровым кошельком или чем-то еще – заголовок WordPress чрезвычайно важен.
Хотя безопасность вашего веб-сайта составляет 99,9%, а время загрузки составляет менее 1 секунды, его заголовок – это первое, что люди видят, когда он попадает на ваш сайт. Убедиться, что вы даете своим посетителям хорошее первое впечатление, является ключом к укреплению доверия и успеха.
Новые темы WordPress по умолчанию могут предлагать красивые заголовки изображений на выбор. Тема «Двадцать семнадцать» даже размещена на главной странице популярного видео. Но если вы хотите, чтобы ваш сайт выделялся, вы должны иметь возможность создать свой собственный заголовок WordPress. В то время как есть много отличных обучающих программ WordPress, некоторые сосредотачиваются только на заголовке. Чтобы помочь вам, мы составили список способов настройки заголовков WordPress.
1. Пользовательское изображение заголовка WordPress
Многие стандартные темы WordPress позволяют загружать ваши собственные изображения заголовков WordPress. Однако они должны быть определенного размера или размера, чтобы они могли хорошо работать. Новые темы позволяют изменять размер, вращать и обрезать заголовок и изображение логотипа, но могут быть ограничения.
Это то, что мы рекомендуем. Используя наш собственный сайт в качестве примера, предположим, что вы хотите использовать этот фоновый рисунок для заголовка. Вы можете скачать практически любое изображение на сайте, щелкнув по нему правой кнопкой мыши. Вы получите сообщение с просьбой «Сохранить изображение как». Как только вы загрузили изображение заголовка на свой сайт, вы можете получить его размеры. Таким образом, вы можете изменить размер своего предпочтительного изображения в соответствии со спецификациями настраиваемого изображения заголовка WordPress.
Что произойдет, если пользовательское изображение заголовка WordPress не загружается?
Некоторые изображения и логотипы скрыты в коде веб-сайта и не предлагают возможность сохранения с использованием вышеуказанного метода. Наше изображение заголовка фактически попадает в эту категорию! Однако есть способ их получить. Используя то же изображение с нашего сайта и Safari, снова щелкните правой кнопкой мыши на изображение. Вы получите опцию «Осмотреть». Как только вы нажмете на нее, ваш браузер откроет панель и выделит выбранный элемент для проверки. В основном вы можете видеть, как изображение было добавлено. Что вы действительно хотите, это найти URL или гиперссылку, которая заканчивается в формате изображения. Наиболее распространенными являются .jpg и .png, но есть и другие. Просто скопируйте эту ссылку и вставьте ее в новом окне. Теперь вы сможете сохранить изображение, как описано выше.
Все еще не уверены, какой размер лучше всего подходит для пользовательского изображения заголовка WordPress? Если вы оптимизируете свое изображение для отображения на настольном компьютере или ноутбуке, вы должны использовать изображение шириной 1920 пикселей. Если ваш сайт должен просматриваться только на мобильном устройстве, вы должны использовать изображение шириной 480 пикселей. Правильный выбор этих размеров обеспечит быструю загрузку изображений заголовков для ваших посетителей.
Настраиваемое изображение заголовка WordPress для каждой страницы
Что делать, если вы хотите различное изображение заголовка или цвет логотипа для каждой страницы вашего сайта WordPress? Вы можете использовать бесплатный плагин для WordPress, например WP Header Images. Это позволяет вам добавлять свои собственные изображения заголовков WordPress на каждую веб-страницу. Вы также можете добавить собственные изображения заголовков для сообщений в блоге, пользовательских сообщений и даже продуктов WooCommerce.
Просто установите плагин и перейдите на Настройки> WP заголовочные изображения, Затем он извлечет параметры навигации по меню. Просто выберите изображение, которое вы хотели бы видеть на каждой странице. Вы также можете посмотреть видеоурок от создателя на YouTube.
Обновление контента
Бесплатный контрольный список безопасности WordPress
(4 страницы) 21-ступенчатый контрольный список для
Защищайте сайт WordPress на 99,9%
скачать
2. Использование пользовательского заголовка плагина WordPress
Чтобы получить еще больший контроль над заголовком WordPress, рассмотрите возможность использования плагина WordPress премиум-класса, такого как Popping Sidebars & Widgets. Это дает вам возможность создавать виджеты или небольшой блок, содержащий определенный раздел. Они могут включать текст, форму, параметры социальных сетей и многое другое. Однако этот плагин позволяет добавлять эти виджеты в заголовок.
Вы можете передать свой оригинальный заголовок или даже разместить на нем свои виджеты. Плагин также работает для мобильных устройств. Виджеты можно увидеть по вашему выбору: страница, шаблон, сообщение, категория, тег, WooCommerce, BuddyPress и даже языки WPML. Этот плагин также позволяет размещать виджеты на боковой панели или в нижнем колонтитуле.
3. Как редактировать заголовок в темах WordPress, используя код
Все заголовки WordPress в темах имеют настройки по умолчанию, сделанные с помощью кода, который идет с ними. Тем не менее, они могут быть отредактированы, если вы не боитесь копировать и вставлять немного во время кодирования. Чтобы найти файл, содержащий ваш заголовок, перейдите на панель инструментов WordPress. Затем перейдите к Внешний вид> Редактор, Теперь вы увидите файлы, которые составляют ваш сайт. Заголовок содержится в файле с именем, подчеркнутым на скриншоте ниже. Этот файл в основном содержит функции заголовка WordPress, которые мы здесь не увидим.
Помеченный файл – это тот, который вам нужен. Вы можете искать слово «заголовок» в файле, чтобы увидеть, какие настройки в настоящее время. ВАЖНОЕ ПРИМЕЧАНИЕ: КОПИРУЙТЕ И ВСТАВЛЯЙТЕ ОРИГИНАЛЬНЫЙ ФАЙЛ В ПРОГРАММУ В КАЧЕСТВЕ NOTEPAD ПЕРЕД ПРОЦЕДУРОЙ, ЕСЛИ ВЫ ВЫБИРАЕТЕ РЕДАКТИРОВАТЬ НАЙДЕННЫЕ ФАЙЛЫ ВНЕШНИЙ ВИД> РЕДАКТОР,
Но мы действительно хотим отредактировать заголовок в вашей теме WordPress. Одна из лучших вещей в WordPress – все больше и больше тем имеют своего рода живой настройщик. Они позволяют редактировать ваш сайт в левой панели, просматривая изменения перед сохранением. Многие из них предлагают пользовательские опции CSS. Вы можете скопировать и вставить множество изменений, используя что-то вроде:
, header {
фон: белый;}
Это изменит цвет фона заголовка на белый. Также можно использовать шестнадцатеричный цвет.
Дополнительные команды для настройки заголовка WordPress
Вы также можете добавить множество других команд, заменив «background: white;» или добавив строку под ним. Они включают, но не ограничиваются:
- шрифт: курсив; – Измените стиль шрифта на курсив.
- непрозрачность фона: .5; Измените непрозрачность фона. 0 для полностью прозрачного фона. 1 для того, кто совсем не прозрачен.
- размер шрифта: 20 пикселей; Измените размер шрифта в заголовке до 20 пикселей. Вы можете изменить 20 на любой номер по вашему выбору.
- отступы: 20 пикселей; – Измените заливку или пространство вокруг заголовка до 20 пикселей. Как и выше, вы можете изменить 20 на то, что вы хотите. Вы также можете указать, с какой стороны должен идти отступ, просто добавив «-left» к «padding». Это также работает вверх, вниз и вправо.
- край: 20 пикселей – Это создает рамку вокруг заголовка шириной 20 пикселей. Как и в предыдущем примере, вы также можете добавить тире и сбоку, чтобы создать рамку только сверху, снизу, слева или справа.
- цвет рамки: белый; – Это изменит цвет вашей границы на белый. Вы также можете использовать шестнадцатеричный цвет.
- высота строки: 20 пикселей; – Это устанавливает пространство, чтобы соответствовать размеру вашего шрифта. Это может быть полезно, если вы используете более крупный шрифт, и он перекрывается при переносе строк.
Если ваш новый код не работает, попробуйте добавить «! Важно» в конец команды, как в «padding-left: 0! Important;». Если это все еще не работает, ваш заголовок может не называться «заголовок». Некоторые темы WordPress используют другие названия для своих заголовков. К ним относятся заголовок, онлайн-заголовок и другие.
4. Измените заголовок WordPress, используя лучшие практики
Теперь, когда вы знаете, как настроить заголовки WordPress, вам понадобится отличный макет для этого. Мягкие фото не всегда. Отличный совет – использовать иллюстрацию. Они отлично подходят для привлечения внимания и привлечения вашего посетителя. Следующий сайт является отличным примером этого. Они даже удалили все остальные элементы из заголовка WordPress и переместили меню на боковую панель. Это также здорово, потому что они включают соответствующий фон, чтобы сайт выглядел как отличная иллюстрация.
При выборе изображений и логотипов используйте те, которые относятся к вам или вашему бизнесу. Да, цветы красивые, но если вы не флорист, они могут быть хитрыми. Если возможно, используйте изображение / логотип вашей собственной работы, которая может быть отличной для фотографов и иллюстраторов. Даже строители, промышленные компании и другие корпорации могут использовать изображение одного из своих продуктов.
Вы даже можете использовать изображение и включить свои собственные элементы, как на сайте ниже. Они ловко нанесли свое имя на ярлык над открывающимися шторами. Это было бы отличной идеей для театра, актера или любого другого музыканта.
5. БОНУС: Примеры пользовательских заголовков WordPress
Проверьте варианты этого блоггера для 14 художественных макетов заголовка WordPress. Здесь есть несколько удивительных примеров. Хотя некоторые из них могут быть не идеальными для тех, кто только начинает работать с WordPress, они отлично подходят для того, чтобы показать дизайнеру, что им бы хотелось.
Этот заголовок является отличным примером того, как художник использует свою собственную работу, дополненную баннером с четким CTA.
Несмотря на то, что этот пользовательский заголовок WordPress более старомоден, сочетание традиционных цветов и современных элементов пространства выделяет его.
Обратите внимание, как кажется, что робот говорит в меню в этом заголовке,
Завершение
Хотя нет двух одинаковых заголовков WordPress, все они должны иметь одинаковое назначение. Они должны показать посетителям, о чем их сайт. Заголовки должны иметь четкую точку. Они должны быть смешаны с остальной частью сайта. Заголовки не должны быть заполнены слишком большим количеством подсказок, всплывающих окон и т. Д.
Если вам нужна помощь в настройке вашего заголовка или вы хотите получить максимальную отдачу от своего сайта WordPress, свяжитесь с нами, чтобы узнать, как мы можем вам помочь. Вы также можете подписаться на нашу рассылку, чтобы получать наши удивительные советы.
SaveSave
SaveSaveSaveSave
SaveSave
SaveSave
