Вы хотите добавить кнопку в меню заголовка WordPress?
Добавление кнопки в навигационное меню заголовка позволяет создать более заметный призыв к действию. Это поможет получить больше кликов на ваши самые важные страницы и создать лучший пользовательский опыт, помогая вашим посетителям совершать действия.
В этой статье мы покажем вам, как легко добавить кнопку в меню заголовка WordPress.
Зачем добавлять кнопку в меню заголовка WordPress?
Навигационные меню WordPress обычно представляют собой обычные текстовые ссылки, которые все выглядят одинаково. С точки зрения дизайна, всем ссылкам придается одинаковая важность и вес.
Что если вы хотите добавить ссылку на форму онлайн-заказа, ссылку на страницу входа или регистрации, или ссылку «Купить сейчас»?? Эти важные призывы к действию будут выглядеть так же, как и остальные ссылки в меню заголовка.
Замена важных ссылок в навигационном меню WordPress на кнопки сделает их более заметными. Это поможет пользователям легко находить их, улучшая их вовлеченность и опыт работы на вашем сайте.
По умолчанию WordPress имеет опции для добавления кнопок в посты и страницы WordPress с помощью блока Buttons. Однако, он не имеет встроенной опции для добавления кнопок в меню навигации.
К счастью, существует простой хак для преобразования любой ссылки в навигационном меню WordPress в кнопку.
Учитывая это, давайте рассмотрим, как добавить кнопку в меню заголовка WordPress без установки плагина.
Если вы предпочитаете письменные инструкции, просто продолжайте читать.
Добавление кнопки в меню заголовка WordPress
Сначала вам нужно добавить ссылку, которую вы хотите преобразовать в кнопку, в навигационное меню WordPress.
Просто перейдите по ссылке Внешний вид » Меню страницу в вашей приборной панели WordPress и добавьте ссылку в ваше навигационное меню.
После этого нужно нажать на кнопку «Параметры экрана» в верхней части страницы. Откроется выпадающее меню с кучей опций. Вам нужно установить флажок рядом с опцией «Классы CSS».
Теперь прокрутите вниз до вашего меню и нажмите, чтобы развернуть пункт меню, который вы хотите преобразовать в кнопку.
Вы заметите новую опцию CSS-классов в настройках пункта меню. Здесь вам нужно ввести имя класса. Вы можете назвать этот CSS класс любым уникальным именем, но для данного руководства мы будем называть его menu-button.
После ввода названия нажмите на кнопку «Сохранить меню», чтобы сохранить изменения.
Теперь, когда мы добавили свой собственный CSS-класс к пункту меню, мы можем оформить его, добавив свой собственный CSS-код.
Просто перейдите к разделу Внешний вид » Настроить запустить программу настройки темы WordPress.
Теперь вы увидите живой предварительный просмотр вашего сайта справа и кучу настроек темы в левой колонке.
Теперь вам нужно нажать на вкладку Additional CSS, чтобы развернуть ее. Здесь появится поле, куда вы можете добавить свой собственный код CSS.
Здесь вы можете скопировать и вставить следующий CSS-код в качестве отправной точки.
.меню-кнопка < background-color:#eb5e28; border:1px; border-radius:3px; -webkit-box-shadow:1px 1px 0px 0px #2f2f2f; -moz-box-shadow:1px 1px 0px 0px #2f2f2f; box-shadow:1px 1px 0px 0px #2f2f2f; >.menu-button a, .menu-button a:hover, .menu-button a:active
Как только вы добавите CSS-код, настройщик темы автоматически применит его к предварительному просмотру вашего сайта, и вы сможете увидеть, как изменения вступят в силу.
Не волнуйтесь, изменения не появятся на вашем сайте, пока вы не нажмете кнопку «Опубликовать».
Не стесняйтесь играть с CSS столько, сколько захотите. Вы можете изменить цвет фона, цвет текста ссылки, добавить рамку и многое другое.
Не забудьте нажать на кнопку «Опубликовать», чтобы сохранить изменения.
Не все так просто?
Вы можете использовать этот трюк не только для добавления кнопок в меню заголовка, но и для выделения любой ссылки в навигационном меню WordPress.
Надеемся, что эта статья помогла вам узнать, как добавить кнопку в меню заголовка WordPress. Хотите увидеть, как пользователи взаимодействуют с вашими кнопками? Смотрите наше руководство о том, как отслеживать коэффициент конверсии в WordPress. Далее, ознакомьтесь с нашим списком лучших программ для живого чата для малого бизнеса.
Источник: www.wpbeginner.com