워드프레스 상단 배너 랜덤하게 표시하는 방법 (feat. GeneratePress 테마)

워드프레스에서 배너를 랜덤하게 표시하는 다양한 방법이 있습니다. 간단하게는 플러그인을 사용할 수 있고, 플로그인 사용을 원치 않는 경우 자바스크립트와 HTML/CSS를 사용하여 배너를 랜덤하게 표시할 수 있습니다.

플러그인을 사용하여 랜덤 배너를 표시하고 싶은 경우 다음 글에서 소개하는 플러그인을 설치하여 테스트할 수 있습니다.

• 워드프레스에서 랜덤 배너 광고를 표시하는 방법

이 글에서는 GeneratePress 테마에서 자바스크립트를 사용하여 Top Bar 위젯 영역에 배너를 랜덤하게 표시하는 방법을 살펴보겠습니다. 다른 테마에서도 비슷하게 응용이 가능합니다.

워드프레스 상단 배너 랜덤하게 표시하는 방법 (feat. GeneratePress 테마)

GeneratePress 테마의 경우 모양 » 위젯의 Top Bar (상단 표시줄) 위젯 영역에 사용자 정의 HTML 블록을 추가하여 상단 배너를 표시할 수 있습니다.

Top Bar 영역에 배너를 표시하는 자세한 방법은 다음 글을 참고해보세요.

• GeneratePress 테마: Top Bar 위젯을 사용하여 상단 배너 표시하기

GP 테마의 Top Bar 위젯 영역에 사용자 정의 HTML 블록을 추가하여 여러 개의 배너가 랜덤하게 표시되도록 하는 것이 목적입니다.

방문자가 페이지를 로드할 때마다 배너가 랜덤하게 바뀌도록 하려고 합니다. (블랙 프라이데이 행사를 하는 테마와 웹호스팅에 대한 배너를 교대로 표시하도록 구현했다가 지금은 하나만 표시하고 있습니다. 블프 할인 행사가 조만간 대부분 종료할 것 같습니다.😄)

HTML 코드

모양 » 위젯의 Top Bar 영역에 사용자 정의 HTML 블록을 추가하고 다음과 같은 HTML 코드를 입력합니다.

<div id="banner1" class="notice-inner grid-container" style="display: none;">
    Banner 1<a href="https://example.com/banner1" aria-label="Learn more about Banner 1">
        Learn More
    </a>
</div>
<div id="banner2" class="notice-inner grid-container" style="display: none;">
    Banner 2<a href="https://example.com/banner2" aria-label="Learn more about Banner 2">
        Learn More
    </a>
</div>

문구와 URL 등은 원하는 대로 변경해주세요.

CSS 코드

Top Bar 영역에 표시되는 배너의 스타일은 GeneratePress 테마의 테마 옵션과 커스텀 CSS로 조정해야 합니다.

워드프레스 관리자 페이지 » 모양 » 사용자 정의 » Layout » Top Bar에서 레이아웃을 설정할 수 있습니다.

배경색과 텍스트 색상 등은 모양 » 사용자 정의 » Colors의 Top Bar 섹션에서 설정할 수 있습니다.

사용자 정의 CSS는 모양 » 사용자 정의 » 추가 CSS에 추가합니다. 저는 다음과 같은 코드를 사용했습니다. 실제로 사용하는 경우 색상과 글자 크기 등은 적절히 변경하시기 바랍니다.

/* Top Bar - Dark and Modern HighTech Style in GeneratePress */
.top-bar {
    background: #0a0a0a;  /* Almost black dark background */
    color: #1abc9c;  /* Vibrant teal text */
    font-family: 'Consolas', monospace;  /* Tech-friendly, monospace font */
    font-size: 1.0rem !important;
    font-weight: 600 !important;
    padding: 10px 20px;
    border-bottom: 4px solid #1abc9c;  /* Vibrant teal bottom border */
}

.top-bar a {
    display: inline-block;
    padding: 8px 20px;
    margin: 0 10px;
    border-radius: 0;  /* Sharp edges to maintain a techy look */
    background: #1abc9c;  /* Vibrant teal background */
    color: #0a0a0a;  /* Dark text */
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1px; /* Slight letter spacing for that high-tech aesthetic */
    transition: 
        background 0.3s, 
        color 0.3s, 
        box-shadow 0.3s;
}

.top-bar a:hover {
    background: #16a085;  /* A slightly darker teal on hover */
    color: #ecf0f1 !important;  /* Light grey text on hover */
    box-shadow: 0 0 10px 2px rgba(26, 188, 156, 0.7);  /* Slight shadow with a teal hue */
}

/* Media Queries */
@media (max-width: 768px) {
    .top-bar {
        display: none;  /* Hide top bar on mobile devices */
    }
}

JS 코드

다음과 같은 자바스크립트 코드를 사용하면 방문자가 방문할 때마다, 페이지를 로드할 때마다 상단 배너가 랜덤하게 바뀝니다.

<script>
document.addEventListener('DOMContentLoaded', function () {
    const banners = ['banner1', 'banner2'];
    const randomBanner = banners[Math.floor(Math.random() * banners.length)];

    // Hide all banners
    banners.forEach(bannerId => {
        document.getElementById(bannerId).style.display = 'none';
    });

    // Show the selected banner
    document.getElementById(randomBanner).style.display = 'block';
});
</script>

자바스크립트 코드는 모양 » Elements에서 훅(Hook)으로 wp_footer 영역에 추가하거나 WPCode와 같은 플러그인을 사용하여 푸터 영역에 추가할 수 있습니다.

상기 JS 코드는 방문자가 방문할 때마다 랜덤하게 배너를 표시하는 단순한 기능을 합니다. localStorage를 통해 배너를 사용자별로 유지하도록 코드를 개선할 수도 있습니다.

사이트에 영향을 최소화하고 싶은 경우에는 차일드 테마의 함수 파일에 다음과 같은 코드(예시)를 추가하여 enquque하는 방법을 이용하시기 바랍니다.

function enqueue_random_banner_alternative() {
    if (wp_is_mobile()) {
        return; // 모바일 기기에서는 로드하지 않음
    }

    wp_enqueue_script(
        'random-banner-alt',
        get_stylesheet_directory_uri() . '/js/random-banner-alt.js',
        array(),
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_random_banner_alternative');

차일드 테마를 만들어서 작업하지 않으면 추후 테마가 업데이트될 경우 수정하거나 추가한 코드가 사라지므로 반드시 차일드 테마(자식 테마)를 만들어서 차일드 테마의 함수 파일에 코드를 추가하세요.

random-banner-alt.js 파일을 만들어 자바스크립트를 추가(<script> 태그와 </script> 태그는 삭제)하고, 차일드 테마 폴더의 js 하위 폴더로 업로드하시기 바랍니다.

상단 배너가 모바일에서는 로드되지 않도록 코드가 추가되었습니다. 또한, 예시에서는 2개의 배너 중에서 랜덤하게 표시되도록 했습니다. 원하는 경우 3개 이상의 배너가 랜덤하게 표시되도록 코드를 적절히 변경할 수 있습니다.

마치며

이상으로 간단한 HTML과 자바스크립트로 워드프레스에 랜덤한 배너를 구현하는 방법에 대하여 살펴보았습니다. GeneratePress 테마를 예시로 설명했지만, 원리를 이해하면 다른 테마에도 자유롭게 응용이 가능합니다.

GeneratePress 테마는 빠른 속도 때문에 많은 블로그, 특히 수익형 블로그에 사용되고 있습니다. 이 블로그에도 현재 GP 테마가 설치되어 있습니다. 블로그를 운영하거나 속도가 중요한 사이트를 운영하는 경우 GeneratePress 테마가 괜찮은 선택입니다.

참고

• 워드프레스로 쉽게 랜딩 페이지 만들기 (feat. 엘리멘터, GeneratePress, Divi)
• 워드프레스 Avada vs. Divi 테마 비교