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

Мне казалось, что добавление прогноза погоды на сайт на WordPress будет простой задачей. Я думал, что просто скопирую и вставлю какой-то код на мои страницы, и он будет работать. Я забыл, что я не могу добавлять код внутрь станиц и записей. Затем я понял, что много владельцев сайтов столкнется с этой ситуацией. В частности, сайты по путешествиям, туризму, отелям, развлечениям, транспорту и много других, которые скорее всего захотят разместить прогноз погоды.

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

Добавление Simple Weather в WordPress вручную

В этом методе мы используем замечательный плагин Simple Weather jQuery. Этот плагин получает погодные данные из Yahoo! Weather Feed используя YQL API.

Скачайте плагин Simple Weather jQuery, распакуйте его и загрузите jquery.simpleWeather.js в корневую директорию вашего сайта (например, http://www.example.com/jquery.simpleweather.js)

Зайдите в консоль администратора WordPress: Внешний Вид → Редактор и выберите из списка файлов справа Шапку (Header), вставьте следующий код в файл header.php вашей темы прямо перед </head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" charset="utf-8"></script>
<script src="<?php echo esc_url( home_url( '/' ) ); ?>/jquery.simpleWeather.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {

			$.simpleWeather({
				 location: 'london, united kingdom',
				unit: 'c',
				success: function(weather) {
					html = '<h2>'+weather.city+', '+weather.region+'</h2>';
					html += '<img style="float:left;" width="125px" src="'+weather.image+'">';
					html += '<p>'+weather.temp+'&deg; '+weather.units.temp+'<br /><span>'+weather.currently+'</span></p>';
					html += '<a href="'+weather.link+'">View Forecast &raquo;</a>';

					$("#weather2").html(html);
				},
				error: function(error) {
					$("#weather2").html('<p>'+error+'</p>');
				}
			});
		});

Замените London, United Kingdom тем местом, которое вы хотите отображать. Для мест внутри США вы также можете использовать индексы, вот так: zipcode ="90210"

Теперь перейдите в Внешний Вид → Виджеты, добавьте текстовый виджет в сайдбар и внутри виджета вставьте <div id="weather2"></div>. Сохраните виджет и посмотрите на свой сайт. Вы также можете использовать код внутри записей и шаблонов.

Теперь, когда мы добавили погоду, следующая проблема, с которой мы сталкиваемся, это не очень симпатичный вид прогноза погоды. Давайте добавим немного стилей, вставив следующий код в таблицу стилей style.css вашей темы:

#weather2 {
	background: #6f9dbe;
	background: -webkit-gradient(linear, left top, left bottom, from(#adc7db), to(#6f9dbe));
	background: -moz-linear-gradient(top, #b2bcc8, #adc7db);
	width: 185px;
	padding: 5px 10px;
	overflow: hidden;
	border: 1px solid #6591b3;
}

#weather2 h2 {
	color: #000;
	text-shadow: rgba(250, 250, 250, 0.6) 2px 2px 0;
}

#weather2 p {
	font-size: 25px;
	margin: 30px 0 0;
}

#weather2 p span {
	font-size: 16px;
}

#weather2 a:link, #weather2 a:active, #weather2 a:visited {
	display: block;
	clear: both;
	text-decoration: none;
	color: #222;
	font-size: 12px;
}

#weather2 a:hover {
	color: #000;
	text-decoration: underline;
}

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

Погодные плагины WordPress

К сожалению, в августе 2012 Google втихую упразднил свой Weather API. Собственно, Google никогда не открывал его для использования разработчиками, он был найден и использован разработчиками без всякого права. Это значит, что некоторые погодные виджеты и плагины из репозиториев WordPress больше не работают.

Но есть и другие плагины и виджеты, которые используют Yahoo Weather Feed, Weather.com и Weather Underground, и работают нормально.

Weather and Weather Forecast Widget

Weather and Weather Forecast Widget — настраиваемый и удобный в использовании WordPress плагин для отображения погодных сводок и прогнозов. Он не только показывает погоду в виджетах, но также может показывать погоду внутри записей и шаблонов с использованием шорткодов. Он может получать данные из двух источников — Weather Wunderground и World Weather Online, вы можете использовать их вместе и установить настройки для одного из них, в случае если выбранный вами источник не получил данные погоды, данные из альтернативного источника могут их заменить.

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

Автор плагина в данный момент приостановил разработку, но плагин работает отлично, и автор уже задокументировал все о плагине. Одна небольшая раздражающая деталь — вам нужно будет создать учетные записи в Wunderground или в World Weather Online, чтобы получить ключи API, которые необходимы плагину для работы. Это займет не много времени, и вам не нужно будет повторять это, так что мне кажется, что это не большая проблема.

Weather Forecast WP Wunderground

WP Wunderground — еще один простой плагин для отображения прогноза погоды на вашем сайте. Он использует данные Weather Underground чтобы вывести их на ваш сайт. В отличие от предыдущего плагина, этот не требует ключей Wunderground API.

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

[forecast location="Paris, France " caption="Weather for Paris" measurement='C' todaylabel="Today" datelabel="date('m/d/Y')" highlow='%%high%%°/%%low%%°' numdays="3" iconset="Cartoon" class="css_table_class" cache="true" width="100%"]

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

Заключение

Эта статья стала короткой из-за закрытия Google Weather API. Иначе я бы также сделал обзор ICIT Weather Widget и WordPress Weather Widget. Есть также много других плагинов, которые вы можете использовать, часть из них давно не обновлялась, некоторые не очень красивы. Но я подумал, что в этом вся прелесть сайта на WordPress — испытание новых бесплатных штук и настройка их для создания замечательных сайтов.

Источник: WPLift.com

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

5 комментариев

сначала новые
по рейтингу сначала новые по хронологии

здравствуйте. я хочу добавить погоду без виджетов и плагинов просто погода ввиде текста. подскажите пожалуйста!

Ссылка прошла, уберите :)

Здравствуйте.
Недавно столкнулся с ситуацией... В поисках решения и попал сюда, но также попал сюда:
(stejka.com/rus/pogoda/) (сделано просто шикарно при клике на любой город выводится погода)
Сидел я думал, как это реализовано, чет так и не понял...

Вы не в курсе как это реализовано?
Спасибо.

Валерия

Спасибо большое за статью! Подскажите пожалуйста, для тематики туризма. При переходе с одной странице на другую, т.е. с Лондона на Нью-Йорк, прогноз погоды будет отображать актуальную информацию? На странице Лондона погоду Лондона, на странице Нью-Йорка погоду Нью-Йорка и т.д.
спасибо заранее за ответ!

Да, можно использовать виджеты для разных городов на 2-х разных страницах. Если это не настраивается в самом плагине, то это можно сделать с помощью 2-х разных типов записи.