Как сделать картинку ссылкой вордпресс
Как добавить ссылку на изображение в WordPress
Данная заметка будет полезна больше для начинающих пользователей. Не смотря на то, что задача это весьма простая, меня пару раз спрашивали о том как правильно сделать картинку ссылку в WordPress. Теперь буду давать линк на этот пост, где постараюсь все детально рассмотреть. Кстати, разные, вопросы, касающиеся изображений в системе вордпресс, можете найти в одноименном разделе. А если вы ищете плагин эффектного увеличения картинки при клике — попробуйте Easy Fancybox.
Чтобы добавить ссылку на изображение в WordPress не нужны никакие модули или специальные функции — все это реализуется базовыми возможностями текстового редактора. Алгоритм действий следующий:
1. Заходите в редактор для написания/редактирования поста или страницы. В нем кликаете по ссылке «Добавить медиафайл» (Add Media).
2. В открывшемся окне появятся картинки из медиабиблиотеки. Выбираете закладку «Загрузить файлы», где можно будет перетащить / загрузить изображения с персонального компьютера.
Далее просто нажимаете кнопку «Вставить в запись». Статья про ошибку HTTP при загрузке фото в WordPress поможет решить проблему, если вдруг она у вас возникла.
3. Выбираете данное изображение, кликнув по нему, а затем нажимаете иконку добавления ссылки в панели текстового редактора.
4. После этого появится всплывающее окно, где указываете нужный вам линк. Можно поставить галочку «Открывать в новой вкладке», если хотите.
Кликаем «Добавить ссылку». Сохраняете запись и проверяете работу данного элемента на сайте.
Вот небольшое видео, если описание алгоритма выше вам показалось не совсем понятным. После этого, думаю, вопросов не останется. Запись без звука, но ее можно развернуть на весь экран.
Кстати, недавно заметил, что вставить картинку ссылку в WordPress можно и через сочетание клавиш Ctrl + V. Для этого копируете линк из адресной строки или любого другого места, а затем, после клика по нужному изображению, нажимаете «Ctrl + V» — ссылка будет добавлена. Такой себе экспресс метод.
Полезное:
Ссылка в подписи к картинке
Также недавно меня спрашивали по поводу плагина, который бы добавлял ссылку в подпись картинки в WordPress. В принципе, действия для этой задачи аналогичны — используйте кнопку вставки ссылки в текстовом редакторе, как в предыдущем варианте.
Подпись к изображению можете задать в момент его вставки в запись либо же после, кликнув по иконке карандаша (для редактирования).
В открывшемся окне в поле «Подпись» можно добавлять HTML код ссылки:
Вставка картинок ссылок в виджете
Если заходите добавить картинку ссылку в вордпресс сайдбар, то для этого придется использовать HTML код. В принципе, думаю, без проблем можно найти и скачать специальный виджет для этих целей (по умолчанию он в системе отсутствует), но с другой стороны, устанавливать модуль ради такой простой задачи смысла нет.
Можно использовать код посложнее:
Здесь используются дополнительные параметры:
Надеюсь, данный пост про вставку WordPress ссылки на изображение был вам полезен. Если остались еще какие-то вопросы, пишите их в комментариях.
4 Типа ссылок для картинок WordPress сайта
Вступление: Привет! Часто некоторый инструментарий WordPress, кажется ненужным и даже вредным. Это происходит до тех пор, пока не понимаешь его настоящего применения. В этой статье я расскажу, про типы ссылок для картинок WordPress сайта и приведу примеры, зачем они нужны.
Как добавить картинку в статью (на страницу)
Я не буду подробно рассказывать, как добавить картинку в статью или страницу в классическом редакторе. Это неплохо описано в статье Картинки WordPress – как добавить, оформить картинку WordPress. Здесь покажу, как добавить картинку в редакторе блоков и покажу типы ссылок для картинок WordPress сайта. Кстати возможных ссылок на картинку четыре:
Эти же типы ссылок работают в классическом редакторе.
Чтобы добавить картинку в запись (редактор блоков), нужно:
Когда фото добавлено, можно изменить ссылку на фото по умолчанию. В этом редакторе, по умолчанию, ссылки на фото НЕТ, то есть в редакторе блоков фото добавленное в статью не будет ни медиа файлом, ни страницей вложения. Читать: Использование медиа библиотеки WordPress.
Что это значит? Это значит, что когда пользователь попробует нажать на эту картинку ничего не произойдёт. Она НЕ откроется в браузере, как картинка и НЕ откроется, как отдельная страница сайта.
Чтобы добавить ссылку на фото и выбрать из оставшихся трёх возможностей (медиа файл, вложение, любая ссылка), нужно в редакторе нажать иконку «ссылка» на фото и выбрать нужный вариант ссылки.
Типы ссылок для картинок WordPress
Итак, у вас есть возможность поставить на фото три типа ссылки:
Типы ссылок для картинок WordPress: Медиафайл
Если вы выберите такой тип ссылки, то картинка из статьи будет открываться в браузере, как картинка с адресом типа:
По умолчанию пользователь может отдельно рассмотреть картинку, сохранить её в закладках, скопировать и скачать.
Типы ссылок для картинок WordPress: Страница вложения
Если вы выберите этот тип ссылки, то при нажатии пользователя на картинку система откроет ему страницу вложения (attachment) созданную для этой картинки.
На странице вложения будут все элементы сайта (шапка, виджеты, футер) и это фото вместо статьи в размерах миниатюры для просмотра. Напомню, размер миниатюры вы ставите в общих настройках на вкладке Медифайлы. Читать Настройки WordPress после установки.
Если пользователь нажмёт на картинку на странице вложения, то система покажет ему эту картинку, как медиафайл.
Зачем нужен attachment?
Сразу замечу, что страница вложения с фото вредна для SEO сайта, так как создаёт контент без содержания и засоряет выдачу вашего сайта. Поэтому чаще всего ссылку типа «страница вложения» стараются избегать.
Более того есть специальные плагины и есть функционал в SEO плагинах, которые перенаправляют страницы вложения картинок на медиафайл.
Кстати attachment работает для всех типов файлов, которые можно загрузить в медиа библиотеку.
Однако attachment может быть интересен для следующих случаев:
Типы ссылок для картинок WordPress: Произвольная ссылка
Здесь все крайне просто. Если вы хотите из фото сделать ссылку, не важно внешнюю или внутреннюю, произвольная ссылка для вас.
Кстати, в редакторе блоков уже предусмотренно добавление тега blank (Открыть в новой вкладке) для фото. Это ползунок на кнопке «карандаш» на вкладке «ссылка». Тег blank работает для любого типа ссылки на фото.
Типы ссылок для картинок WordPress в классическом редакторе
В классическом редакторе работают те же 4 Типа ссылок для картинок WordPress. Только отсутствует:
Зато присутствует настройка типа ссылки на фото для всех добавляемых фото (по умолчанию). При вставке фото вы один раз можете изменить тип ссылки и дальше система будет использовать этот тип ссылки для всех вставляемых в статьи фото. Читать: Оптимизация картинок WordPress. В редакторе блоков этого нет.
Заключение
Вместо заключения, совет что выбрать. Так как ссылки типа медиафайл подхватывается всеми плагинами для показа фото в lightbox и gallery, то тип ссылки «Медиафайл» предпочтительнее остальных. Для портфолио и фотографов лучше использовать «страницу вложения».
записки фотографа
Фотографические истории, советы по фотографии, статьи по сайтостроению
Как сделать картинки в галерее вордпресс
ссылками
Встроенную галерею сайта на вордпресс можно использовать не только для удобного просмотра фотографий, но и как навигационный элемент сайта, если сделать картинки в галерее ссылками. Я вам расскажу как это сделать при помощи плагина вордпресс Gallery Custom Links.
По умолчанию в движке вордпресс такой возможности не предусмотрено. При загрузке галереи можно выбрать два варианта настройки ссылок :
1.Медиафайл;
2.Страница вложения.
Т.е возможности указать произвольную ссылку нет.
Идея использовать галерею как навигационный элемент сайта пришла в голову когда я делал сайт для фотографа.Одно из пожеланий заказчика было сделать статичную главную страницу с миниатюрами на ней, кликая на которые можно было бы переходить в те, или иные рубрики, записи или страницы.
Предположив что простое решение уже существует, я порывшись в репозитории плагинов вордпресс быстро нашел то, что меня интересовало, а именно плагин Gallery Custom Links. Именно он добавит к изображениям в стандартной галерее возможность указывать в настройках произвольную ссылку.
Предлагаю посмотреть вначале то что должно у нас в результате получится, тогда будет больше шансов того что дочитаете статью до конца. Эту галерею из трех снимков я создал что бы показать вам наглядно результативность и эффективность работы плагина.
В этой галерее я использовал три картинки,ссылки с которых ведут на определенные страницы моего сайта, выбранные просто для примера. А у вас картинок может быть больше и расположены не в три ряда а в 4 или допустим 6, словом столько, сколько вам нужно. Кликаем по картинкам и убеждаемся сами что все работает.
Демонстрационная галерея
Итак, если хотите такой же результат или подобный, то нужно сделать следующее:
1.Для начала скачайте плагин Gallery Custom Links из репозитория вордпресс;
2. Установите и активируйте плагин стандартным способом; Никакой настройки плагин не требует, и начинает работать сразу после активации.
3.Создадем на сайте страницу с галереей, которая послужит нам навигационной сеткой. В админке сайта выбираем «добавить страницу/добавить медиафайл/создать галерею».
Отмечаем нужные снимки из нашей библиотеки файлов;
4.Убеждаемся что что в настройке галереи «параметры файла», благодаря плагину появились новые поля, которые нам предстоит заполнить;
5.Находим поле «Link URL» и прописываем в нем нужную нам ссылку, например на какую- нибудь рубрику или запись;
6. Далее нам необходимо выбрать будет ли открываться ссылка в том же окне, или в новом. Для этого в поле «Link Target» ставим галку напротив « New page” если хотим открыть ее в новом окне, или же «Same page» если будем открывать ссылку в том же окне;
7. Зачем нужно поле «Link Rel», я откровенно говоря не понял.
9.Жмем «Создать новую галерею». В настройках галереи я указал число колонок 3. Вы можете указать такое значение которое вам нужно. Потом это можно будет изменить. Все готово, нажимаем «сохранить» и смотрим нашу галерею с ссылками, убеждаемся, что все работает хорошо.
Обратите внимание. По умолчанию миниатюры в вордпресс квадратные 150 на 150. Если вас это устраивает, то оставляем все как есть.
Если вы хотите сделать главную статическую страницу с навигационной сеткой из миниатюр, то в настройках сайта укажите ее в качестве главной страницы. По мере того, как количество альбомов или рубрик на вашем сайте будет расти, можно будет добавлять в созданную нами навигационную галерею новые миниатюры. Хотя вариантов использования такой галереи может быть масса других.
Соображения по поводу названия альбома или рубрики в миниатюре. Названия я прописал в фотошопе по самой картинке. Если вам лень заморачиваться с фотошопом, то можете указать название альбома под миниатюрой, заполнив в настройках галереи поле «подпись». Правда вид такой подписи мне честно говоря не очень. Хотя это можно поправить стилями.
С помощью плагина Gallery Custom Links можно преобразовать и украсить любую тему вордпресс, и добавить нужный вам функционал.
Статьи на похожие темы
Изображение на сайте увеличивающееся при клике очень желательно. Маленькую картинку всегда хочется рассмотреть детально. Кроме…
Во многих темах вордпресс картинки имеют красивую рамку с тенью. Рамка эта очень уместна. Но…
ак сделать отображение встроенной галереи сайта на вордпресс красивым, стильным, полноэкранным и адаптивным, с помощью…
11 thoughts on “ Как сделать картинки в галерее вордпресс
ссылками ”
Да, галерея получается адаптивной, внедрял на двух своих прежних сайтах
в Элементоре тоже работает, спасибо за статью
не все так хорошо — сей плагин добавляет название сайта на все картинки даже в логотип, что обидно.
Совсем не представляю как вы его используете. У меня все работает ОК, никаких проблем. Думаю что дело не в плагине. Возможно несовместимость с Элементором, я так понял что вы его юзаете? Пришлите ссылку в личке. Есть и другой плагин на эту тему, никак до него не доберусь
Приветствую, Александр. Сайт на Опенсервере, тема OceanWP, галерея Элементорская, Галерея-ссылка (собственно то что по теме статьи «Как сделать картинки в галерее вордпресс
ссылками») взята с https://www.tyler.com/category/photo-gallery/ J6 и помещена в секцию Элементора.
Далее инсталлирую плагин, ввожу линк на нужную страницу п.1) https://d.radikal.ru/d26/1910/d0/0c94e3a2d2a3.jpg
пишу заголовок и получаю п.2) https://c.radikal.ru/c09/1910/a6/bee09d03b103.jpg т.е. с названием сайта. Ну и все картинки в галерее (на другой уже странице) получают надпись названия сайта https://a.radikal.ru/a19/1910/49/fdfb2058078c.jpg
После деактивации плагина в п.2) надпись названия сайта пропадает а во всех картинках галерей она остается, т.е. даже если сохраняю картину на винт в jpg.
Удивлению нет предела, плагин или не плагин? Попробую на другом тест-сайте сделать БЕЗ плагина Gallery Custom Links и с ним, о результате отпишусь
Любопытный случай.Попробуйте еще на другом хостинге картинок.
сделал подобное на новом сайте — галерея, галерея-меню с линком (плагин) и такой проблемы нет, видимо где-то что-то в глубинах….да и плагинов всего три 🙂
Приветствую. Не подскажете, как разом изменить все галереи с «медиафайла» на страницу вложения»? Какой запрос в бд сделать?
К сожалению не подскажу, не приходилось сталкиваться. На почту вам ссылочку отправлю, там человек как то решал похожую задачу
Как сделать картинку ссылкой в сайдбаре WordPress
Давайте рассмотрим процесс добавления изображения не просто случайной картинки, а выведем блок-приветствие с изображением и небольшим текстовым описанием, которое очень часто встречается на авторских блогах и проектах. Читателям будет приятно видеть, что вы живой человек, а не бот. 🙂
Процесс добавления состоит из нескольких шагов:
Получаем ссылку на изображение
В первую очередь нам необходимо получить ссылку на изображение. В зависимости от того, где находится ваше изображение, способ получения ссылки и дополнительных действий будет различаться. Рассмотрим все три способа:
Загрузка файла с компьютера
Заходим в меню «Медиафайлы» — «Добавить новый». Перетягиваем нужное вам изображение в рабочую область WordPress, либо же используем кнопку «Выберите файлы», которая открывает диалоговое окно для загрузки файла.
Результат будет выглядеть следующим образом:
При клике на ссылку «Изменить» откроется просмотр изображения. Нам из этого окна необходимо скопировать ссылку на изображение, по которому оно будет доступно в интернете. Берём значение из поля «Ссылка на файл»:
Копируем ссылку куда-нибудь, т.к. использовать будем позже. Это окно можно закрыть, нам из него необходима только ссылка, сама страница больше не пригодится. 🙂
Внимание! Я рекомендую сразу подготовить изображение в любом вашем графическом редакторе под размер сайдбара. Чаще всего ширина сайдбара не превышает 300 пикселей по ширине, поэтому масштабируйте ваше изображение по ширине в 300 пикселей. Иначе оно будет очень большим и может добавить дополнительное время на загрузку сайта. Сделать это можно средствами WordPress. Например, по инструкции Редактирование изображения в WordPress.
Использование ранее загруженного изображения
Если вы ранее уже загрузили нужное вам изображение и хотите использовать его, тогда заходим в меню «Медиафайлы» и находим нужное изображение. Я возьму точно такую же фотографию (т.к. загрузил её предварительно) и попробуем получить ссылку на неё для использования в сайдбаре.
Находим её в «Медиафайлах» и кликаем либо по фотографии, либо по названию, либо по ссылке «Изменить».
В результате откроется точно такое же окно, как и в предыдущем пункте, в котором нам потребуется скопировать значение из поля «Ссылка на файл». Как видите — всё очень просто! 🙂
Используем изображение с чужого сайта
Я бы хотел вас всячески отговорить от этого варианта, насколько это представляется возможным. В интернете полно примеров судебных разбирательств, когда за незаконное использование чужих изображений без согласия автора люди платили десятки тысяч рублей штрафа.
Это же касается фотобанков и фотостоков. Не все изображения с этих сайтов можно использовать в своих личных целях, каждое из них распространяется по той или иной лицензии. Предлагаю вам самостоятельно ознакомиться с существующими лицензиями на изображения, а пока берём ситуацию, в которой у вас есть доступ и право на использование изображении.
Я возьму изображение со своего проекта WordPress для чайников просто для демонстрации. Например, зайдём в статью Как вставить видео из YouTube в WordPress и выберем любое изображение. Щёлкаем по ней правой кнопкой мыши и ищем пункт «Скопировать адрес изображения» (в зависимости от браузера называться этот пункт будет по разному, я использую браузер Vivaldi и здесь пункт называется «Copy Image Address»):
Ссылка скопирована!
Отлично! Теперь в буфере обмена вашего браузера появилась ссылка на это изображение. Можем продолжить и сформировать нужный нам HTML-код для вставки выбранного или загруженного изображения в сайдбар.
Создаём HTML-код
Создаём новую запись (которую потом удалим за ненадобностью) для удобной работы с HTML. Переходим в текстовый режим редактора WordPress и вставляем следующий код (замените значение атрибута «src», вставьте в него скопированную ранее ссылку на изображение):
Теперь возвращаемся в визуальный редактор и видим нашу картинку:
Теперь один раз нажимаем на наше изображение в визуальном редакторе и добавляем к нему ссылку:
Во всплывающем окне вводим ссылку на страницу «Об авторе» или на любую другую страницу или сайт. Например, вы можете вставить ссылку на ваш лендинг с продажей товаров или же на какую-то отдельную запись. В общем, оставляю это на ваше усмотрение. Я вставлю ссылку на нужную мне страницу. 🙂
Так, львиная доля пути уже пройдена. Осталось добавить какой-нибудь обрамляющий текст и можно вставлять нашу заготовку в сайдбар. Давайте напишем какое-нибудь описание или приветствие для нашего изображения.
Добавляем текст в нашу заготовку
Для демонстрации я напишу длинный текст, у вас же может быть совсем другой подход в написании. Кроме обычного текста вы можете использовать любые доступные стили оформления: выделения полужирным, добавление ссылок, подчёркивание текста. Пусть ваша душа разгуляется! 🙂
В некоторых темах полезно будет выровнять весь текст по ширине страницы или же по центру. Попробуйте какой из вариантов подойдёт лучше для вашего случая, не копируйте слепо всё из моего примера, пожалуйста.
Добавляем текст в виджет
Теперь нам надо всю нашу заготовку преобразовать в HTML-код. Для этого просто переключаемся в режим «Текст» вашего редактора WordPress и копируем весь получившийся код:
Эту тестовую запись вы можете удалить только после того, как сформируете подходящий вам вариант виджета. Поэтому оставьте её до тех пор, пока не будете удовлетворены результатом. Возможно вам понадобится выровнять изображение или же как-то видоизменить текст, чтобы он отлично вписался в ваш виджет.
Теперь заходим в меню «Внешний вид» — «Виджеты» и находим виджет «Текст»:
Перетягиваем его в нужный вам сайдбар, а затем просто вставляем сформированный код из вашей записи в содержимое этого виджета. Нажимаем на кнопку «Сохранить»:
Перейдём на главную страницу и посмотрим, что у нас получилось:
Полная фигня, скажу я вам. Тут всё просто — наш текст оформлен именно как текст, а не параграф. Поэтому потребуется сделать ряд дополнительных манипуляций, а именно добавить к нему теги HMTL, обрамляющие параграф. Называется он
Давайте откроем снова нашу запись и первый и второй параграфы обрамим следующим образом:
Я просто добавил с двух сторон предложений тег
. Обращаю внимание на то, что если вы не закроете тег или забудете поставить «слеш» (косую черту вправо), то может поехать вёрстка вашего виджета, будьте внимательны.
Теперь снова скопируем наш HTML-код и вновь вставим его в ранее созданный виджет. Посмотрим на результат (я дополнительно добавил выравнивание элементов по центру, чтобы не тратить ваше время на разбор такого простого действия):
Заключение
Я думаю вы уже поняли, что знания HTML вам нужны будут в любом случае, хотя бы минимальные, чтобы создавать подобные виджеты. Если вам нет нужды добавлять текст, тогда просто добавляете ссылку на медиафайл и выравниваете по центру, этот вариант вас устроит в 99% случаев.
Если же вы хотите более-менее красиво оформить ваш виджет, то лучше начать с азов HTML. В интернете множество курсов, которые дадут вам хороший старт в этом направлении. Может вы со временем поймёте, что вам нравится верстать и уже будем вместе с вами делать сайты клиентам? 😉
Успехов вам! Надеюсь, статья была вам полезной!