WordPress jQuery popup

워드프레스에서 외부 URL 페이지를 팝업 창으로 열기

지난 글에서 “워드프레스에서 Fancybox를 사용하여 외부 URL 페이지를 라이트박스로 여는” 방법을 살펴보았습니다. 하지만 Fancybox는 설치하기가 조금 복잡하고 라이트박스 형식이라 무거운 면이 있습니다. 이 글에서는 매우 간단하게 jQuery를 사용하여 외부 링크를 팝업 형태로 여는 방법을 살펴보겠습니다.
WordPress jQuery popup

다음 코드를 js 파일(예: popup.js)로 저장하고 테마 폴더 아래에 js 폴더를 만들고 복사합니다. (창 크기 등은 적절히 조정)

jQuery(document).ready(function($) {
   $('.popup').click(function() {
     var NWin = window.open($(this).prop('href'), '', 'scrollbars=1,height=400,width=400');
     if (window.focus)
     {
       NWin.focus();
     }
     return false;
    });
});
// Source: wordpress.org

다음으로 할 일은 이 js 파일을 후크(enqueue)시키는 작업을 해야 합니다. 테마 함수 파일(functions.php)에서 다음과 비슷한 코드를 추가하고 저장하도록 합니다.

function wp_enqueue_script( 'wpb_poupexternal', get_stylesheet_directory_uri() . '/js/popup.js', array('jquery'), '20150430', true );

add_action('wp_enqueue_scripts', 'cc_popup_script');

이미 다른 js 파일을 enqueue시킨 경우에는 wp_enqueue_script(…) 부분만 추가하면 됩니다.

이제 php 파일이나 html 파일에 팝업으로 띄우고자 하는 곳에 class=”popup”을 추가하도록 합니다.

<a href="http://www.abc.com" class="popup">외부 링크를 팝업창으로 열기</a>

데모

이 방법을 사용하면 별도의 플러그인을 추가하지 않고 간단한 jQuery로 팝업 창을 띄울 수 있습니다.



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.