월요일에 워드프레스 헤더에 위젯 영역 두 개를 추가하는 작업을 수행했습니다. 테마는 Massive Dynamic이라는 테마였는데, 헤더를 상단뿐만 아니라 사이드에 표시할 수 있었습니다. 사이드에 표시된 헤더에 언어/관리자 링크를 추가할 수 있는 위젯과 최신 글 목록을 표시하는 위젯을 추가했습니다.
위젯 영역을 추가하는 방법:
아바다 등 일부 테마에서는 위젯 영역을 대시보드에서도 가능하지만, 저는 보통 수동으로 위젯 영역을 추가합니다. (편의성 측면에서는 아바다가 대단하다는 생각이 드네요.)
테마의 함수 파일에 다음 코드를 추가하면 새로운 위젯 영역이 정의됩니다.
function arphabet_widgets_init() {
register_sidebar( array(
'name' => '사용자 정의 헤더', // 위젯 영역 이름, 한글로 입력해도 됩니다.
'id' => 'custom_header_section', // 위젯 영역의 고유한 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('custom_header_section') ) : ?>
<?php dynamic_sidebar( 'custom_header_section' ); ?>
<?php endif; ?>
다음으로 할 일은 실제 위젯을 추가하여 원하는 위치에 위젯이 잘 표시되는지 확인하도록 합니다. 원하는 위치에 표시된다면 적절한 CSS 코드를 사용하여 스타일을 조정하도록 합니다. 가령, 글자 크기, 글자 색상, 여백 등을 CSS로 지정합니다.
CSS 코드를 워드프레스에 추가하는 방법은 다음 글을 참고하시기 바랍니다.
물론 작업을 위해서는 FTP에 접속하여 테마 파일을 수정할 수 있어야 합니다. FTP를 사용하는 방법은 이 글을 참고해보세요.
이 작업은 테마에 따라 비교적 수월할 수도 있고 까다로울 수도 있습니다. 그리고 요즘 테마는 헤더 영역을 PC와 모바일을 다르게 하는 경우가 많으므로 모바일에서는 표시되지 않도록 하거나 모바일 위젯 영역을 따로 설정하는 것도 고려할 수 있습니다.