프로젝트에서 Kirki 프레임워크를 사용하여 더 빠르게 커스터마이저 설정 구축

게시 됨: 2019-08-10

Kirki는 테마 또는 플러그인에 사용자 지정 컨트롤을 추가하려는 개발자를 위해 구축된 무료 오픈 소스(MIT 라이선스) 프레임워크입니다.

Kirki의 수석 개발자인 Aristeides Stathopoulos는 2014년부터 프레임워크에 대해 작업해 왔습니다. 지속적인 업데이트와 개선 덕분에 Kirki는 1000개 이상의 별과 300개 포크를 포함하는 Github에 커뮤니티를 구축했습니다.

Kirki 전에는 커스터마이저를 만진 적이 없습니다. Kirki는 내가 커스터마이저를 이해하고 더 짧은 시간에 많은 일을 할 수 있도록 도와주었습니다!

LebCit – 워드프레스 테마 개발자

워드프레스 코어 커스터마이저 컨트롤

WordPress Core에는 기본적으로 몇 가지 기본 사용자 지정 컨트롤이 포함되어 있습니다. 예: 텍스트, 텍스트 영역, 확인란, 라디오, 선택, 드롭다운 페이지, 이메일, URL, 번호, 숨김 및 날짜 컨트롤.

Kirki는 Core Controls 외에도 약 20개 정도를 지원합니다. 일반적으로 Kirki 컨트롤은 고급 사용 사례를 다룹니다. 예를 들어:

타이포그래피
색상 팔레트
TinyMCE 에디터
정렬 가능한 필드

Kirki는 CSS 출력 및 postMessage 스크립트의 자동 생성과 같은 Core WordPress에서 사용할 수 없는 기능도 제공합니다. 이 기사의 뒷부분에서 살펴볼 이러한 기능을 사용하면 개발 시간을 쉽게 절반으로 줄일 수 있습니다.

키르키는 느리다

Kirki에 대해 일반적으로 제기되는 한 가지 비판은 느리다는 것입니다. 사실 이 비판은 대부분의 프레임워크(WordPress 포함)에 대해 사용됩니다. 말이 됩니까? 사용하지 않을 수도 있는 많은 코드를 로드하고 있습니다.

이 경우 현실은 그 반대가 사실입니다. Kirki를 사용하여 구축된 대부분의 컨트롤 패널은 실제로 Core Control로 구축된 동일한 패널보다 빠릅니다.

Kirki는 WordPress에 내장되지 않은 최적화 계층을 추가하기 때문입니다.

사용자 지정 프로그램이 초기화되면 WordPress는 모든 컨트롤이 섹션이나 패널 내에 있고 사용자가 아직 컨트롤과 상호 작용할 수 없는 경우에도 즉시 모든 컨트롤을 로드하려고 시도합니다. 이에 비해 Kirki는 사용자가 컨트롤과 상호 작용하기 직전까지 로딩을 연기합니다.

실제로 효과를 보기 위해 각 방법을 사용하여 50개의 색상 컨트롤을 추가해 보겠습니다.

핵심 방법:

 ($i = 0; $i < 50; $i++){
	$wp_customize->add_setting( 'color_setting_hex_' . $i , 배열(
		'기본' => '#0088CC'
	) );

	// 색상 선택기 컨트롤 추가
	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'color_setting_hex_' . $i, array(
		'레이블' => '색상 컨트롤',
		'섹션' => 'title_tagline',
		'설정' => 'color_setting_hex_' . $나,
	) ) );
}

키르키와 함께:

 ($i = 0; $i < 50; $i++) {
     Kirki::add_field( 'config_id', 배열(
         '유형' => '색상',
         '설정' => 'color_setting_hex_' . $나,
         'label' => __( '색상 제어', 'kirki' ),
         '섹션' => 'title_tagline',
         '기본값' => '#0088CC',
     ) );
 }

결과:

보시다시피 Kirki를 사용할 때 초기 로드 속도가 상당히 빠릅니다. 컨트롤을 만드는 데 필요한 코드도 더 간결합니다.

프로젝트에 Kirki 통합하기

Kirki 프레임워크를 프로젝트에 통합하는 방법에는 여러 가지가 있습니다. 공식 문서는 다양한 방법을 잘 설명하고 있습니다.

개발자는 프로젝트 코드에 프레임워크를 직접 포함하기보다 사용자가 Kirki 플러그인 버전을 설치하도록 안내하는 것이 좋습니다. 이것은 TGMPA 또는 제공된 스크립트를 사용하여 수행할 수 있습니다.

플러그인 경로를 사용하는 이유는 Kirki가 자주 업데이트되고 개선되기 때문입니다. 플러그인 버전을 설치하면 사용자가 버그 수정 및 보안 업데이트에 즉시 액세스할 수 있습니다.

대조적으로, 프레임워크를 프로젝트의 일부로 포함하는 경우 사용자는 테마 또는 플러그인을 업데이트할 때만 업데이트를 받게 되며 이는 필요한 것보다 덜 자주 업데이트될 수 있습니다.

어떤 방법을 사용하든 설정을 추가하기 전에 Kirki가 초기화되었는지 확인하십시오.

 // Kirki가 존재하지 않는 경우 조기 종료.
if ( ! class_exists( '키르키' ) ) {
    반품;
}

필드

핵심 방법 예제에서는 먼저 설정을 만든 다음 이에 대한 컨트롤을 만들었습니다. 대부분의 경우 이 둘은 직접 연결됩니다. Kirki는 프로세스를 단순화하고 대신 '필드'를 만들 수 있습니다. 필드가 생성되면 백그라운드에서 설정 및 제어를 빌드합니다.

필드는 예상할 수 있는 모든 제어 인수(레이블, 설명, 섹션, 기본값)와 일부 Kirki 관련 인수를 지원합니다.

'type' 인수를 사용하면 Kirki의 30가지 제어 유형 중 하나를 선택할 수 있습니다. https://kirki.org/docs/controls/

섹션

사용자 지정 섹션을 사용하면 컨트롤을 함께 그룹화할 수 있습니다. WordPress에는 컨트롤을 추가할 수 있는 6개의 내장 섹션이 있습니다.

title_tagline – 사이트 ID
색상 – 색상
header_image – 헤더 이미지
background_image – 배경 이미지
static_front_page – 홈페이지 설정
custom_css – 추가 CSS

Kirki의 섹션은 Core에서와 정확히 동일하게 작동합니다. Kirki::add_section() 메서드는 단순히 $wp_customize->add_section()의 래퍼이며 동일한 매개변수와 인수를 허용합니다.

 Kirki::add_section( 'section_id', 배열(
     '제목' => esc_html__( '내 섹션', 'kirki' ),
     '설명' => esc_html__( '내 섹션 설명.', 'kirki' ),
 ) );

패널

패널을 사용하면 섹션을 함께 그룹화하여 다른 수준의 계층 구조를 만들 수 있습니다. WordPress Core에는 '메뉴'라는 하나의 내장 패널이 있습니다.

다시 말하지만, Kirki 구현은 단순히 핵심 기능에 대한 래퍼입니다.

 Kirki::add_panel( 'panel_id', 배열(
     '우선순위' => 10,
     '제목' => esc_html__( '내 패널', 'kirki' ),
     '설명' => esc_html__( '내 패널 설명', 'kirki' ),
 ) );

'수송' => '자동'

일반적으로 사용자 지정 컨트롤을 만들 때 전송 인수에 대해 두 가지 옵션이 있습니다.

새로 고침 – 사용자가 변경할 때마다 미리 보기 창이 새로 고쳐져 변경 사항이 표시됩니다. 몇 초 정도 걸릴 수 있습니다.
postMessage – 사용자가 변경할 때마다 미리보기 창은 새로 고침이 필요하지 않고 거의 즉각적으로 수행되는 Javascript를 사용하여 업데이트됩니다.

postMessage는 의심할 여지 없이 미리보기를 업데이트하는 우수한 방법이며 가능한 경우 사용해야 합니다. 그러나 한 가지 단점이 있습니다. postMessage를 사용하면 각 컨트롤에 대해 사용자 정의 JS 코드를 작성해야 한다는 의미입니다. 간단한 구현은 다음과 같습니다.

 // 사이트 제목을 실시간으로 업데이트...
wp.customize( '블로그 이름', 함수(값) {
    value.bind( 함수( newval ) {
        $( '#사이트 제목 a' ).html( newval );
    } );
} );

설정이 많으면 빠르게 반복될 수 있습니다.

이것은 Kirki가 빛나는 곳이며 세 번째 옵션인 'transport' => 'auto'를 추가합니다.

'transport' => 'auto'는 Kirki가 추가한 'output'이라는 다른 인수와 함께 작동합니다. 두 값이 모두 정의되면 Kirki는 자동으로 postMessage 스크립트를 생성합니다. 즉, Javascript 코드를 작성하지 않고도 postMessage를 사용하여 모든 이점을 얻을 수 있습니다.

Transport => 'auto'를 사용하는 필드는 다음과 같습니다.

 Kirki::add_field( 'config_id', 배열(
     '유형' => '색상',
     '설정' => 'color_setting_hex',
     'label' => __( '색상 제어', 'kirki' ),
     '섹션' => '색상',
     '기본값' => '#0088CC',
     '수송' => '자동',
     '출력' => 배열(
         정렬(
             '요소' => '본체',
             '속성' => '배경색',
         ),
     ),
 ) );

Kirki의 이 시간 절약 기능은 대부분의 경우 더 이상 자신의 postMessage 스크립트를 작성하거나 대기열에 넣을 필요가 없다는 것을 의미합니다.

프론트엔드 CSS 출력

커스터마이저 설정 생성의 또 다른 부분은 프런트엔드에서 CSS 출력을 생성하는 것입니다. 간단한 예는 다음과 같습니다.

 /**
 * 커스터마이저 CSS를 wp_head로 출력
 */
함수 wptavern_customizer_css() {
	$bg_color = get_theme_mod( 'color_setting_hex' );
	?>
	<스타일>
		몸 {
			배경색: <?php echo Sanitize_hex_color( $bg_color ); ?>;
		}
	</스타일>
	<?php
}
add_action( 'wp_head', wptavern_customizer_css );

postMessage 예제와 마찬가지로 설정이 많으면 이 코드를 작성하는 것이 빠르게 반복될 수 있습니다.

다행히도 'transport' => 'auto'는 프론트엔드 출력도 처리합니다. 단순화된 예제에서도 'transport' => 'auto'는 작성해야 하는 코드를 ~50%까지 줄였습니다.

결론

이 기사에서 우리는 Kirki Framework의 기본 사항과 두 가지 주장을 살펴보았고 이미 성능 저하 없이 사용자 지정 컨트롤을 더 빠르게 생성할 수 있는 방법을 볼 수 있습니다.

Kirki에 뛰어들면 사용자 정의 API 위에 추가되는 풍부한 기능을 빠르게 발견할 수 있습니다. 300,000개 이상의 웹사이트와 시장에서 가장 큰 WordPress 테마의 핵심 부분에서 사용되는 것은 놀라운 일이 아닙니다.