Необходимо сделать картинку ссылкой? Или нужна кнопка ссылки? Даю 4 способа, как сделать это

Приветствую вас на блоге vitalykalinin.ru. Всем нам хочется как-то приукрасить свой сайт. Сегодня хочу вам показать, как легко и просто сделать красивую кнопку ссылки. Есть несколько способов реализовать это. Давайте начнём.Кнопка ссылки

Обратите внимание, как неприглядно выглядит просто голая ссылка, например эта: скачать . Хочется как-то приукрасить её. Побудить читателя сайта, нажать на неё. Чтобы она спровоцировала его сделать действие, которое мы хотим, чтобы он сделал. Для этого очень хорошо помогает, так называемая, кнопка – призыв к действию (яркая, сочная, аппетитная). Можно также использовать и любую картинку, по вашему усмотрению.

Если вам нужна кнопка ссылки или хотите сделать картинку ссылкой, предлагаю 4 способа реализации этого

ВАРИАНТ   1

Итак,  обратимся к первому варианту. Он самый тривиальный из всех. Идём в администраторскую панель и создаём новую заметку (пункт 1). Помещаем из мультимедиа библиотеки заранее загруженную картинку кнопки (пункт 2). Заходим в режим редактирования картинки (пункт 3).

Сделать картинку ссылкойЗаходим в Режим редактирования (пункт 1) в строке Url прописываем ссылку (пункт 2), которую мы хотим открывать при нажатии на эту кнопку. Обязательно ставим галочку, чтобы наша ссылка открывалось в следующем окне. Жмём Обновить (пункт 3).

Как сделать кнопку ссылкойТеперь заходим во вкладку Текст (пункт 1). Наш html код картинки выглядит так. Жёлтым обозначена наша ссылка (пункт 2), а зелёным выделено место расположения картинки (пункт 3).

Как сделать картинку ссылкойЗатем копируем получившийся код. Его можно поместить в любом месте. Например в сайдбар. Перемещаем виджет Текст в сайдбар и помещаем туда наш скопированный код.

Нужна кнопка ссылкиПолучим в виджите активную кнопку со ссылкой. Всё просто, не правда ли? Кстати, отрегулировать её по центру можно поместив код кнопки внутрь команды: <div align=’center’>код кнопки</div>.

Как сделать ссылкуВАРИАНТ   2

Можно то же самое прописать вручную, без использования администраторской панели WordPress. Нам нужен адрес, где находиться картинка. В моём случае это корневая папка на хостинге:

http://vitalykalinin.ru/скачать.png

И нужно знать ссылку, на которую вы хотите перейти при нажатии кнопки. В моём случае, это:

http://feeds.feedburner.com/vitalykalinin/PurJ

Чтобы вывести изображение в HTML используется тег <img>. Если подставить мой адрес хранения картинки, то получиться:

Для создания ссылки используется тег <a>.

В моём случае получиться

Теперь, чтобы картинка стала ссылкой, необходимо объединить эти два тега. В моём случае получиться так:

То есть, внутрь тега ссылки, поместили тег картинки. В этом случае, наша картинка будет работать как ссылка. И если кликнуть по ней, то произойдёт переход по ссылке. Если картинка лежит в той же папке, где и ссылка, то можно не указывать полный путь, указать только её название. Можете нажать на кнопку ниже, чтобы протестировать.

ВАРИАНТ   3

Устанавливаем плагин по стандартной схеме. Называется он Shortcodes Ultimate for WordPress. Это плагин – сборник самых популярных шорткодов.

Shortcodes UltimateСоздаём новую заметку и видим вкладку шорткодов этого плагина.

Вставить шорткодЗаходим в библиотеку шорткодов и выбираем вкладку Кнопки.

Кнопки шорткодаНажимаем. Появиться окно с множеством настроек кнопки. Это и стили и размер. Обтекание и радиус закругления. Цвет текста и цвет фона и так далее. Нас интересует функция ссылки.

Настраиваем кнопки шорткодаПрописываем ссылку и прописываем открытие в новой вкладке. Нажимаем обновить. Выглядит шорткод в визуальном редакторе WordPress так: Так выглядит шорткодСохраняем заметку и смотрим, что получилось:

Кнопка ссылкаОчень просто. Не правда ли?

ВАРИАНТ   4

Последний четвёртый вариант, самый замороченный. Но мне он понравился больше всего. Это, так называемая, призывная кнопка. Она выглядит очень аппетитно и побуждает посетителя, не только прочитать статью, но ещё и совершить действие. Я выискал его на просторах интернета, на одном из блогов.

Для начала необходимо в function.php нашей темы вставить следующий шорткод с несколькими переменными. Где Title – заголовок,  Subtitle – подзаголовок, а Url – наша ссылка. Но их здесь прописывать не нужно, оставляем как есть.

Чтобы придать красоту нашей кнопке, необходимо поместиь в style.css стили для неё. Я взял с оригинала. Можете сами потом поэкпериментировать с кодом. Настроить цвета и размер, чтобы подходило под ваш дизайн. Код вставляется в самый конец файла style.css.

Сохраняйте файлы. Перемещаете обратно на хостинг. Всё готово, чтобы подбивать посетителей на действия. Можете размещать эту красоту в конце поста или как я, в виджете в сайдбаре.

Для вывода кнопки используется следующий код. В моём случае так:

Мне кажется, выглядит просто замечательно. Кстати, можете испытать её в действии, нажав ниже.

На этом всё. Сегодня мы рассмотрели как сделать картинку ссылкой и кнопку ссылкой. Всё оказалось не так и сложно. Не забывайте подписываться на обновления блога. Всего наилучшего, до скорых встреч!

Хитрости Фотошопа. Как закруглить углы у картинки:

С уважением, Виталий Калинин.

Читайте ещё интересное на блоге
Нужны ли полезные привычки? Конечно. Так растёт наша личная эффективность
Нужна концентрация внимания, но одолели текущие задачи? Используйте сервис Nowdothis.com
WebMoney кошелёк - регистрация, аттестаты, обмен. Настройка WebMoney Keeper
Встали вопросы: Как сделать и оформить канал на YouTube? Предлагаю пошаговую инструкцию
Вы уже сделали канал на ютубе? Осталось добавить видео на YouTube. Разберём, как
Как провести оптимизацию видео на Ютуб, используя настройки youtube видео
Понравилась статья? Поделитесь с друзьями!

Оставьте свой первый комментарий и получите ценный подарок

Комментариев 4 на “Необходимо сделать картинку ссылкой? Или нужна кнопка ссылки? Даю 4 способа, как сделать это
  1. Полезная статья. Я обычно просто картинку с кодом вставляю, хотя в последнее время склоняюсь к шорткодам – это удобнее.

    • Вариантов исполнения много, на самом деле. Я дал то, чем сам пользуюсь.

  2. 4 вариант – самый классный! Спасибо за него, как раз мне сейчас для нового проекта нужно будет сделать пару кнопок, воспользуюсь твоим кодом, т.к. считаю его легким и привлекательным, а это главное! ;-)

    • Мне тоже нравиться последний вариант. И исполнение не такое сложное.

Comments are closed.

Источник: http://finance.tj/technology/

Внимание! На блоге проводится конкурс лучшего комментатора за месяц!

Хостинг