20'C 흐림
서울 강남구
설정된 지역의 날씨를 실시간?으로 자동으로 긁어서 보여줍니다.
이미지는 샘플이고 1개만 보여집니다.
* 반드시 서버단에서 CURL을 지원해야 합니다.
페이지 로딩시 자동으로 긁어오게 됩니다. ip가지고 지역DB에서 사용자지역 긁어오게 해봤으나
너무 느려져서 정해진 지역 로딩을 합니다.
1. post.weather.php - 사용테마/widget/post.weather.php 넣어주시고
2. skycons.js - 최상단 루트 js 폴더에 넣어주세요
3. widget/style.css 맨아랫부분에 스타일을 추가합니다.
/* widget-weather */
.widget-weather-head { padding: 12px 15px 8px !important; margin: 0px; font-weight: bold; border-bottom: 1px dotted #aaa; background: #fff;}
.widget-weather-body { padding: 0px 15px 0px; margin: 0px; background: #fff; }
.widget-weather-list { padding: 0px 0px 12px; margin: 0px; line-height: 22px; list-style: none; }
.widget-weather-post-list { padding: 0px 0px 12px; margin: 0px; line-height: 22px; list-style: none; }
.widget-weather-post-list li { margin:0; padding:0px; }
.widget-weather-post-list li a { margin:0; padding:0px; display:block; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; }
.widget-weather-list li a:hover { font-weight:bold; color:crimson; }
.widget-weather-post-list li a .icon { color:#ddd; margin-right:4px; }
.widget-weather-list li a .cnt { font-size:10px; font-family:verdana; letter-spacing:-1px; font-weight:bold; color: rgb(233, 27, 35); margin-left:12px; margin-right:4px; }
.widget-weather-list li a .new { color: rgb(233, 27, 35); }
.widget-sp20 { margin: 0; padding: 0; height: 20px; clear: both; }
4 .넣고 싶은곳에 위젯을 소환합니다.
<div class="widget-weather-head" style="border:0;">
<span class="Apple-tab-span" style="white-space: pre;"> </span>날씨 위젯
</div>
<div class="widget-weather-body">
<?php thema_widget('', 'post.weather.php');?><span class="Apple-tab-span" style="white-space: pre;"> </span>
</div>
<div class="widget-sp20"></div>
post.weather.php 파일 열어보시면 지역 설정법 주석처리되어있습니다.