Главная Часть 1. Создание блога Глава 8. Техническая часть Урок 118. Как вставить картинку в виджет?

Урок 118. Как вставить картинку в виджет?

виджеты вордпресс

Всем привет!

После 1,5 недели отдыха я снова возвращаюсь к написанию статей. Правда начну с этой, маленькой. Вчера решил на одном из сайтов попробовать вывести картинку в виджете. Обошлось не без проблем. Точнее все легко и понятно, главное с первого раза понять. Статья пригодится начинающим веб мастерам.

Для начала что такое виджет? Возможно кто-то из читателей этой статьи не знакомы с данным понятием. Виджет - это небольшая программка, которая выполняет какую-либо функцию на сайте. Это как и плагин, однако виджет предназначен лишь для боковых блоков, в некоторых шаблонах и для футера с хедером. В отличии от плагина эта программка не жрет ресурсов сервера, и не увеличивает функциональности всего сайта, а лишь добавляет пару функций в определенные его места.

Чтобы лучше понять что же такое виджет, давайте перейдем в админ панель wordpress и перейдем на: "Внешний вид" -> "Виджеты". Вот, например, несколько виджетов:

виджетыДостаточно перенести одну из вкладок на какую-либо панель сайта, которая поддерживает виджеты (в моем шаблоне это левый блок), как виджет начнет работать. Допустим перенесем вкладку "поиск", и сразу же на сайте появится поиск. То же самое и с другими вкладками. Поэтому можно сказать виджет - небольшой кусок кода, который можно подключить к сайту, простым переносом на панель.

Однако в данной статье речь пойдет о виджете "Текст". Про него сложно сказать, что это какая-то программка. Нет. Это лишь поле для ввода текста, либо кода html. После ввода определенного текста, и переноса виджета на панель, можно будет увидеть этот текст на сайте. Вот именно это я и собирался сделать, правда вставить не текст, а картинку. Что удалось мне, но не с первого раза.

Если Вас попросят вставить в виджет картинку, как Вы это сделаете? Разумеется, Вы решите, что необходимо просто закачать картинку через админ панель, в разделе "Медиафайлы", затем взять ссылку на эту картинку и просто вставить в виджет. Я сделал также, но вместо картинки увидел лишь ссылку на нее. Так как же вставить картинку в виджет?

Очень просто! Добавляем новую запись или страницу, кому что удобнее. Нажимаем "Добавить медиафайл", загружаем нужную картинку и просто вставляем ее. Однако здесь надо быть повнимательнее!

В настройках обязательно надо убрать выравнивание, если, конечно, не хотите, чтобы картинка в виджете была выравнена, а также выбираете нужный размер.

размер картинки

После того, как мы вставили картинку, переходим на вкладку "Текст" и просто копируем полученный HTML код. Примерно такой:

Если Вам надо будет изменить размер картинки, то просто поменяйте в коде значения на нужные:

1. width - ширина

2. height - высота.

В моем случае картинка имеет размер 150 на 150.

Вот собственно и вся статья! На этом я прощаюсь с Вами, увидимся в следующих уроках!

Полезные статьи Вам на почту!

Нас более 700 человек!

Комментарии

Вера
0

Спасибо за информацию, которая мне помогла, не могла установить картинку в виджет, устанавливала ссылкой картинки, так прочитала на других сайтах, а оказывается нужен еще код, именно с ним и разрешилось все, спасибо еще раз!!!!

10.01.2014
Sly
0

Рад, что проблема разрешилась 🙂

10.01.2014
Вера
0

А я как рада!

10.01.2014
Юлия
0

Без лишней воды, все просто и самое главное - работает =)
Спасибо большое!

24.01.2014
Юрий
0

Ни черта не понял! Чепуха какая-то? Нельзя подробнее расказывать?

07.04.2014
Sly
0

Куда подробнее-то? И так все разжевано. Что именно непонятно?

08.04.2014
Яна
1

Классно! Спасибо! Мне очень помогло)

20.04.2014
Sly
0

Это хорошо 🙂

20.04.2014
Владимир
0

Спасибо,всё понятно...

08.07.2014
Елена
0

Большущее спасибо вам! Иногда так просто сделать какие-то действия. Но когда ты не знаешь, как, можно потратить кучу времени. Поэтому данная информация для меня очень ценная.

26.07.2014
Виктор
0

Действительно, оригинально и быстро без проблем. Спасибо.

14.08.2014
Saida
0

Большое спасибо! Очень помогло!

07.09.2014
Павел
0

Вот бы еще знать как добавить картинку в виджет к примеру подписка на новости? было бы здорово, ну и за эту инфу Вам тоже спасибо!

08.09.2014
Sly
0

Сейчас существует не мало подобных блоков, с подпиской на новости, с подпиской на какую-либо рассылку, и тд. Вам достаточно найти подобный блок в поисковике, к нему будет сразу идти сама картинки и код. Код вставляете в виджет, картинку в необходимую папку. И радуетесь результатом 🙂

21.09.2014
Татьяна
0

Спасибо, статья очень помогла.

16.10.2014
WpUser
0

Решил проблему благодаря Вашей статье. Добра Вам

23.10.2014
Дмитрий
0

Что означает в коде "wp-image-1669"?

14.12.2014
Дмитрий
0

Разобрался

15.12.2014
Анна
0

Интересный способ получить правильную ссылку! Спасибо за подсказку, не пришлось ничего выдумывать!

15.12.2014
scruwi
0

как пользоваться html-тегами как раз понятно, а вот как вставить файл из библиотеки, со всеми заполненными полями? может макрос какой есть или нужно дергать переменные через php?

23.12.2014
Sly
0

Только через html. PHP можно и не дергать. Это если я Вас правильно понял, и под "заполненными полями" Вы подразумеваете теги alt, title и тд.

01.01.2015
scruwi
0

не знаю, правильно ли мы поняли друг друга. есть библиотека медиафайлов, при загрузке картинки можно прописать название, описание, alt и т.д. вся эта инфа хранится в БД.

вот при вставке картинки обратиться к сохраненным в БД полям?

01.01.2015
Sly
0

Не выйдет. Слишком много кода надо. Сначала надо будет подключиться к БД, затем достать ее целиком, после чего разделить на части, затем вытащить необходимую инфу, и затем только ее вставить в поле. Это реально, но займет так много сил и времени, и скорей всего, еще кучу ошибок выдаст, что легче заполнить вручную названия и теги всех картинок.

13.01.2015
Елена
0

А можно ли рядом с картинкой поставить текст, только чтобы он не внизу был, а слева или справа. спасибо!

16.02.2015
scruwi
0

можно. для этого нужно картинке включить обтекание или через CSS, или прямо в стиле:

Текст

но если под текстом что-то еще есть, оно тоже может "подпрыгнуть". чтобы этого избежать, нужно после текста добавить пустой объект со стилем:

16.02.2015
scruwi
0

парсер съел все теги. пробую еще раз:

<img ... style="float: left"> Текст

<div style="clear: both"></div>

16.02.2015
Елена
0

что то не получается :История России знала немало войн. Самая страшная, кровопролитная, самая определяющая для судеб мира - война 1941 - 1945 годов. Победа в Великой Отечественной войне явила всему миру не только мощь нашего оружия, но и мощь русского духа. Эта победа - определяющая веха в истории нашей страны и края.

16.02.2015
Елена
0

не могу код вставить

16.02.2015
Sly
0

Разделяйте код пробелами, пишите так: < (пробел) a href . Тогда все добавится. scruwi, Спасибо за помощь!

16.02.2015
Светлана
0

Спасибо огромное! Именно благодаря вам вставила фото в виджет - все очень понятно объяснили.

19.02.2015
Юрий
0

Спасибо, тоже не мог понять как в виджетах ставить картинки

11.03.2015
У
0

Спасибо, помог.

30.03.2015
Мила
0

Спасибо! Супер!

21.04.2015
Сергей
0

Вопрос. Как включить в виджете работу плагина увеличения картинок? Например раритетного, но все же удобного "Auto Highslide"? Может не у всех такая проблема, но у меня если поставить картинку в виджет, и задать картинке ссылку на медиафайл, то картинка открывается не в лайтбоксе, а на отдельной странице (ну или на этой же, если не задан этот параметр). Я подозреваю что надо дорабатывать файл functions, но вот как?

29.04.2015
татьяна
0

Класс!! Большое спасибо.

05.07.2015
Саша
-1

спасибо за статью. А как-то можно добавить картинку маленьную в заголовок виджета?

13.07.2015
Sly
0

Можно, конечно, но это уже делается с помощью html + css верстки. Просто надо найти код, отвечающий за вывод виджета, и добавить в него картинку. Скорей всего, она встанет криво, поэтому потом придется с помощью css подправлять вид.

16.07.2015

Все просто и понятно! Спасибо, помог!

12.03.2016
Роман
0

так э
то просто вставляется картинка и все. А мне ведь надо, чтоьы записи с картинками отображались. В виджете записи нигде ведь не вставляются картинки!

14.05.2016
0

Покажите адрес сайта. Я попробую помочь.

17.06.2016
Игорь
0

Благодарю. Всё получилось.

11.09.2016

Спасибо большое искреннее. Очень помогло

27.01.2017

Оставить комментарий

Поделиться