오후에 작업하다보니 워드프레스 위젯; widget 을 지원하는 테마; theme 를 만드는 법을 알게되었다 – Sweet Dreams theme을 위젯이되게 수정. 사실 “알게되었다” 라고 말하기도 조금 민망한 팁이지만 -_-;;
WordPress에서는 테마를 구성하기 위해서 페이지의 각 부분에 대한 템플릿; page-template 을 사용한다. 지금 보고있는 이 테마는 윗 쪽에 제목이랑 Home, About, Archives… 같은게 나오는 header와 밑 부분의 footer 내용 부분을 다루는 index, page, single 같은 템플릿 들로 구성되어 있다. 옆 부분의 메뉴 같은게 쭉 나온 sidebar 템플릿도 있고. 그리고 부가적으로 functions.php 라는 무조건 실행되거나, 각 템플릿 페이지에서 선별적으로 호출할 수 있는 테마에서 정의하는 함수들이 있다.
이중에서 widget과 관련된 부분이 sidebar 템플릿 – 보통 sidebar.php – 인데, 이 파일을 열어보면 사이드바에서 출력되는 부분들이 잔뜩 들어있다. 지금 사용하는 Sweet Dreams 직전에 썼었던 Almost Spring 테마의 sidebar.php 파일을 열어보면 대충 다음과 같이 구성되어 있다.
<div id=”sidebar”>
<ul> <!– 페이지 목록 출력 –>
<?php wp_list_pages(‘title_li=<h2>’ . __(‘Pages’) . ‘</h2>’ ); ?>
<li><!– Archives 출력 –>
<h2><?php _e(‘Archives’); ?></h2>
<ul> <!– 월 별로 archive 링크를 생성 –>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>
</li>
… // 중간 생략
</ul>
</div> <!– end of sidebar –>
이렇게 구성되어있는데, 실제로 사이드 바의 출력에 해당하는 부분은 <div>안의 <ul>과 </ul>사이의 부분인데 이 부분이 위젯 출력으로 대체되어야할 부분 이다. 그렇지만 위젯이 사용되지 않을 수도 있으니 이런 형태로 바꾼다.(bold 부분이 변경지점)
<div id=”sidebar”>
<ul>
<?php if( !is_callable( dynamic_sidebar ) || !dynamic_sidebar() ) : ?>
// 원래 출력들이 들어간다.
<?php endif; ?>
</ul>
</div>
이렇게 구성하면 위젯이 사용되는 상태면 dynamic_sidebar() 를 불러서 위젯들의 출력을 넣어주고, 그렇지 않으면 원래 화면에 표시될 것들이 대신 나가게 된다.
이제 한 가지를 더 수정해주면 이 테마가 위젯을 사용할 수 있는 상태가 된다. functions.php에 다음과 같은 내용을 추가한다.(functions.php 파일이 없으면 해당 파일도 만들어준다)
if ( function_exists(‘register_sidebar’) )
register_sidebar( array(
‘before_widget’ => ‘<li>’, // 개별 위젯 출력 전에 들어갈 HTML 태그
‘after_widget’ => ‘</li>’, // 개별 위젯 출력 후에 들어갈 HTML 태그
‘before_title’ => ‘<h2>’, // 각각의 위젯의 제목으로 들어갈 것의 시작(화면에 표시됨)
‘after_title’ => ‘</h2>’, // 각각의 위젯 제목의 뒷부분에 들어갈 HTML 태그
));
Almost spring에선 각 개별 단위를 li 태그로 감싸고 있기 때문에 before_widget / after_widget을 각각 li로 처리해줬다. 또한 Archives 같은 제목 부분은 <h2>제목</h2>로 표시해주기 때문에 그에 해당하는 before_title / after_title을 같게 나오도록 변경한다.
이런 변경과정을 통해 Almost spring 테마를 위젯이 사용 가능한; widget-ready 테마로 바꾸게 된다.
참고: 이 포스팅은 WordPress 2.3 Beta 3를 사용하는 환경에서만 테스트 되었습니다. 정상적으로 동작하지 않을 경우 이 글에 댓글을 남겨주시기 바랍니다.
PS. 일부 경우 Is_callble이 이상 동작하는 경우가 발견. 두 번 호출해야 제대로 된 반환값 – 그러니까 dynamic_sidebar를 부를 수 있는지 여부 – 을 되돌려준다.
3-column 혹은 그 이상의 column을 갖는 테마의 경우에는 dynamic_sidebar() 가 아니라 dynamic_sidebar( 번호 )로 호출해줘야 적절한 사이드바가 그려짐.(번호는 widget 메뉴 참조)
