아바다(Avada) 테마 이미지 캐러셀 링크가 작동하지 않는 문제

인기 워드프레스 테마인 아바다(Avada)는 많은 테마 옵션과 기능을 제공하고 있습니다. 초보자부터 전문가까지 모두 사용 가능한 아바다 테마에는 엘리멘터 빌더와 비슷한 이미지 캐러셀 엘리먼트를 제공합니다.

• 아바다 테마의 이미지 캐러셀
• 엘리멘터의 이미지 캐러셀

Avada 테마의 아바다 빌더에 이미지 캐러셀 위젯을 추가할 경우 개별 이미지마다 URL 링크를 설정할 수 있습니다. 하지만 네이버 카페에 아바다 이미지 캐러셀에서 링크가 작동하지 않는 문제로 어떤 분이 질문을 올려주셨습니다. 이런 문제가 발생할 경우 체크해야 할 사항에 대하여 살펴보겠습니다.

아바다(Avada) 테마 이미지 캐러셀 링크가 작동하지 않는 문제

아바다 테마의 Avada Builder에서 Image Carousel 요소를 선택하여 이미지 캐러셀을 추가할 수 있습니다.

Add / Edit Items에서 이미지 캐러셀에 표시할 이미지들을 추가하고 편집할 수 있습니다.

Image Link에서 이미지를 클릭할 때 연결될 URL을 설정할 수 있습니다.

Link Target에서 링크를 현재 창/탭(Same Window/Tab) 또는 새 창/탭(New Window/Tab)에서 열지를 선택할 수 있습니다. Image Alt Text에서는 이미지 대체 텍스트를 입력할 수 있습니다.

Image Carousel 설정 화면에서 Image lightbox를 활성화하면 이미지에 링크가 되어 있지 않는 경우 이미지를 클릭하면 라이트박스로 표시됩니다. 이미지에 링크가 설정되어 있다면 클릭 시 라이트박스로 표시되지 않고 곧바로 해당 링크로 연결됩니다.

아바다 이미지 캐러셀에서는 개별 이미지에 다른 링크를 지정할 수 있습니다. 보통 링크를 설정하면 이미지 링크가 잘 작동합니다.

하지만 최근 아바다 테마의 이미지 캐러셀에서 이미지에 설정된 링크가 작동하지 않는 문제에 대하여 문의를 받은 적이 있습니다.

이미지 캐러셀이 작동하지 않을 경우 플러그인 충돌을 의심해 볼 수 있습니다.

1. 먼저 아바다 관련 플러그인을 제외한 모든 플러그인을 비활성화하여 문제가 해결되는지 체크합니다.
2. 모든 플러그인을 비활성화한 후에 문제가 발생하지 않으면 플러그인을 하나씩 활성화하면서 충돌을 일으키는 플러그인을 찾습니다.
3. 위의 조치로 해결이 안 되면, 백업을 확실히 한 후에 워드프레스, 테마, 플러그인을 모두 최신 버전으로 업데이트하여 문제가 해결되는지 체크해 보시기 바랍니다.

상기 조치에도 문제가 해결이 되지 않으면 아바다 테마에 고객 지원을 요청할 수 있습니다.

그리 바람직하지 않지만 자바스크립트를 사용하여 강제로 이미지 URL을 지정하는 것도 고려할 수 있습니다. 자바스크립트로 제어한다면 해당 페이지에만 자스 코드가 로드되도록 코드를 추가하는 것이 좋습니다.

예를 들어, 다음과 같은 자바스크립트 코드를 사용할 수 있습니다. 상황에 따라 적절히 변경하여 응용할 수 있습니다.

document.addEventListener('DOMContentLoaded', function() {
    var learnMoreButtonsCarousel1 = document.querySelectorAll('.fusion-image-carousel .awb-imageframe-caption-text');
    var learnMoreButtonsCarousel2 = document.querySelectorAll('.fusion-image-carousel-2 .awb-imageframe-caption-text');
    var urlsCarousel1 = [
'url-1-1',
'url-1-2'
    ];
    var urlsCarousel2 = [
'url-2-1',
'url-2-2',
'url-2-3',
'url-2-4'
    ];

    learnMoreButtonsCarousel1.forEach(function(button, index) {
        if (urlsCarousel1[index]) {
            button.parentNode.setAttribute('onclick', "window.location.href='" + urlsCarousel1[index] + "'");
            button.parentNode.style.cursor = 'pointer';
        }
    });

    learnMoreButtonsCarousel2.forEach(function(button, index) {
        if (urlsCarousel2[index]) {
            button.parentNode.setAttribute('onclick', "window.location.href='" + urlsCarousel2[index] + "'");
            button.parentNode.style.cursor = 'pointer';
        }
    });
});

참고

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/3283

Divi 테마용 지속가능 에너지 레이아웃 팩(Sustainable Energy Layout Pack) 무료 다운로드

https://avada.tistory.com/2335

워드프레스 GeneratePress 테마 라이선스 (+요금제)