Как вставить картинку в сайдбар сайта на WordPress

Как вставить картинку в сайдбарЗдравствуйте друзья. Рад приветствовать всех вас на блоге Spectr-rv.ru. Сегодня я расскажу, как вставить картинку в сайдбар своего сайта на WordPress и, при необходимости, сделать ее ссылкой. Такая картинка-ссылка может потребоваться, например, для того, чтобы направить посетителейна какой-нибудь сторонний ресурс, страницу подписки или просто важный для вас пост.

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

Подготовка картинки к вставке

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

За неимением Photoshop, изображение, предназначенное для вставки, можно доработать в графическом редакторе Paint. Как выполнить сжатие изображений с помощью стандартных средств Windows, подробно рассматривалось ранее.

Для измерения ширины сайдбара, можно воспользоваться экранной линейкой, описанной здесь, или каким-либо подобным инструментом. Определить размеры любого элемента страницы можно также с помощью используемого вами браузера.

В Mozilla Firefox, щелкните ПКМ в любом месте страницы и в меню выберите пункт «Исследовать элемент». Кликните мышкой по значку «Выбрать элемент со страницы», расположенному в левом верхнем углу открывшегося окна, чтобы он «посинел».

Как вставить картинку в сайдбарНаведите курсор на любой подходящий элемент сайдбара. Программа незамедлительно отобразит его размеры, первый из которых является шириной.

Как вставить картинку в сайдбарВ Chrome все делается абсолютно так же. Отличием является только название пункта меню для вывода окна инспектирования – здесь он называется «Просмотр кода элемента», и дизайн кнопки выбора элемента.

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

Вставка картинки в сайдбар

Загрузка картинки для вставки в сайдбар выполняется точно так же как и при вставке в статью. Для этого, зайдите в административную панель WordPress, откройте вкладку «Записи» и выберите пункт «Добавить новую».

Поставьте курсор примерно в центре окна редактирования (режим «Визуально») и нажмите кнопку «Добавить медиафайл». На странице «Вставить медиафайл», щелкните по ссылке «Загрузить файлы» и нажмите кнопку «Выберите файлы». В окне Проводника найдите подготовленную вами картинку, выделите ее и нажмите «Открыть», после чего изображение загрузится в библиотеку медиафайлов.

В области редактирования, в поле «Размер» выберите Полный. Нажмите кнопку «Вставить в запись». После этого изображение должно появиться в окне редактора.

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

А вот если вы хотите вставить картинку со ссылкой, изображение сначала следует сделать кликабельным. Для этого, выделите изображение в визуальном редакторе, щелкнув по нему мышкой, а затем нажмите на значок «Вставить/изменить ссылку».

Как вставить картинку в сайдбарВ открывшемся окне вставьте ссылку на статью или внешний ресурс, на который вы хотите направить посетителей. Поставьте галочку в строке «Открывать в новом окне/вкладке». Щелкните на кнопке «Добавить ссылку».

Чтобы получить код html изображения, перейдите на вкладку «Текст» редактора.

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

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

Как вставить картинку в сайдбарУдалите запись, созданную для вставки картинки.

Вот и все. Как видите, вставка изображения в сайдбар – очень простая операция.

На этом я заканчиваю и надеюсь, что статья будет вам полезной. Теперь вы будете знать, как вставить картинку в сайдбар сайта на WordPress, и сможете это сделать, если потребуется. Спасибо за внимание.

С уважением, Владимир (Spectr-rv.ru).

Обсуждение: 2 комментария
  1. Владимир, спасибо за информацию! Честно говоря, не знал об использовании «Исследовать элемент», я как-то всё больше Firebug-ом, да программкой определял размеры блоков. Сейчас сравнил с firebug, конечно, не всё отображается, что нужно было бы например, при вёрстке, но для подобных операций, вполне самое то, что нужно. Спасибо за материал!

  2. Владимир:

    Михаил, спасибо за комментарий. Я рад, что материал вам понравился. Заходите еще.

Подписка на обновления

Хотите получать новые статьи на почту? Введите свой e-mail адрес:

© 2017 Полезные советы, программы и сервисы интернета  Войти