페이지를 로드할 때마다 여러 개의 DIV 항목 중 하나를 랜덤하게 표시하고 싶은 경우가 있습니다. 예를 들어, 페이지를 방문할 때마다 여러 개의 배너 이미지 중 하나가 무작위로 표시되도록 하는 경우에 여기에 해당됩니다. 이 경우 jQuery를 사용하여 DIV 요소를 랜덤하게 표시할 수 있습니다. 워드프레스를 사용하는 경우 플러그인을 활용하여 보다 수월하게 구현할 수 있습니다.
jQuery를 사용하여 DIV를 랜덤하게 표시하기
<div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div>
간단하게는 다음과 같은 스크립트를 사용할 수 있습니다.
var random = Math.floor(Math.random() * $('.item').length);
$('.item').hide().eq(random).show();
// Source: stackoverflow
>> 데모
또는, 다음가 같은 스크립트도 가능합니다.
window.onload=function() {
var E = document.getElementsByClassName("item");
var m = E.length;
var n = parseInt(Math.random()*m);
for (var i=m-1;i>=0;i--) {
var e = E[i];
e.style.display='none';
}
E[n].style.display='';
}
>> 데모
그러면 위의 스크립트와 동일하게 무작위로 표시됩니다.
워드프레스 랜덤 콘텐츠 플러그인 - Random Content
참고로 워드프레스에서 콘텐츠를 랜덤하게 표시하려는 경우 Random Content라는 플러그인을 사용할 수 있습니다. 이 플러그인을 사용하면 콘텐츠를 추가하고 그룹화하여 그룹별로 콘텐츠를 표시할 수 있습니다.
현재 이 플러그인을 한 워드프레스 사이트에서 잘 사용하고 있습니다. 하지만 1년이 넘도록 업데이트가 되고 있지 않네요. 현재까지는 잘 작동하지만 추후에 최신 워드프레스와 호환성 문제가 발생할 가능성도 배제할 수 없을 것 같습니다. 비슷한 기능의 플러그인을 검색해보니 대부분 오래된 플러그인밖에 검색이 되지 않네요.
이 플러그인은 다시 업데이트가 활발히 이루어지고 있는 것 같습니다.
만약 위의 플러그인이 추후에 문제가 발생한다면, 약간 번거로울 수 있겠지만 위에서 다룬 jQuery를 사용해볼 수 있을 것 같습니다.
워드프레스 Brave Popup 플러그인을 사용하여 배너를 랜덤하게 표시하기
페이지를 로드할 때마다 여러 개의 배너 중에서 하나가 랜덤하게 표시하도록 하고 싶은 경우 Brave Popup 플러그인의 유료 버전을 이용할 수 있습니다. 이 플러그인의 A/B 테스트 기능을 사용하여 여러 개의 배너를 랜덤하게 표시하고, 어느 배너의 전환율이 높은지 확인할 수 있습니다.
댓글 남기기