안녕하세요. 린치핀소프트 한광희입니다.

 

최근 2년째 사용하고 있는 테마에 우커머스(Woocommerce)를 추가할 일이 있었습니다. 사용하고 있는 테마가 우커머스와 호환되고 있음을 알고 있어서 우커머스를 설치하고 Shop와 상품 상세페이지를 확인하다 한가지 아쉬운 문제를 확인했습니다. 테마에서 우커머스를 잘 호환하고 있었지만 우커머스에서만 별도로 사용할 수 있는 “사이드바”영역을 제공하고 있지 않았습니다. 기존 테마에서 사용하고 있는 사이드바는 우커머스용으로 적합하지 않아서 이 부분을 수정을 해야 했습니다.

그래서 오늘 소개 해드리는 방법을 이용하여 우커머스 영역에 추가할 “새로운 사이드바”를 생성하였으며, 우커머스의 상품 상세 페이지 템플릿에 제가 새롭게 추가한 “사이드바”가 보이도록 테마와 플러그인을 수정하였습니다. 이렇듯 꽤 만족하고 사용하고 있는 테마도 계속 사이트의 컨셉과 방향이 변경될때마다 불만족스러운 부분이 발견되기 마련입니다. 다행인것은 워드프레스 개발철학과 잘 구조화되어 개발된 테마와 플러그인들은 꽤나 쉽고 빠르게 커스텀하여 자신이 원하는 기능과 디자인의 추가/변경이 용이하다는 점이 있습니다.

제가 운영하고 있는 회사의 워드프레스 홈페이지도 기존 테마와 다르게 많은 부분에서 커스텀되어 있으며 테마의 미비한 점을 자체 플러그인으로 개발하여 보완해주고 있습니다. 이런 방법으로 운용하니 테마를 재 구입해야 한다던가 사이트의 리뉴얼에 들어가는 비용을 효과적으로 절감하고 있다고 느끼고 있습니다.

 

screenshot-2016-04-08 14-02-27_2

오늘은 위의 스크린샷처럼 “외모”->”위젯” 메뉴에 추가될 “사이드바”를 생성하고 템플릿에 해당 사이드바를 추가하는 방법을 소개합니다.

 

 

1.register_sidebar()

<?php

class lcp_sidebar{

  public function __construct(){
    add_action("widgets_init", array($this, 'register_lcpsidebar'));
  } 

  public function register_lcpsidebar(){
    register_sidebar(array(
      'name' => '린치핀소프트 우커머스 사이드바',
      'id' => 'lcpsidebar_woo',
      'description' => '린치핀소프트에서 개발된 커스텀 사이드바입니다',
      'before_widget' => '<aside id="%1$s" class="widget %2$s">',
      'after_widget' => '</aside>',
      'before_title' => '<h1 class="widget-title">',
      'after_title' => '</h1>'
    )); 
  } 
}
?>

 

add_action(“widget_init”, array($this, ‘register_lcpsidebar’)) : 사이드바를 등록하는 register_sidebar() 함수는 “widget_init” 액션 훅에 의해 호출되어야 합니다. 위 소스코드에서는 “widget_init”액션 훅시에 “register_lcpsidebar” 클래스 메서드를 호출하고 있으며 해당 클래스 메서드에서 “register_sidebar()” 함수를 호출하여 사이드바를 등록하고 있습니다.

register_sidebar()함수 등록시 유의할 항목은 다음과 같습니다.

id : 추후 템플릿에 사이드바를 추가하거나 할때 “id”를 사용하여 사이드바를 식별하여 추가합니다.

before_widget / after_widget :  현재 추가하고 있는 사이드바에 추가되는 위젯을 감싸는 HTML 태그를 지정합니다. 이 부분에서 제 개인적인 경험으로 테마별로 사이드바의 위젯의 CSS가 미리 선언될 때가 있습니다. 테마에서 제공하는 사이드바와 현재 자신이 생성하는 사이드바의 위젯의 스타일(CSS) 통일성을 위하여 기존 사이드바에서 차용하는 HTML 태그와 CSS 클래스명을 같이 기입하여 주는 것이 도움이 될수 있습니다.(추후 CSS 추가 작업을 상당 부분 지양할 수 있습니다.)

 

2. dynamic_sidebar()

템플릿에 자신의 사이드바 추가하는 방법은 아주 쉽습니다. 일단은 어느 템플릿에 사이드바를 추가하고 싶은지에 대해  선택한 후 해당 템플릿 파일을 테마나 플러그인에서 찾아야 합니다. 우커머스의 경우 테마와 호환될때에는 테마에서 우커머스 템플릿을 로드할 때가 있어서 테마의 우커머스 템플릿을 수정해야 하는 경우도 있습니다.

<?php if ( is_active_sidebar( 'lcpsidebar_woo' ) ) : ?>
    <ul id="sidebar">
        <?php dynamic_sidebar( 'lcpsidebar_woo' ); ?>
    </ul>
<?php endif; ?>

템플릿 내에 적절한 위치를 찾게되면 위와 같이 dynamic_sidebar(‘lcpsidebar_woo’) 함수를 호출하여 ‘lcpsidebar_woo’  란 id로 지정된 사이드바를 추가할 수 있습니다.

 

3. 기존 템플릿의 우커머스 사이드바를 자신의 사이드바로 대체하는 방법

우커머스 사이드바는 do_action(‘woocommerce_sidebar’)의 액션훅에 의해 호출됩니다.

우커머스는 해당 훅에 add_action(‘woocommerce_sidebar’, ‘woocommerce_get_sidebar’) 와 같이 기술하여 사이드바를 호출하는데 이 기본 사이드바의 훅을 제거합니다.

remove_action(‘woocommerce_sidebar’,’woocommerce_get_sidebar’);  = 우커머스의 기본 사이드바를 호출하는 액션 훅을 제거합니다.

add_action(‘woocommerce_sidebar’,’get_lcpsidebar_woo’); = 우커머스의 기본 사이드바를 호출하는 액션훅에 자신의 사이드바가 호출되는 콜백함수명을 기입하여 자신의 사이드바가 노출되도록 합니다.