들어가며
워드프레스에서 위젯 섹션 혹은 위젯 영역은 사이드바, 푸터 영역 등을 지칭하며 위젯을 배치할 수 있는 영역입니다. 위젯 섹션은 테마마다 조금씩 차이가 있으며 사이드바는 대부분의 테마에서 제공됩니다. 이 글에서는 새로운 사이드바를 추가하는 방법을 살펴보겠습니다.
예를 들어, 메뉴 바로 아래에 새로운 위젯 영역을 추가하여 슬라이더를 배치하고 싶은 경우가 있을 수 있습니다. 다행히 사용 중인 워드프레스 테마에서 원하는 위젯 섹션이 있다면 그냥 사용하면 되겠지만 그렇지 않은 경우에는 새로운 위젯 섹션을 하나 만들거나 테마 소스 혹은 함수를 통해 직접 추가해야 합니다.
가령 이 글을 보면 Twenty Twelve 테마에서 메뉴 바로 아래에 위젯 섹션을 추가하고 슬라이드를 배치하는 예를 간단히 설명하고 있습니다. 혹은 메뉴 바로 아래에 구글 애드센스(Adsense)를 추가하기 위한 용도로도 사용이 가능합니다.
위젯 섹션 추가하기
위젯 섹션 등록하기
위젯 섹션을 추가하려면 테마의 함수 파일에 위젯을 등록한 후에 테마 파일의 적당한 곳에 위젯 섹션을 표시하는 코드를 삽입하면 됩니다.
먼저 아래와 같은 코드를 테마 파일(functions.php)에 추가하도록 합니다. 만약 차일드 테마(자식 테마)를 사용 중이라면 자식 테마 내의 함수 파일에 추가하도록 합니다. 별도의 자식 테마가 없는 경우에는 테마 내의 함수에 직접 추가하기 보다는 다른 함수 파일을 만들어 추가하는 방법을 권장합니다(여기를 참고해보세요). 또 다른 방법으로 새로운 플러그인을 만들어 함수를 추가할 수도 있습니다. 이 방법이 유지관리면에서 훨씬 유리합니다.
function slide_widgets_init() {
register_sidebar( array(
'name' => '슬라이더 영역',
'id' => 'custom_widget_1',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2 class="rounded">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'slide_widgets_init' );위에서 name과 id, 함수 이름을 적절히 수정해주도록 합니다. 그리고 클래스도 원하는 경우 추가해도 좋습니다. 위의 코드를 함수 파일에 넣고 저장하면, 관리자 페이지에서 외모 > 위젯으로 이동해보면 다음과 같이 새로운 위젯 영역이 추가되어 있습니다.
위젯 섹션 표시하기
위젯 영역을 표시하려면 다음과 같은 코드를 테마 파일(예: header.php, index.php, category.php, single.php, page.php 등)의 적절한 곳에 배치하도록 합니다.
<?php if ( is_active_sidebar( 'custom_widget_1') ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar('custom_widget_1'); ?>
</div><!-- #primary-sidebar -->
<?php endif; ?>아바다에서 위젯 섹션 추가하기
아바다(AVADA)나 일부 테마에서는 사용자들이 쉽게 위젯 섹션을 추가할 수 있는 메뉴를 제공하기도 합니다. 아바다의 경우 외모 > Widget Sections에서 사용자 위젯 섹션을 추가할 수 있습니다.
다른 방법
액션/필터 사용하기
이 글에서 구글 애드센스 코드를 추가하는 다양한 방법을 설명하고 있습니다. 위에서 잠시 언급했지만 위젯 섹션을 만들어 추가하는 것도 가능합니다. 하지만 상황이 허락된다면 액션을 활용하여 테마 파일 수정을 최소화하는 방법도 좋습니다. 위젯 영역을 추가한 후에 테마 파일에 위젯 영역을 표시하는 코드를 삽입해야 하는데, 가능한 경우 액션 등을 통해 함수 파일에서 곧바로 코드를 삽입하여 테마 파일을 수정하지 않는다면 추후 유지관리 측면에서 매우 편리할 것입니다.
위젯 섹션을 어디에 추가하는가에 따라 이러한 방법을 사용할 수도 있고 없을 수도 있습니다. 그리고 테마에 따라 다르기도 합니다. 예를 들어, 아바다 테마에서는 다양한 액션/필터를 제공합니다. Avada 액션/필터는 이 페이지에서 확인해볼 수 있습니다. 워드프레스 액션은 이 페이지에서 확인이 가능합니다.
아바다 액션/필터 사용하기
아바다(AVADA)에는 avada_before_main이라는 액션이 있습니다. 이 후크는 메인이 시작되기 직전에 코드를 추가해주는 역할을 합니다. 그러므로 이 액션을 활용하면 쉽게 위젯 섹션을 우리가 원하는 곳에 추가할 수 있습니다. 테스트로 새로 만든 위젯 섹션 “슬라이더 영역” 위젯 영역에 태그 구름(Tag Cloud) 위젯을 추가하고 다음과 같은 코드를 함수 파일에 추가해 보았습니다.
function under_avada_header() {
// 위에 나와 있는 위젯 섹션을 표시하는 코드
}
add_action( 'avada_before_main', 'under_avada_header' );그러면 다음과 같이 사이트 전체에서 main이 시작되기 직전에 태그 구름이 표시됩니다.
표시는 되지만 레이아웃이 보기가 좋지 않네요. 이런 경우 클래스를 추가하여 CSS를 통해 레이아웃을 수정해주어야 합니다.
액션을 사용한 또 다른 예로 이 사이트에 추가된 애드센스 코드입니다.
function avada_adsense_header() {
// 애드센스 코드
}
add_action( 'avada_before_main', 'avada_adsense_header' );위와 비슷한 형식으로 코드를 추가하고 CSS로 적절히 조정해주면 그림과 같이 메인이 시작되기 바로 직전에 애드센스 광고가 표시됩니다.
액션/필터를 제대로 활용한다면 워드프레스 테마 파일을 굳이 수정하지 않더라도 보다 수월하게 원하는 작업을 할 수 있습니다.
마치며
이상으로 워드프레스에 사용자 지정 위젯 섹션을 추가하는 방법을 살펴보았습니다. 아울러 액션을 사용하여 보다 수월하게 위젯 섹션이나 다른 코드를 표시하는 방법도 간략히 논했습니다. 추후에 기회가 된다면 액션/필터에 대해 자세히 살펴보는 시간을 가져봤으면 좋겠네요.
