워드프레스 테마 Customizer(사용자 정의)에 대한 이해

워드프레스 3.4버젼 이후로 테마의 각종 스타일을 편리하게 변경하는 customizer(사용자 정의하기) 기능이 추가 되었죠. customizer는 사용자가 직접 스타일의 변경을 눈으로 확인하고 마음에 드는 설정을 저장할 수 있는 장점이 있습니다. 이번 포스트에서는 customizer에 대해 자세히 알아보도록 하겠습니다.

Customizer란

The Theme Customization API, added in WordPress 3.4, allows developers to customize and add controls to the “Appearance” → “Customize” admin screen. The Theme Customization screen (i.e. “Theme Customizer”) allows site admins to tweak a theme’s settings, color scheme or widgets, and see a preview of those changes in real time. Theme Customization API

실시간으로 테마의 변경사항을 보면서 각종 스타일 설정 등을 할 수 있는 기능입니다. 아래 스크린 캡춰를 보시면 제가 twenty fourteen 기본 테마에 예시로 만들어본 Top bar color 옵션이 있습니다.  옵션에서 색상을 변경하면 자동으로 지정된 영역의 색상이 변경됩니다.  theme-customizer1

테마의 customizer에 정의되지 않은 스타일 찾기

먼저 사용하시는 테마의 customizer에 정의되어 있지 않은 스타일 중에서 자주 변경이 필요한 부분을 선택해서 customizer에 추가해야겠죠. 저는 twenty fourteen에서 top bar가 검정색이라 왠지 전체적으로 어두운 느낌이 들어서 이 부분(.site-header)을 customizer에 추가해보기로 했습니다. 브라우져의 개발자 도구(예: 크롬 개발자 도구)를 열어서 변경하고자 하는 영역을 찾고 그 영역에 사용된 class를 사용해보세요.
theme-customizer2

Customizer 기능 functions.php에 추가

Codex에 있는 Sample Theme Customization Class를 참고하여 자식테마의 functions.php에 아래와 같은 코드를 삽입합니다. 간단히 아래의 클래스를 설명해보면 다음과 같습니다.

  • 1. 추가할 설정을 register를 통해 customizer로 등록합니다.
    • add_section: customizer에서 비슷한 설정들을 그룹으로 지정해서 해당 영역에 표시합니다.(예: HwangC Options )
    • add_setting: 추가하고자 하는 설정입니다.(아래 코드에서는 top_bar_color id에 사용자가 지정한 값이 저장됩니다.)
    • add_control: add_section에 위의 add_setting을 연결하고 customizer에 사용자가 사용할 설정 폼을 표시합니다.
  • 2. 사용자가 live_preview에 등록한 javascript를 이용해 실시간으로 변경되는 화면을 확인합니다.
  • 3. 원하는 스타일을 선택 후 header_output에서 head 영역에 추가합니다.

js파일 만들기

위에서 기본적인 customizer에 대해 정의를 했다면 live preview가 가능하도록 js파일을 만들어야합니다. js파일은 이미 live_preview()에서 wp_enqueue_script를 사용해서 등록해두었습니다. 실제 파일을 해당 경로(위의 예: 자식테마폴더/js/theme-customizer.js)에 만들고 아래 코드를 파일에 추가합니다.

아래코드는 위에서 설정한 top_bar_color를 변경하고자 하는 영역 .site-header에 실시간으로 적용해서 변경사항을 보면서 설정을 할 수 있도록 도와줍니다.

코딩이 어려운 경우에는 플러그인 활용

프리미엄 테마는 보통 설정에 다양한 색상 변경 옵션이 있지만 기본 테마나 무료 테마에는 이런 기능들이 없는 경우가 많습니다. 감사하게도 twenty fourteen은 다양한 색상 변경이 가능한 플러그인이 있네요. 아래 플러그인을 참고해보세요.
twenty fourteen 색상 변경 플러그인

마치며

theme-customizer
Customizer를 추가하는 방법은 조금 까다로워 보이지만 한번 추가해보시면 다음에는 조금 더 쉽게 원하는 설정을 추가하실 수 있을 것 같네요. 여러분의 테마에 원하는 설정을 Customizer에 추가하여 편리하게 테마를 꾸며보세요. 그럼 오늘도 즐거운 블로깅 하세요!

글쓴이

HwangC

안녕하세요! 여러분의 편안한 워드프레스 안내자 황씨입니다.

“워드프레스 테마 Customizer(사용자 정의)에 대한 이해”에 대한 2개의 생각

  1. 글과 관련은 없지만 궁금한점이 있어서 글써봅니다.
    포트폴리오 페이지에서 카테고리를 나눌때 순서를 바꿀순없는건가요?
    abc순으로 무조건 나뉘어져서요

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.