Wordpress 에서 widget 을 shortcode 처럼 사용하는 방법

개요

WordPress 에는 widget 과 shortcode 가 있습니다.

widget 은 웹 페이지의 특정 영역을 지정해서 그 영역에 특정한 정보를 추가하거나 뺄 수 있는 식이고,
shortcode 는 post 혹은 page 의 글 본문에서 입력하는 형태입니다.

shortcode 는 사용자들이 보다 쉽고 간단하게 컨텐츠를 꾸밀 수 있게 해주는 기능인데
그런데 사실 표시하는 영역만 틀릴 뿐 둘은 비슷하며 필요할 경우 widget 을 shortcode 처럼 사용할 수 있습니다.

저는 아래와 같은 경우 이 방법을 사용합니다.

테마를 개발할 때 위젯 영역은 없지만 (아예 관리자 페이지에 위젯 메뉴가 없음) 위젯을 사용하고 싶을때
개발해야 할 기능이 들어가있는 위젯이 이미 존재할 경우

저같은 경우 2번이 많았습니다.

the_widget

위의 wordpress API 문서를 보면, the_content 나 do_shortcode 와 같은 역활을 하는 the_widget 이라는 펑션이 있습니다.

어떻게 사용하는지 알아보겠습니다.

1. 가장 간단한 사용법

API 문서의 예제를 그대로 사용하는 방법입니다.

참고로 밑의 예제는 wordpress 의 기본 위젯인 최신글 위젯을 사용했을 경우입니다.

$widget = "WP_Widget_Recent_Posts";
$instance = array(
'title' 	=> '',//기본값 입력
'number'	=> '' //기본값 입력
);
the_widget( $widget, $instance);

$widget = "WP_Widget_Recent_Posts";

$instance = array(

'title' => '',//기본값 입력

'number' => '' //기본값 입력

);

the_widget( $widget, $instance);

위젯을 사용해봤다면 감이 오실겁니다. 최신글 위젯에 들어갈 항목을 집어넣으면 끝입니다.
the 로 시작하는 펑션이기 때문에 echo 가 되서 나옵니다.

참고로 위젯은 하나의 위젯 영역에 계속 추가할 수 있기때문에 각 위젯을 감싸는 태그 및 클래스명은
같은걸 사용하고 있습니다.
이 위젯을 감싸는 태그를 맞춰서 쓸 필요가 있다면 아래 예제처럼 사용해야 합니다.

$widget = "WP_Widget_Recent_Posts";
$instance = array(
'title' 	=> '',//기본값 입력
'number'	=> '' //기본값 입력
);
$args = array(
'before_widget' 	=> '<div>',//기본값 <div class="widget {widget's classname}">
'after_widget' 	=> '</div>',//기본값 </div>
'before_title' 	=> '<h3>',//기본값 <h2 class="widgettitle"> 
'after_widget' 	=> '<h3>',//기본값 </h2>

$widget = "WP_Widget_Recent_Posts";

$instance = array(

'title' => '',//기본값 입력

'number' => '' //기본값 입력

);

$args = array(

'before_widget' => '<div>',//기본값 <div class="widget {widget's classname}">

'after_widget' => '</div>',//기본값 </div>

'before_title' => '<h3>',//기본값 <h2 class="widgettitle">

'after_widget' => '<h3>',//기본값 </h2>

$args 에 위젯을 감싸는 태그 및 위젯 타이틀을 감쌀 태그를 지정해서 넣으면 됩니다. 그런데 이렇게 사용해서 끝낼수 있다면 좋지만 감싸고 있는 태그가 필요 없는 경우가 있는데, 그럴경우 직접 widget 파일 안의 감싸고 있는 태그 처리를 삭제하거나 클래서 명만 다르게 해서 똑같은 처리를 하는 커스텀 위젯을 만들면 되겠습니다. 저는 주로 원본 위젯은 거의 사용하는 일이 없지만, 만약 필요하다면 원본은 그대로 두고 위젯 내용만 복사해서 커스텀해서 사용합니다. (워드프레스 버전업이 되면 수정한 파일이 덮어쓰기가 되기때문에)

2. Short Code 로 사용하기

사용하는 사람이 프로그래머라면 1의 방법으로도 충분하지만, 그렇지않은 사용자가 보다 쉽게 사용할 수 있게 숏 코드로 만들어 놓는게 여러모로 유리합니다.

아래의 예제를 보겠습니다.

add_shortcode( 'CUSTOM_SHORTCODE', 'Get_Recent_Post_Widget' );
function Get_Recent_Post_Widget($atts){
    $instance = ( shortcode_atts(
        array(
            'title'     => '최신글',
            'number'    => '10'
        ), $atts )
    );
    $widget = "WP_Widget_Recent_Posts";
    $instance = array(
    'title'     => '',//기본값 입력
    'number'    => '' //기본값 입력
    );

    ob_start();
    the_widget( $widget, $instance);
    $return_data = ob_get_clean();    
    return $return_data;
}

add_shortcode( 'CUSTOM_SHORTCODE', 'Get_Recent_Post_Widget' );

function Get_Recent_Post_Widget($atts){

$instance = ( shortcode_atts(

array(

'title' => '최신글',

'number' => '10'

), $atts )

);

$widget = "WP_Widget_Recent_Posts";

$instance = array(

'title' => '',//기본값 입력

'number' => '' //기본값 입력

);

ob_start();

the_widget( $widget, $instance);

$return_data = ob_get_clean();

return $return_data;

}

숏 코드를 등록을 하고, 그 숏코드를 실행하는 펑션에 1의 예제를 넣은겁니다.

참고로 위 예제의 shortcode_atts 안의 값들은 만약 숏코드의 항목에 값이 입력되지 않았을 경우 기본값으로 사용한다는 뜻입니다.

위의 예제를 실제 글에서 사용하려면 글 본문에 아래와 같은 숏코드를 넣으면 됩니다.

[CUSTOM_SHORTCODE title="" number="5"]

1	[CUSTOM_SHORTCODE title="" number="5"]

워드프레스의 장점중 하나인데, 어떤 기능을 만들어야 할 때 이미 그런 플러그인이 있는지를 먼저 검색을 해볼 필요가 있습니다.

아무래도 전 세계적으로 사용하는 사람이 가장 많은 CMS 인 만큼, 검색을 해보면 내가 만들려고 하는 기능과 완전히 같지는 않더라도 대체로 비슷한 기능의 플러그인을 누군가가 이미 만들어 놨을 가능성이 높습니다.

widget 과 shortcode 는 주로 사용자 화면에 무언가 정보를 표시하려고 할때 프로그래머가 아니라도 보다 쉽게 사용할 수 있도록 만들어 놓은것입니다. 다만 목적이 약간 틀려서 사용법이 틀리고 표시하려는 영역이 나눠져 있을뿐 따지고보면 거의 같습니다.

위의 방법대로 서로 호환해서 사용한다면 사용자 측면에서 봤을때도 그렇고

워드프레스 개발이 약간은 더 쉬워질 것입니다.

WordPress API :the_widget

WordPress 에서 widget 을 shortcode 처럼 사용하는 방법

개요

the_widget

1. 가장 간단한 사용법

2. Short Code 로 사용하기

댓글 남기기