IT/Wordpress

다중의 다이나믹 사이드바 만들기

kang2oon 2012. 7. 3. 15:42
워드프레스의 사이드바 영역은 위젯을 사용하기 반드시 필요한 영역이 아닐까 합니다. 
필요한 적재적소에 사이드바를 위치시켜 필요한 위젯들을 배치하여 테마를 더욱 풍성하고 편리하게 관리할 수 있도록 도와줄 수 있을 것입니다. 

 그 사이드바의 생성하고 관리할 수 있는 방법에 대해 알아보겠습니다. 우선 그 첫 단계는 워드프레스 테마에 포함되어 있는 function.php 을 아래 구문을 추가하여 사이드바 영역을 추가할 수 있습니다.
<?php
if ( function_exists('register_sidebar') ){
    register_sidebar();
}
?>
위와 같은 형식으로 필요한 수량 만큼의 사이드바를 생성할 수 있는데 사이드바 생성에 필요한 요소들에 대해 조금 더 자세히 알아보겠습니다.
<?php
if ( function_exists('register_sidebar') ){
    register_sidebar(array(
        'name' => '', //사이드바 영역에 표기될 이름
        'id' => '', // 사이드바 아이디
        'description' => '', // 사이드바의 설명 문구
        'before_widget' => '', // 사이드바 위젯 출력 전 태그나 스타일 정의
        'after_widget' => '', // 사이드바 위젯 출력 후 태그나 스타일 정의
        'before_title' => '', // 위젯 타이틀 스타일 정의
        'after_title' => '', // 위젯 타이틀 스타일 정의
    ));
}
?>
위의 소스처럼 배열로 정의된 사이드바의 속성들에 따라 해당 테마에서 사이드바의 갯수 및 위치 속성들이 정의되어 집니다. 
실제 적용한 샘플 코드를 확인해 보겠습니다.
<?php
if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'name' => 'Sidebar',
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h3 class="widgettitle">',
		'after_title' => '</h3>',
	));
	register_sidebar(array(
		'name' => 'MainSide',
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h5 class="widgettitle2">',
		'after_title' => '</h5>',
	));
	register_sidebar(array(
		'name' => 'MainCategory1',
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h5 class="widgettitle2">',
		'after_title' => '</h5>',
	));
	register_sidebar(array(
		'name' => 'MainCategory2',
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h5 class="widgettitle2">',
		'after_title' => '</h5>',
	));
	register_sidebar(array(
		'name' => 'MainCategory3',
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h5 class="widgettitle2">',
		'after_title' => '</h5>',
	));
	register_sidebar(array(
		'name' => 'MainCategory4',
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h5 class="widgettitle2">',
		'after_title' => '</h5>',
	));
	register_sidebar(array(
		'name' => 'Footer',
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h5 class="widgettitle2">',
		'after_title' => '</h5>',
	));	
}
?>
위의 구문처럼 추가할 경우 아래와 같이 사이드바가 생성/배치되어지게 됩니다. 


필요한 만큼의 사이드바를 생성하고 생생된 사이드바에 위젯들을 배치하였다면, 실제 페이지에 구현을 해야겠죠? 
그 구현 방법은 아주 간단합니다. 사이드바를 출력하고자 하는 테마 페이지에 아래의 구분만 추가하면 됩니다.
<?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar( 'MainCategory1' ) ) ?>
dynamic_sidebar('sidebar_name') 에 출력을 희망하는 사이드바 이름을 추가하여 원하는 곳에 삽입하면 해당 사이드바에 속한 위젯이 출력할 수 있습니다.



반응형