lightanddesign.ru
You might also like
Это руководство объясняет, как преобразовать изображение в ссылку.
Создавать кликабельные изображения не так сложно, как вам кажется. Существует несколько способов сделать это. Описаны два возможных варианта.
Изображение, с которым мы будем работать
В этом учебнике в качестве примеров будут использоваться следующие изображения.
Сначала объясняется ручной метод. Это работает с любым HTML-кодом. Я рекомендую именно этот метод.
Второй вариант описывает простую модификацию создания изображения ссылки в HTML, которую стоит использовать в WordPress.
Первый вариант предполагает ручное добавление HTML-кода для кликабельного изображения. Это звучит немного пугающе, но на самом деле это просто и быстро.
Вариант 1, Шаг 1: Возьмите необходимые URL-адреса
Чтобы выполнить этот шаг, кликабельное изображение должно быть уже загружено на сайт.
Чтобы сгенерировать требуемый HTML-код, необходимо собрать две части информации. Рекомендуется сначала открыть новый текстовый файл, в который можно ввести эти URL-адреса
1. URL целевой страницы
2. адрес страницы/места/веб-сайта, на который пользователь перенаправляется после нажатия на изображение. Для этого перейдите на нужную страницу и скопируйте URL-адрес из адресной строки браузера.
В моем случае URL целевой страницы выглядит следующим образом
После того как вы скопировали URL целевой страницы, вставьте его в открытый текстовый документ, чтобы он не потерялся при копировании следующего URL.
2) URL-адреса изображений.
Это URL-адрес для поиска изображений в Интернете. Прежде чем размещать ссылки на изображения со своего компьютера, необходимо понять, что все изображения, доступные во Всемирной паутине, где-то размещены. Они должны быть доступны для просмотра.
Самый простой способ узнать URL-адрес изображения — посетить веб-страницу, на которой оно отображается. Например, если вы уже загрузили изображение на веб-сайт, перейдите на страницу, где отображается изображение.
- Для пользователей Windows щелкните правой кнопкой мыши на изображении. После этого появится так называемое контекстное меню. Выберите "Копировать URL-адрес изображения" и
- Для пользователей Mac нажмите Control-click на изображении. Затем появится небольшое меню, в котором нужно выбрать пункт Копировать URL-адрес изображения.
URL-адрес изображения будет сохранен в буфере обмена и может быть вставлен.
Работая на компьютере Mac, прокрутите страницу вниз, наведите курсор мыши на изображение и нажмите клавишу Ctrl. Обратите внимание, что в меню выбран пункт Копировать адрес изображения.
При выборе этого пункта меню URL-адрес изображения копируется в буфер обмена. Затем вставьте его в текстовый документ, который можно открыть заранее.
Для пользователей WordPress существует другой способ найти URL-адрес изображения. В панели администратора WordPress перейдите в раздел Медиа > Медиатека. Воспользуйтесь строкой поиска или прокрутите окно вниз, чтобы найти изображение. Нажмите. В появившемся окне выделите весь фрагмент кода и скопируйте его в поле URL.
Вариант 1, Шаг 2: Создайте код
Продолжите, чтобы узнать, как создать URL-ссылку на изображение. Для этого скопируйте и вставьте следующий фрагмент кода в текстовый документ.
Теперь в текстовом документе замените два URL, выделенные жирным шрифтом, на URL, которые вы скопировали ранее (т.е. URL целевой страницы и URL изображения).
Для этого выделите и скопируйте URL-адрес целевой страницы. Затем используйте код http://landingpageurl.com???????? (также в текстовом документе). После выделения нужно нажать кнопку Вставить и вставить URL-адрес целевой страницы.
На данный момент мой код выглядит следующим образом:.
Это было сделано (путем замены URL целевой страницы).
Теперь сделайте то же самое для URL-адреса файла изображения. Выделите и скопируйте URL файла изображения, выделите http: // fileurl и замените его на URL изображения, которое вы только что скопировали.
Теперь мой код завершен. С этого момента:.
Будьте осторожны, чтобы случайно не удалить знак кавычек.
Как сделать так, чтобы кликабельное изображение открывалось в новой вкладке
Как преобразовать изображение в ссылку и открыть ее в новой вкладке. Для этого добавьте target = "_ blank" в первую часть вашего кода. Например:.
Вот как выглядел бы мой код, если бы я хотел, чтобы ссылка открывалась в новой вкладке.
Как добавить к кликабельному изображению партнерскую ссылку
Хотите добавить вспомогательную ссылку к изображению? Нет проблем.
Вам нужно выполнить те же шаги, что и выше, но http: //landingpageurl.com нужно заменить на subsidiary.
Атрибут nofollow также должен быть добавлен к вспомогательной ссылке. Это делается для того, чтобы избежать негативных результатов. Поисковые системы не требуют, чтобы на результаты органического поиска влияли торговые ссылки.
Вот как выглядел бы мой код, если бы мне нужно было открыть ссылку на изображение в новом окне, пока оно является дочерней компанией
Теперь вы получите выдержку из HTML-кода между блоками и вставите ее туда, где вы хотите, чтобы появилась картинка.
Приведенный выше вариант создания ссылок на изображения в HTML является самым простым. Однако если вы хотите сократить HTML-код, есть и другой способ. Таким образом, используйте другую картинку.
Идея заключается в том, чтобы создать новую запись, добавить изображение, создать ссылку, взять HTML и использовать его в другом месте. Следующие инструкции предназначены для WordPress, но могут быть использованы и блоггерами.
Вариант 2, шаг 1: Сохранение изображения на компьютере
Если вы еще не сохранили фотографии на своем компьютере, сделайте это. Щелкните правой кнопкой мыши (щелкните Mac) на изображении и выберите Сохранить изображение.
Вариант 2, шаг 2: Создайте новую запись в WordPress
В панели администратора WordPress создайте новую запись (entry-ADD).
Вариант 2, шаг 3: Загрузите свое изображение
Прежде чем создавать ссылку на изображение с помощью CSS, убедитесь, что открыта вкладка "Визуально" (в правом верхнем углу таблицы записей). Нажмите кнопку Добавить носитель.
Вариант 2, шаг 4: Добавьте изображение в запись
На вкладке Загрузка файлов (слева вверху) перетащите изображение в это поле и оставьте его там, или нажмите Выбрать файл, чтобы найти изображение на компьютере.
После выбора файла вы автоматически перейдете на вкладку Мультимедийные файлы. На этой вкладке выполните следующие действия
- Убедитесь, что выбран снимок, с которым вы хотите работать.
- Заголовок будет автоматически добавлен к изображению. Переименуйте изображение перед его загрузкой, так как хорошее название способствует SEO. Если вам нужно начать заново, нажмите на ссылку "удалить навсегда" рядом с миниатюрой изображения справа, чтобы удалить изображение и
- Установите значение атрибута ALT перед использованием изображения для создания URL. Обычно я определяю его с тем же значением, что и имя изображения, только без тире
- Вы хотите настроить кликабельное изображение? Выберите нужное значение из выпадающего меню и нажмите кнопку
- Вы также можете кликнуть на изображение ЗДЕСЬ! Выберите Custom URL в выпадающем меню. Введите URL-адрес веб-страницы, на которую вы хотите сослаться, и нажмите кнопку
- Вы хотите изменить размер изображения? Эти параметры можно настроить в разделе Настройки — Медиафайл.
- Нажмите кнопку "Вставить в запись".
Теперь изображение появится в окне редактирования записи.
Вариант 2, Шаг 5. Чтобы изображение открывалось на новой вкладке
Многие люди предпочитают, чтобы ссылка на изображение открывалась в новой вкладке. Это особенно актуально для партнерских ссылок или ссылок, указывающих на другой сайт.
- В этом случае нажмите на изображение, чтобы выделить его. Она немного потускнеет.
- Затем нажмите на значок ссылки (выглядит как цепочка).
- В появившемся маленьком окне нажмите Открыть ссылку в новом окне/вкладке.
- Нажмите кнопку "Обновить".
Вариант 2, шаг 6: Скопируйте HTML-код
Как связать изображение? Перейдите к разделу "Текст".
На этой вкладке вы увидите HTML-код изображения. Скопируйте его и вставьте куда угодно (например, в виджет боковой панели).
Вариант 2, Шаг 7 (необязательный): Если это партнерская ссылка, задайте для нее атрибут nofollow
Если изображение ссылается на партнерскую ссылку, необходимо установить атрибут nofollow. Свойство nofollow указывает на то, что поисковые системы не должны нажимать на ссылку при индексировании сайта. Чтобы добавить атрибут nofollow, добавьте следующий фрагмент кода в HTML перед закрывающим тегом (>) первой ссылки.
На следующем рисунке показано, как создать изображение ссылки в HTML. Обратите внимание на подчеркнутый текст.
Теперь вы можете скопировать этот HTML-код и вставить его туда, где вы хотите, чтобы появилось изображение.
Расскажите нам в комментариях, что вы думаете об этой теме статьи. Комментировать, Like, Dislike, Subscribe, Like, Feedback, Well done!
Оставьте комментарий на актуальную тему. Мы очень ценим ваши комментарии, подписки, лайки, замечания, антипатии!
Автор Вадим Дворников — переводчик статьи "Как щелкать и фотографировать
