Необходимо сделать картинку ссылкой? Или нужна кнопка ссылки? Даю 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.

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

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

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

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

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

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

Читайте ещё интересное на блоге
Понравилась статья? Поделитесь с друзьями!

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

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

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

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

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

Comments are closed.

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

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

Хостинг