[ratings]
Погода на сайті з ВордПресс.
Не завжди доцільно інсталювати на сайт з ВордПресс окремий плагін, як плагін. Це 100% оправдано тільки в разі постійної роботи з ним Редакторів сайту. В інших випадках слід скористатись іншими можливостями. Кожен окремий плагін знижує швидкість завантаження ресурсу і створює ситуації некоректної взаємодії в середовищі інших плагінів. Погода на сайті з ВордПресс може бути теж не завжди реалізована як плагін. Дещиця коду і не подрібен плагін 😉
Отже, на реальному прикладі опишу як обійтись без плагіну і показати Прогноз погоди на сайті з ВордПресс. Хороший прогноз погоды зможе допомогти відвідувачу вирішити, потрібно чи ні йому кудись їхати, який тур чи подорож обрати, примусить ще раз відвідати сайт в іншій ситуації і приверне тим приверне увагу до нових акцій та можливостей. Він також може допомогти змінити свої плани, щоб дізнатись більше про це конкретне місце. Блоки Погода на сайті з ВордПресс насправді дуже корисні, їх доцільно робити стильними і яскравими.
Додавання (встроювання) 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+'° '+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>Дізнайся більше »</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 пропонує багато більше, фактично він просто транспортує і демонструє дані, а ви можете використати ці дані у зовсім різні способи.