Как добавить изображение в виджет сайдбара WordPress

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

Добавляем изображение в виджет сайдбара WordPress вручную

Для начала вам необходимо загрузить изображение на свой сайт. Просто переходим в раздел Медиафайлы » Добавить новый административной панели сайта и загружаем файл вашего изображения. После загрузки картинки вам необходимо кликнуть на ссылку редактирования рядом с изображением.

upload-edit-image[1]

WordPress переместит вас на страницу редактирования медиафайлов, где вы увидите ссылку на файл картинки справа на экране. Этот путь необходимо скопировать и вставить в текстовый редактор типа Блокнота.

imagefileurl[1]

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

img-text-widget[1]

В текстовом поле виджета необходимо добавить изображение с помощью подобного кода:

<img src="Здесь вставьте ссылку на файл изображения" alt="Strawberries" />

Тег img используется в HTML для вывода изображений. Ему необходимы два атрибута, первый — это src, который указывает на расположение файла. Именно в это место необходимо вставить ссылку, которую вы ранее скопировали.

Второй атрибут — это alt, который используется для указания альтернативного текста для изображения. Ваш итоговый вариант тега img будет выглядеть примерно так:

<img src="http://www.example.com/wp-content/uploads/2014/09/strawberries.jpg" alt="Strawberries" />

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

Добавляем изображение в виджет сайдбара WordPress с помощью Image Widget

Более простой способ добавления изображений в ваш сайдбар WordPress — это использовать плагин. Для начала вам необходимо установить и активировать плагин Image Widget.

После активации просто переходим в раздел Внешний вид » Виджеты административной панели сайта. Там вы увидите новый виджет Image Widget, доступный в общем перечне. Просто перетяните этот виджет в тот сайдбар WordPress, где вы хотите вывести изображение.

image-widget1[1]

Полезность этого виджета заключается в том, что вам не нужно писать ни единой строчки кода на HTML. Просто используйте медиазагрузчик для загрузки вашей картинки прямо из виджета.

image-widget-options1[1]

После того, как вы загрузите изображение, image widget расширится, чтобы предварительно показать вам вашу картинку. Также он отобразит перечень настроек, которые можно изменить в виджете. Можно выбрать название, альтернативный текст, и добавить заголовок картинке. Также можете выбрать размер изображения из списка доступных опций.

image-widget-options2[1]

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

Мы надеемся, что эта статья поможет вам добавить изображение в ваш виджет сайдбара WordPress.

Если вы только начинаете разбираться с WordPress, то не забудьте посетить нашу рубрику WordPress для новичков, где мы публикуем материалы специально для новых пользователей WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

VN:F [1.9.22_1171]
Rating: 5.0/5 (14 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
  • Кирилл

    Спасибо, не знал!!! Для меня полезная информация!!!

  • Кирилл

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

  • Екатерина

    Спасибо! очень ценная для меня информация!

Scroll To Top