워드프레스 테마 만들기 6편. 사이드바 위젯 추가, sidebar.php 템플릿 추가.

본 글은 "워드프레스 테마 만들기" 시리즈 글 6편이며, 5편에 연결된 내용. 5편을 보고 이 글을 봐야함.   워드프레스 테마 만들기 5편. header.php다듬기, 메뉴추가, functions.php, page.php 추가. 보기 -> http://igotit.tistory.com/129

 

 

	개요.
	본 글에서는, 아래 2가지 사항을 상세히 정리한다.   1. 제작중인 테마의  functions.php 에 코드추가하여 "사이드바와 위젯"를 사용가능하게 한다. 이 처리작업으로 워드프레스에서의 메뉴 외모 하위에 "위젯"이 추가된다.(위젯과 사이드바는 같이 관리된다. 즉, functions.php 에서는 sidebar 를 등록하는 함수로 사이드바를 사용가능하게 설정하게 되며 위젯사용하는것을 별도로 처리하지 않아도 워드프레스 관리자에서는 위젯과 사이드 바 모두를 사용가능한 상태가 달성된다.)   2. 제작중인 테마에 sidebar.php 를 추가하고,  위 1에서의 사이드바를 웹에 보이게 처리한다.

 

 

 

	1. 테마의 위젯, 사이드바 활성화하기.
	현재 우리의 테마의 외모부분에 보면 메뉴는 추가 되어 있는데(테마 만들기 5편에서 추가했었다.), 위젯 메뉴가 없는 상태다(위젯이 없으니 사이드바에도 접근이 안된다.). 우리가 아직 사이드바를 활성화 시키지 않았기 때문에 당연히 없는것임.   이제, 우리의 테마에 사이드바를 추가하는 코드 처리를 하자. 위젯과 사이드바는 개별적으로 활성화시키는 처리를 하지 않고, 테마의 functions.php 에서 sidebar 를 등록하는 코드를 추가하면 워프 관리자 메뉴에 "위젯"이 보이게 되고, 사이드바도 같이 보이게 된다.   사이드바를 활성하는 함수.   사이드바를 1개 단위로 등록하는 함수와 여러개의 사이드바를 동시에 등록하는 방법이 있다. register_sidebar() :  사이드바 1개단위로 등록함수.  codex 설명 -> http://codex.wordpress.org/Function_Reference/register_sidebar register_sidebars() :  사이드바 여러 개를 등록함수. codex 설명 -> http://codex.wordpress.org/Function_Reference/register_sidebars   1개 단위로 등록하는 함수 register_sidebar() 를 여러 번 호출하면 여러 개의 사이드바를 등록가능하므로, 본 글에서는 1개 단위 등록하는 예를 보인다.   register_sidebar() 함수 사용법 codex 설명 -> codex 설명 -> http://codex.wordpress.org/Function_Reference/register_sidebar 함수원형 : <?php register_sidebar( $args ); ?> 함수인자 : $args 함수인자 args 에 값을 설정해야할 것들이 8개 요소가 있으나, 우리가 값을 모두 설정하지 않아도 기본값이 설정되게 되어있다. 디테일 한 부분이야 언제든지 값들을 변경하면서 적용시 어떻게 달라지는지 점검하기로 하고, 가장 간단하게 register_sidebar() 함수를 구현하면, 사이드바의 이름(본 예에서는 Main Sidebar 라고 했다. 이것은 워프관리자 사이트에서 보이는 사이드바 이름이며 임의로 정하면된다.) 만 기록해도 된다.   register_sidebar(array('name' =>__('Main Sidebar')));     functions.php 에 register_sidebar() 함수 코드 추가 하기.  이전의 테마만들기 5편에서 만들어진 funcions.php 코드 상태에서 메뉴추가했던 코드 아래에 사이드바 추가하는 코드구현된것이다. 파란색 글자들. <?php /*Menu Enable*/ function register_my_menu() {   register_nav_menu('header-menu',__( 'Header Menu' )); } add_action( 'init', 'register_my_menu' ); /*Sidebar Enable*/ function register_my_sidebar() {   register_sidebar(       array(('name') => __('Main Sidebar')            )       ); } add_action( 'init', 'register_my_sidebar' ); ?>   위와 같이 functions.php에 코드를 추가하고 나서, 워프 관리자 화면을 새로고침 하면 (아래그림) 1. 좌측메뉴에 위젯이 들어와있는것을 볼 수 있다. 2. 오른쪽에 우리가 functions.php 에서 만들었던 이름인 Main Sidebar 가 추가되었고 3. 파란색 박스처럼 위젯들을 사용가능한 상태가 되었다.   위젯 중에서 3개의 위젯 ("최근글", "카테고리", "검색" )을 Main Sidebar 에 배치해본다. (아래그림)   이제 아래 글에서는 우리가 만든 사이드바를 웹페이지에서 보이게 하는 구현작업 진행한다.
	끝.-테마의 functions.php 에 sidebar 등록함수 추가하여 관리자 메뉴에 위젯이 보이게 하고 사이드바에 위젯추가 제거가 가능한 상태 달성.

 

 

	2. 테마에 sidebar.php 추가하고, 웹페이지에 사이드바 표현하기.
	우리의 테마에서 사이드바를 보이게 하려면,사이드를 웹페이지에 표현하는 템플릿이 있어야 하며, 워드프레스에서는 sidebar .php 로 사이드바를 표현하도록 지정되어있다. 따라서, 우리가 할일은 sidebar.php 파일을 새로 만들고, 사이드바를 표현하는 코드를 추가하면된다.   사이드 바 표현 함수 -워드프레스에서 사이드바를 표현하는 함수는 dynamic_sidebar()이다. dynamic_sidebar()  codex의 함수 설명 ->  http://codex.wordpress.org/Function_Reference/dynamic_sidebar     sidebar.php만들기. sidebar.php 파일을 만들고, 코드내용을 아래처럼 한다. 사이드바의 인자로는 앞의 1에서 등록했던 사이드바의 이름으로 했다.   <br>------ 사이드바 시작------------<br> <?php dynamic_sidebar('Main Sidebar'); ?> ------ 사이드바 끝--------------<br>     위와 같이 작성된 sidebar.php를 테마폴더에 업로드하면,  웹페이지에서 사이드바를 표현할 준비는 된것이다. 사이드바를 표현할 다른 템플릿 파일에서 sidebar.php 를 인클루드 해야 표현된다.   우리는 index.php 의 푸터영역윗부분에서 sidebar,php 를 인클루드 시키도록 아래 처럼 index,php 를 수정한다.    index.php 파일에서 sidebar.php 인클루드 하기. - 아래 푸른색 부분이 sidebar.php 를 인클루트 하는 부분이다.  <?php get_header(); ?> <p>테마만들기 시험중. 테마명 : igotit Skeleton</p> <p>이미지 추가시험</p> <img src = "https://googledrive.com/host/0B-X3LExoaBouaWJtT3RyVjhOZDg/Tree_igotit.jpg" width=400> <hr> <?php if (have_posts()) :    while (have_posts()) :       the_post();          the_ID();?> :          <a href=<?php the_permalink();?>><?php the_title();?> </a>          <br> <?php    endwhile; endif; ?> <?php get_sidebar(); ?> <?php get_footer(); ?>     웹페이지에서 사이드바 보기. 이제 사이드바를 표현할 준비는 다되었다. 우리가 index.php 에서만 sidebar 를 포함시켰기 때문에 첫페이지에서만 사이드바가 보인다. 웹페이지에서 사이드바가 보이는 모습은 아래그림의 붉은박스 영역이다.   우리가 사이드바에 포함시켰던 위젯들 3개가 모두 잘 보인다. 여기서 다시 한 번 강조할 점은 우리가 사이드바의 표현을 위해 코딩한 것은 <?php dynamic_sidebar('Main Sidebar'); ?>  이 함수가  전부였다는 점이다. 이것만으로 내부에 배치한 위젯들이 모두 표현되고 있다는점. 편리하다.
	끝. - 테마에 사이드바표현하는 sidebar.php 추가하였고, 이를 웹페이지에서도 보이게 하는것 까지 구현완료함.

 

위  테마를 시험 운영 중인 워드프레스 사이트 보기 -> http://igotit.kr/theme-skeleton/

 

 

정리 - 현재까지 만들어진 Skeleton 테마의 파일들.   본 테마만들기 6편까지 추가된 템플릿(php) 파일들은 아래그림과 같다.     1. 파란색박스의 index.php 와 style.css  :  테마만들기 시작 1편에서 만들어졌음 -> http://igotit.tistory.com/85 2. header.php, footer.php : 테마만들기 2편에서 추가되었음. -> http://igotit.tistory.com/122 3. single.php : 테마 만들기 4편에서 추가되었음. -> http://igotit.tistory.com/126 4. functions.php, page.php : 테마 만들기 5편에서 추가되었음. -> http://igotit.tistory.com/129 5. sidebar.php : 본 글 6편에서 추가되었음.

 

 

본 글은 "워드프레스 테마만들기" 시리즈 글 6편이며, 이후 연결된 7편 보기.   워드프레스 테마만들기 7편. archive.php, 404.php, search.php 추가하기. 보기 -> http://igotit.tistory.com/141

 

 

본 글이 포함된 통합 정리 글   WordPress 활용정보 정리 : http://igotit.tistory.com/23

 

 

///135.