sidebar

Как вставить картинку в сайдбар сайта на движке wordpress?  Вcтавка картинки html очень  проста. Определяем ширину того сайдбара, куда хотим вставить картинку. Подгоняем размер картинки под ширину сайдбара и вставляем картинку. А теперь все по порядку.

Для того чтобы определить размер сайдбара, нужно зайти в админ панель сайта. Слева в перечне инструментов найти пункт «Внешний вид» -- «Редактор». В открывшемся редакторе темы в правой колонке «Шаблоны», выбираем пункт «Боковая колонка»(sidebar).  И, в коде, находим ширину нашего  сайдбара, width.

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

А может быть у Вас уже стоит программа с линейкой. Ну, например, такая как FastStone Capture, можно воспользоваться ее линейкой.

Ширину боковой колонки определили, теперь подгоним под её размер картинку. Я для этих целей использую Photoshop. Здесь картинку можно обрезать, трансформировать,  повернуть, добавить текст и т.д. Но не это главное. Photoshop позволяет сохранить  картинку  с минимальным весом.

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

Для этого открываем картинку в Photoshop. В меню «Файл» кликаем по пункту «Сохранить для Web» и в открывшемся окне подбираем формат, вес и качество. Далее, жмем на кнопки «Готово» и «Сохранить», и сохраняем в одну из папок.

Формат картинки

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

Заходим в админ панель сайта.  Выбираем «Записи» -- «Добавить новую». Во вкладке «Визуально» ставим курсор по центру и кликаем «Добавить медиафайл».  Далее, «Загрузить файл» и перетаскиваем нашу картинку из папки в окно программы. После того как картинка загрузится, заполняем поля заголовка, атрибута Alt,  выравниваем по центру и убираем ссылку. Жмем на кнопку «Вставить в запись».

У нас в новой записи, по центру, появится наше изображение. Переходим на вкладку «Текст» и копируем сгенерированный CMS html код картинки.

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

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

P.S.  Вот таки образом CMS Wordpess помогла нам сгенерировать html код для вставки картинки в боковую панель сайта

С уважением, Владимир.

рассказать друзьям и получить подарок