워드프레스 Flicker Widget - 사용자 정의 HTML 위젯 이용 해서 만들기

어떤 이유에서인지 Flickr widget 플러그인을 다운받은것들이 모두 적용되지 않아서 간단하게 소스하나 만들었습니다.

 

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
  $(function(){
    $.ajax({
            url : "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={Flickr API KEY}&user_id={Flickr ID}&per_page=9&format=json&nojsoncallback=1",
            dataType: "text",
            success : function (data) {
        var obj = $.parseJSON(data);
        for(i=0;i<obj.photos.perpage;i++){
          if(obj.photos.photo[i].farm){
            $("#photo ul").append('<li><a href="https://www.flickr.com/photos/'+obj.photos.photo[i].owner+'/'+obj.photos.photo[i].id+'/in/dateposted-public/" target="_blank"><img src="https://farm'+obj.photos.photo[i].farm+'.staticflickr.com/'+obj.photos.photo[i].server+'/'+obj.photos.photo[i].id+'_'+obj.photos.photo[i].secret+'_s.jpg"></a></li>');
          }
        }       
            }
        });
  })
</script>
<style>
  #photo ul::after {content:"";display:block;clear:both;}
  #photo ul li {width:33.333%;float:left;text-align:center;}
  #photo ul li img {max-width:96%;}
</style>
<div id="photo">
  <ul>
    
  </ul>
</div>

 

워드프레스 기본 위젯은 사용자정의html 위젯에 위 코드중 {Flickr API KEY} 와 {Flickr ID}는 본인걸로 수정해서 넣어주시면 됩니다.

{Flickr API KEY}는 https://www.flickr.com/services/developer/api/ 에서 발급받으시면 되고,  {Flickr ID}는 https://www.webpagefx.com/tools/idgettr/ 에서 확인 가능합니다.

간단하게 구현한거라 위 소스를 응용해서 본인에게 맞게 수정하시면 될것 같아요^^