Привет ! Сегодня вы узнаете как можно очень просто и очень быстро сделать супер стильную кнопку для своего сайта ! Вы сможете выбрать стиль кнопки, цвет кнопки, размер кнопки, цвет фона и цвет текста кнопки. Вы сможете вставить в кнопку любую ссылку, сможете выбрать в каком окне будет открываться ссылка, в новом или текущем. Вы сможете сделать кнопку резиновой, то есть на всю страницу, можно выбрать расположение кнопки, задать радиус углов кнопки. Можно добавить в кнопку иконку и указать цвет иконки, у вас будет большой выбор иконок для кнопки. Можно добавить тень к тексту кнопки и т.д.
Примеры кнопок, которые вы сможете сами сделать !
Делать кнопки мы будем с помощью супер популярного и супер полезного плагина — Shortcodes Ultimate. Установить данный плагин вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Кстати, данный плагин предназначен не только для создания кнопок. С помощью данного плагина вы сможете создавать более 40 различных функций для своего сайта. Мы уже разбирали данный плагин, как с ним работать и как его настроить, если вам интересно, то обязательно прочтите. Для создания кнопки вам не обязательно знать как работает плагин и как его настроить, просто читайте далее и вы всё узнаете ! Всё очень просто !
Далее, после установки и активации плагина, вам нужно решить куда вы хотите добавить кнопку. Вы можете добавить кнопку на страницу, в запись или через виджет «Шорткоды». Для примера я покажу вам как добавить кнопку в запись. Откройте для редактирования любую запись, в которую вы хотите добавить кнопку. На странице редактирования записи, в визуальном редакторе у вас появится новая кнопка — Вставить шорткод. Нажмите на данную кнопку.
Далее, в открывшемся окне, в списке функций плагина, вам нужно выбрать и нажать на вкладку — Кнопка.
Далее, у вас откроется окно для создания кнопки. Давайте разберём все настройки:
— Ссылка, укажите здесь URL адрес страницы или сайта, на которую будет попадать пользователь при нажатии на кнопку.
— Цель, здесь нужно выбрать в каком окне будет открываться ссылка, в новом или том же.
— Стиль, вы можете выбрать стиль для кнопки. У вас на выбор 9 вариантов, поэкспериментируйте с каждым стилем, чтобы выбрать подходящий для вас.
— Фон, выберите цвет фона для кнопки.
— Цвет текста, выберите цвет текста кнопки.
— Размер, выберите размер кнопки.
— Резиновая, можно сделать кнопку резиновой, то есть на всю страницу.
— По центру, можете сделать отображение кнопки по центру.
— Радиус, можете выбрать радиус углов кнопки.
— Иконка, можно выбрать для кнопки иконку. Для выбора иконки нажмите на кнопку — Выбрать иконку. Чтобы загрузить свою иконку нажмите на кнопку — Медиа менеджер.
— Цвет иконки, выберите цвет для иконки.
— Тень текста, можете добавить тень для текста кнопки и выбрать цвет тени текста.
— Описание, можно добавить для кнопки небольшое описание, которое отображается под основным текстом кнопки.
— onClick, можно добавить JavaScript код для атрибута onClick. Оставьте поле пустым если не понимаете о чём идёт речь.
— Атрибут Rel, здесь вы можете добавить значение для атрибута rel. Примеры значений: , lightbox.
— Атрибут заголовка, здесь вы можете добавить атрибут для заголовка.
— Класс, можете добавить дополнительный CSS класс для кнопки.
— Содержимое, укажите текст, который будет отображаться в кнопке.
— В конце нажмите на кнопку — Вставить шорткод, чтобы добавить шорткод кнопки на страницу редактирования.
— Вы также можете воспользоваться функцией «Предпросмотр», чтобы посмотреть кнопку в предварительном режиме.
Далее, на странице редактирования записи у вас появится шорткод кнопки. Обновите или опубликуйте запись.
На сайте, в записи, у вас будет отображаться готовая кнопка !
Всё готово ! Как видите, создать супер стильную кнопку очень просто ! Спасибо разработчикам
