Как добавить виджет погоды к себе на сайт?

И швец, и жнец, и дождя провидец

РубрикаСложность материалаЛЁГКАЯВремя на чтение5 минут

Ingredients

Directions

Как добавить виджет погоды к себе на сайт?

Создайте гостевую книгу, установите чат и используйте хостинг народ.ру. Именно так начиналась бы книга «Вредные советы» Григория Остера, если бы он писал про то, как добавить интерактивности на сайт. Сейчас огромное количество сервисов публикует свои API для разработчиков, которые можно использовать на своих ресурсах в качестве источника информации. Один из таких элементов — виджет погоды. И это идеальный пример для интеграции в новостной региональный сайт или местный административный ресурс. Мы написали небольшой туториал как быстро и без проблем встроить такой на свой сайт.

Виджет на сайт

Чтобы встроить виджеты погоды для сайта необходимо минимум знаний по структуре сайта. Ребята из Meteolabs запили несколько бесплатных виджетов с максимально точной погодой по всем крупным городам и регионам России. На сайте можно выбрать несколько видов дизайна, которые, в свою очередь, можно тоже кастомизировать.  Некоторые информеры (например, G) позволяют отображать погоду в реальном времени сразу в нескольких городах

Можно выбрать не только язык внутри виджета, но и цвет, шрифт, ширину и даже сглаживание углов

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

Если у вас WordPress, то самое очевидное место для установки — это правый или левый сайдбар. Здесь даже не потребуется лезть в код. Откройте раздел «Внешний вид» -> «Виджеты» и вставьте плашку «HTML-код» в название вашего сайдбара и вставляем туда код с сайта

Сохраняем код и наблюдаем результат. Для привлечения внимания можно закрепить этот элемент как фиксированный («липкий сайдбар»)

Отцентировать виджет в сайдбаре можно с помощью конструкции <div align=center>, либо прописать параметр justify-content: center в код виджета. Как вариант, можно использовать один из классов, которые уже есть у вас на сайте и добавить соответствующее выравнивание в стиль CSS через «Внешний вид» -> «Редактор тем» (для редактирования необходимо выставить права на необходимый файл 777).

Не получается установить. Что делать?

Meteolabs предоставляет бесплатный саппорт всем, кто захочет использовать их виджеты погоды на своих сайтах. Можно написать им на электронную почту: [email protected], либо постучаться в скайп alexbaluc (только текстовые сообщения). Так же вы можете попросить помощи у нас в комментариях. Будет здорово, если к описанию проблемы вы приложите скриншот.