Как для сайта сделать кнопку заказать


Как для сайта сделать кнопку заказать

Как для сайта сделать кнопку заказать

Как для сайта сделать кнопку заказать



Один из самых распространенных элементов на любом сайте (в том числе WordPress) – это, конечно же, кнопки. Любая кнопка (кнопка меню, кнопка странички в социальной сети, кнопка для скачивания файла, кнопка призыва к действию: «купить», «позвонить», «подписаться») – это довольно сложный объект. Кнопки в WordPress имеют немало специфических атрибутов и свойств: размер, выравнивание (положение на странице), цвет, стиль, ссылка, наличие тени и надписи, наличие иконки, реакция на наведение курсора.

Все эти атрибуты на сайте воплощены при помощи языка разметки гипертекста HTML и каскадных таблиц стилей CSS. Подавляющее большинство новоиспеченных владельцев сайтов не слишком разбираются в дебрях HTML и CSS. Недостаток знаний или времени на их приобретение можно эффективно компенсировать при помощи WordPress плагинов.

В данной статье я расскажу о том, как быстро и без заморочек сделать свой сайт лучше. Ведь наличие таких элементов как кнопки (которые подходят по стилю к Вашему проекту) положительно влияют на конверсию проекта. У каждого может быть своя собственная целевая конверсия:

  • увеличить отклик и число последователей в социальных сетях и поднять трафик на сайт (кнопки на Ваши представительства в социальных сетях);
  • увеличить количество подписчиков и потенциальных клиентов (кнопка «Подписаться на новости сайта»);
  • поднять продажи (кнопка «Корзина» или кнопка «Заказать»);
  • «помочь» читателю перейти по партнерской или любой другой ссылке;
  • «заставить» посетителя Вашего сайта выполнить любое другое целевое действие, которое Вам необходимо (переход на определенную страницу, загрузка файла, совершение звонка, обращение к онлайн-консультанту и прочее).

Кнопки в WordPress без использования шорткодов

Сегодня есть немало популярных плагинов кнопок для WordPress, которые позволяют быстро и эффективно создавать кнопки различного стиля и дизайна без использования непонятных фрагментов кода HTML/CSS.

Практически все плагины решают проблему добавления кнопок через шорткоды. Однако при наличии большого количества кнопок различного назначения эти «короткие аббревиатуры» трудно запомнить и настроить. Единственный выход работать эффективно с подобными плагинами – это запомнить, какому виду (стилю) кнопки отвечает каждый конкретный шорткод. Но это не вариант…

В сегодняшней статье речь пойдет о легком добавлении кнопок в WordPress без использования шорткодов. В поиске лучшего решения проблемы для своих клиентов я совсем недавно набрел на замечательный (официальный и непрожорливый) плагин кнопок WordPress под названием «Forget About Shortcode Buttons» (Забудьте о шорткодах кнопок).

Плагин FASC — это визуальный метод добавления кнопок без всяких лишних движений. Ничего запоминать не придется, после активации плагин автоматически встраивается в меню визуального редактора ВордПресс. Поэтому при создании новой страницы или записи – мы всегда можем за пару секунд в специальном диалоговом окне очень естественно и просто «смастерить» кнопку любой сложности, а с оформлением HTML и CSS плагин «разберется» сам.

Плагин кнопок для WordPress — Forget About Shortcode Buttons

На своей официальной страничке разработчики плагина FASC отмечают, что код программы максимально чистый с точки зрения стандартов HTML. При этом кнопки, которые Вы будете создавать в редакторе WordPress, используют стандартные общепринятые классы без внедрения какой-нибудь дополнительной или скрытой разметки.

Возможности настроек кнопок для WordPress в FASC

  • 6 основных типов дизайна кнопки, включая последний мировой тренд – плоский Flat-дизайн;
  • 5 предустановленных размеров кнопки;
  • подбор любого цвета для кнопки;
  • возможность добавление любой надписи для кнопки (шрифт, размер, стандартное форматирование);
  • подбор любого цвета для текста надписи кнопки;
  • присоединение к кнопке любой внешней или внутренней ссылки (можно открывать в текущем или новом окне);
  • возможность добавить любую иконку из стандартной библиотеки сервиса бесплатного набора шрифтов Font-Awesome (на данный момент там доступно 439 иконок на любой вкус);
  • кнопка ведет себя как стандартные объект в визуальном редакторе и подчиняется всем правилам форматирования текста: выравнивание, добавление жирного или курсива и прочее;
  • кнопки используют новейшие веяния в CSS для эффектной стилизации.

Выдержка с официальной страницы плагина в репозитории WordPress.org

Официальное название плагина: «ForgetAboutShortcodeButtons»;

Адрес для скачивания плагина: http://wordpress.org/plugins/forget-about-shortcode-buttons/

Официальный сайт: http://www.designsandcode.com/

Авторы плагина: лондонская студия Designsandcode;

Работает с версией WordPress: от 3.9 и выше;

Последнее обновление (на момент обзора): 28.04.2014;

Плагин был скачан (на момент обзора): 2 368 раз;

Текущий рейтинг качества: 5 из 5 звезд.

Установка и работа плагина кнопок для WordPress

Если все упомянутые мной достоинства плагина кнопок Forget About Shortcode Buttons убедили вас в его полезности – предлагаю без отлагательств заняться его простой установкой и затем проверить в деле.

Обратите внимание, что для корректной работы этому плагину требуется самая свежая версия WordPress (от 3.9 и выше). Если Вы используете старую версию «движка», придется обновить WordPress.

Устанавливается плагин стандартно — из окна поиска плагинов в административной консоли WordPress, либо при помощи загрузки плагина на Ваш веб-сервер по FTP.

Плагин Forget About Shortcode Buttons

После установки и активации плагина можно сразу же проверить его «в бою». Для этого при помощи пункта главного меню нашей панели управления «Записи» нужно создать новый пост или отредактировать уже существующий. Если все при установке плагина прошло успешно в меню визуального редактора – Вас уже ждет дополнительная кнопка (изображена на скриншоте выше) со всплывающей надписью «Insert Button» (Вставить кнопку) при наведении курсора мыши.

Чтобы вставить новую кнопку в нашем посте, нам нужно кликнуть по вышеупомянутому пункту «Insert Button». После этого действия появится диалоговое окно плагина, в котором можно за пару секунд создать кнопку любой сложности.

Давайте подробнее рассмотрим этот процесс…

Добавление и настройка кнопки в WordPress

Создание кнопки в ВордПресс с плагином FASC

Как видно из скриншота выше диалоговое окно создания кнопки имеет две вкладки: основную «Properties» (Свойства) и дополнительную «Icon» (Иконки). В разделе свойства нашей будущей кнопки можно насчитать шесть основных полей для творчества:

  1. Поле для ввода надписи на кнопке;
  2. Поле для ввода URLа – конечного пункта назначения, куда попадет наш пользователь при нажатии на кнопку. Обратите внимание здесь же можно поставить флажок — открывать ссылку в новом окне. Если оставить поле пустым ссылка откроется в текущем окне браузера;
  3. Здесь задается цвет для нашего текста на кнопке;
  4. Выпадающий список для выбора главного стиля кнопки: (всего на данный момент предусмотрено 6 стилей);
  5. Здесь задается основной цвет кнопки;
  6. Пункт для определения желаемого размера кнопки (всего имеется 5 предустановленных размеров).

Вот собственно и все нехитрые настройки для нашей кнопки. Осталась еще вторая вкладка «Icon», где мы можем по желанию встроить в кнопку иконку с бесплатного сервиса Font-Awesome (на выбор предлагается 439 иконок). В помощь скриншот ниже.

Добавление и настройка кнопки в ВордПресс - иконки

Во время всего процесса Вы можете наблюдать за Вашей будущей кнопкой в окне предварительного просмотра. Если результат Вам подходит – не забудьте нажать пункт «Insert» (Добавить) в нижнем правом углу окна настроек плагина.

Любую кнопку можно легко редактировать (еще один аргумент отказаться от шорткодов, которые в случае изменения, по сути, придется переделывать заново). Для этого необходимо просто дважды щелкнуть по кнопке — и мы вернемся в окно настроек основных атрибутов для внесения необходимых нам правок.

Теперь Ваша кнопка «живет» в визуальном редакторе записей и готова в любой момент оказаться на сайте при публикации (обновлении) данной записи. Кнопка ведет себя как стандартный объект визуального редактора и подчиняется всем его командам. Например, можно выровнять кнопку посередине или по краям, добавить отступов, изменить шрифт или размер шрифта подписи и т.д. и т.п. Экспериментируйте и будет Вам счастье!

Добавленная кнопка появилась в визуальном редакторе ВордПресс

Тем, кто хочет изучить весь процесс подробнее – я предлагаю просмотреть видео по пошаговой работе с кнопками в WordPress от разработчиков данного плагина.

Я надеюсь, эта небольшая обучающая статья помогла Вам легко добавить кнопки в WordPress без использования шорткодов. Надеюсь на Ваш бодрящий автора лайк, плюс или ретвит.

Автор текста: Сергей ГеркХард


Источник: http://gerkhard.com/luchshie-knopki-dlya-wordpress-bez-ispolzovaniya-shortkodov/


Как для сайта сделать кнопку заказать фото


Как для сайта сделать кнопку заказать

Как для сайта сделать кнопку заказать

Как для сайта сделать кнопку заказать

Как для сайта сделать кнопку заказать

Как для сайта сделать кнопку заказать

Как для сайта сделать кнопку заказать

Как для сайта сделать кнопку заказать

Читать топ новости: