[워드프레스] 새로운 위젯 영역 추가하기

3

개요

워드프레스에는 테마에 따라 하나 이상의 위젯 영역(위젯 섹션)이 제공됩니다. 가장 일반적인 위젯 영역으로 사이드바(Sidebar)와 푸터(Footer)를 들 수 있습니다. 테마에서 제공하는 기본적인 위젯 영역 외에 사용자가 위젯 영역을 추가할 수도 있습니다. 이러한 사용자 지정 위젯 영역은 쉽게 만들 수 있습니다.

다음과 같은 순서로 위젯 영역을 만들면 됩니다.

  1. 워드프레스 테마 함수 파일에 위젯 영역을 등록하는 코드를 추가합니다.
  2. 새로 만든 위젯을 출력하는 코드를 테마 파일에 추가합니다. (혹은 페이지 빌더를 통해 글/페이지에 직접 추가합니다.)
  3. 필요한 경우 CSS를 사용하여 레이아웃(디자인)을 조정해줍니다.

아바다(AVADA), Enfold와 같은 일부 인기 있는 유료 테마에서는 Custom Widget Section(Custom Widget Area)을 추가할 수 있는 기능을 제공하여 쉽게 위젯 섹션을 추가할 수 있도록 합니다. 그리고 Visual Composer나 Fusion Builder와 같은 페이지 빌더를 통해 곧바로 위젯 섹션을 글이나 페이지 등에 추가하는 것도 가능합니다.

위젯 영역 만들기

수동으로 위젯 영역(Widget area)을 만드는 방법을 살펴봅니다. 먼저 다음과 비슷한 코드를 테마 함수 파일에 추가하도록 합니다.

function arphabet_widgets_init() {

register_sidebar( array(
'name'          => 'Under Header Section',  // 위젯 영역 이름, 한글로 입력해도 됩니다.
'id'            => 'home_under_1',  // 위젯 영역의 고유한 ID
'before_widget' => '<div>',  // 위젯 앞에 추가될 코드
'after_widget'  => '</div>',  // 위젯 뒤에 추가될 코드
'before_title'  => '<h2 class="rounded">', // 위젯 타이틀 앞에 추가될 코드
'after_title'   => '</h2>', // 위젯 타이틀 뒤에 추가될 코드
) );

}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>

위와 같은 코드를 입력하면 외모 > 위젯에 아래와 같은 새로운 위젯 영역이 추가됩니다.

워드프레스 사용자 지정 위젯 섹션

그러면 위의 그림과 같이 원하는 위젯을 추가할 수 있습니다.

위젯 표시하기

이제 이 위젯이 워드프레스 사이트에 표시되도록 해야 합니다. 표시하는 방법은 다음과 같은 코드를 사용하면 됩니다.

<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('home_under_1') ) : ?>
<?php dynamic_sidebar( 'home_under_1' ); ?>
<?php endif; ?>

또는 다음과 같은 형태도 가능합니다.

<?php if ( is_active_sidebar( 'home_under_1' ) ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'home_under_1' ); ?>
</div><!-- #primary-sidebar -->
<?php endif; ?>

위의 PHP 코드를 테마 파일(예: header.php, index.php, category.php 등)의 적절한 곳에 복사하여 넣도록 합니다.

위에서 언급했듯이 VC나 Fusion Builder와 같은 페이지 빌더를 사용하는 경우 글이나 페이지에 곧바로 위젯을 추가하는 것도 가능합니다. 이 경우 테마 파일을 수정할 필요가 없습니다.

새로운 위젯 섹션을 만들어 다양한 방식으로 응용할 수 있습니다. 가령, 애드센스 코드를 추가하거나 특정 이미지를 출력하거나 슬라이드를 추가하는 등의 용도로 사용할 수 있습니다.

아바다(AVADA) 테마에서 사용자 정의 위젯 섹션 추가하기

아바다, Enfold 등의 일부 유료 테마에서는 사용자들이 쉽게 위젯 영역을 추가할 수 있는 옵션을 제공합니다. 예를 들어, 아바다(AVADA) 테마의 경우 외모 > Widget Sections에서 새로운 위젯 섹션을 만들 수 있습니다.

아바다 테마에서 새로운 위젯 섹션 추가하기

"Add New Widget Section"(새 위젯 섹션 추가)을 눌러 새로운 위젯 섹션을 추가할 수 있습니다.

CSS로 레이아웃 조정하기

위젯 영역을 새로 추가하면 여백(margin)이나 정렬(align) 등을 조정해야 합니다. 이런 작업은 CSS를 사용하여 진행하도록 합니다. 페이지 빌더를 통해 추가하는 경우 페이지 빌더에서 요소 속성을 수정하는 창에서 직접 가능합니다. (또는 class를 지정하고 CSS를 통해 직접 조정하는 방법도 있습니다.)


부록: 글/페이지에 위젯을 숏코드로 추가하기

비주얼 컴포저나 퓨전 빌더와 같은 페이지 빌더를 사용하지 않은 상태에서 위젯을 포스트, 페이지에 숏코드 형태로 추가하려면 amr shortcode any widget과 같은 플러그인을 사용할 수 있습니다.

워드프레스 위젯을 숏코드로 변환하기이 플러그인의 Installation 섹션에 자세한 사용법이 나와 있습니다.

이와 비슷한 플러그인으로 Widget Shortcode라는 플러그인도 있습니다. 이 플러그인은 더 편리하게 숏코드를 넣을 수 있지만 업데이트된 지 1년이 넘어서 최신 WordPress 버전에서 테마에 따라 잘 작동하지 않을 수도 있을 것입니다.

참고:

3 개 댓글

  1. 너무 좋은 내용이지만, 어째서인지 코드를 복사할 수 없습니다. 

    코딩관련 내용이 있는 사이트가 복사방지기능이 적용되어 있다는 것은.... 이해할 수 없는 부분이네요... 
    • 안녕하세요? 제 블로그를 방문해주셔서 감사합니다. 우선 불편을 드려서 죄송합니다.
      하지만 블로그 내용을 복사해가는 경우가 많아서 어쩔 수 없는 조치인 점을 감안해주시기 바랍니다.
      그리고 다른 워드프레스 관련 사이트나 카페를 보더라도 복사 방지가 되어 있는 경우가 많습니다.
      (상황을 보고 복사 방지 기능이 불필요하다고 생각되면 복사 방지 기능을 제거하도록 하겠습니다.)
      참고로 코드를 보시면서 입력하시면 복사하는 것보다 더 많은 도움이 될 것입니다.
      즐거운 휴일 되시기 바랍니다.

      P.S.
      복사 방지가 되어 있어도 사실 인터넷 상의 모든 글은 다 복사해갈 수 있습니다.
      이런 부분은 조금 검색해보시면 방법을 찾으실 수 있을 것입니다.

댓글 남기기

댓글을 입력해주세요!
이름을 입력해주세요