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

참고: 인기 테마인 BE 테마(33%)The 7(35%) 할인 행사를 진행하고 있습니다.
참고

개요

워드프레스에는 테마에 따라 하나 이상의 위젯 영역(위젯 섹션)이 제공됩니다. 가장 일반적인 위젯 영역으로 사이드바(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 버전에서 테마에 따라 잘 작동하지 않을 수도 있을 것입니다.

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.