Погода на сайті з ВордПресс

2018-03-30
 |  Коментарів немає
| Переглядів всього: 35
Погода на сайті - Horus267
0 голосів
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
 Loading...

Погода на сайті з ВордПресс.

Не завжди доцільно інсталювати на сайт з ВордПресс окремий плагін, як плагін. Це 100% оправдано тільки в разі постійної роботи з ним Редакторів сайту. В інших випадках слід скористатись іншими можливостями. Кожен окремий плагін знижує швидкість завантаження ресурсу і створює ситуації некоректної взаємодії в середовищі інших плагінів. Погода на сайті з ВордПресс може бути теж не завжди реалізована як плагін. Дещиця коду і не подрібен плагін 😉
Погода на сайті ВордПресс - Horus267 - Поради
Отже, на реальному прикладі опишу як обійтись без плагіну і показати Прогноз погоди на сайті з ВордПресс. Хороший прогноз погоды зможе допомогти відвідувачу вирішити, потрібно чи ні йому кудись їхати, який тур чи подорож обрати, примусить ще раз відвідати сайт в іншій ситуації і приверне тим приверне увагу до нових акцій та можливостей. Він також може допомогти змінити свої плани, щоб дізнатись більше про це конкретне місце. Блоки Погода на сайті з ВордПресс насправді дуже корисні, їх доцільно робити стильними і яскравими.

Додавання (встроювання) Simple Weather в WordPress вручну

В цьому методі мною використано відомий скрипт Simple Weather jQuery. Він отримує і транслює погодні дані з Yahoo! Weather Feed використовуючи YQL API.

Завантажте плагін Simple Weather jQuery, розпакуйте його і зкопіюйте jquery.simpleWeather.js в директорію з з скриптами вашого сайту (зазвичай, //www.example.com/wp-content/themes/ваша-тема/js/jquery.simpleweather.js).

Увійдіть в консоль адміністратора WordPress: Вигляд → Редактор і виберіть з списку файлів справа Шапку (Header), вставте наступний код у файл header.php вашої теми перед:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

наступний код:

<script src="http://www.ваш.сайт/wp-content/themes/ваша_тема/js/jquery.simpleWeather.js"></script>
<script>
$(function() {
	$.simpleWeather({
		location: 'paris, france',
		unit: 'c',
		success: function(weather) {
		 html = '<h2>'+weather.city+', '+weather.region+'</h2>';
		 html += '<img style="float:left;" width="100%" src="https://vashsite.info/XXXX/XX/XX/pohoda-na-saiti-z-vordpress/'+weather.image+'">';
		 html += ''+weather.temp+'&deg; '+weather.units.temp+'<br /><span>'+weather.currently+'</span>';
		 html += ''+weather.wind.direction+'';
		 html += ''+weather.wind.speed+' '+weather.units.speed+'';
		 html += '<a href="https://www.yahoo.com/news/weather/country/state/city-615702/" target="_blank"><h4>Дізнайся більше &raquo;</h4></a>';

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

Змініть paris, france на місто, яке ви бажаєте відобразити. Для міст США ви можете застосувати індекси, на кшталт: 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 пропонує багато більше, фактично він просто транспортує і демонструє дані, а ви можете використати ці дані у зовсім різні способи.

Позначки:, , ,