Для того чтобы добавить кнопку на страницах или записях в WordPress, есть несколько способов, и все зависит от того, каким редактором вы пользуетесь — классическим или Гутенбергом. Давайте рассмотрим все варианты и узнаем, как легко сделать и настроить кнопку для вашего сайта.
О какой кнопке идет речь?
Речь идет о CSS кнопках, которые привлекают внимание своим стильным дизайном. Когда такая кнопка используется в статьях, она помогает подчеркнуть важные действия, например, «Скачать», «Посмотреть», и привлекает больше внимания читателей к нужным элементам на странице.
Сделать кнопку в WordPress с классическим редактором
В этом случае нет никаких универсальных методов. Все происходит по старинке без автоматизма, а именно:
- В редакторе WordPress добавьте ссылку на страницу или сайт, которую хотите сделать кнопкой.
- Этой ссылке добавьте нужный класс.
- Перейдите в файл style.css вашей темы и пропишите стили для созданного класса.
- После этого ссылка превратится в стильную кнопку.
И когда нам снова понадобится добавить кнопку в статью, просто присвоим ссылке нужный класс. Для размещения нескольких кнопок в ряд — нажмите «Пробел», а не перенос строки «Enter».
Вот пример такой конструкции.
<a class="button_post_1" href="#">Кнопка-1</a> <a class="button_post_2" href="#">Кнопка-2</a>
a.button_post_1,
a.button_post_2 {
text-decoration: none;
background: #b92cc4;
padding: 13px 27px;
border-radius: 6px;
color: #fff;
margin-right: 5px;
display: inline-block;
font-size: 16px;
transition: .3s;
}
a.button_post_2 {
background: #2cafc4;
}
a.button_post_1:hover,
a.button_post_2:hover {
opacity: 0.8;
}
Добавить кнопку в WordPress с редактором Gutenberg
В блок-редакторе Gutenberg есть специальный блок «Кнопки», который позволяет создавать кнопки без необходимости вставлять HTML и CSS коды. Просто добавьте этот блок на страницу или статью и настройте его параметры, такие как текст, ссылку и стиль кнопки.
Это как раз тот способ, для которого не нужны ни плагины, ни написание кода. Следуйте ниже описанным шагам, и вы сможете с легкостью сделать свою кнопку.
Шаг 1:
Откройте нужную статью или страницу в редакторе WordPress. Найдите место, где хотите разместить кнопку. Нажмите на плюс (+) и выберите «Посмотреть всё».
Шаг 2:
В появившейся панели блоков прокрутите вниз до раздела «Дизайн» и нажмите на блок «Кнопки.
Шаг 3:
После нажатия на блок «Кнопки», она появится в вашем редакторе. В верхней панели вы можете выравнивать кнопку по центру или по левому и правому краю. Также, вы можете добавить ссылку, которая будет открываться в новом окне.
В боковой панели справа у вас также есть возможность добавить ссылку и полностью настроить внешний вид кнопки. Вы можете задать цвет фона, цвет текста, округление углов и многое другое.
Теперь ваша кнопка готова. Просто сохраните изменения и посмотрите, как она выглядит на вашем сайте.
Добавить кнопку в WordPress с плагином MaxButtons
С помощью этого плагина вы можете создавать кнопки различных форм и размеров, применять к ним анимацию и настройки. Независимо от темы вашего сайта, вы сможете легко интегрировать эти кнопки в любые статьи, страницы или виджеты.
Только помните, что речь идет о самых простых CSS кнопках. Это очень легкая задача, которую вы можете выполнить самостоятельно, используя всего лишь CSS стилизацию.
Благодаря этому, ваш сайт останется легким и быстрым.