WordPress Customizer에서 JavaScript API 시작하기-Word누르다-php.cn

WordPress Customizer에서 JavaScript API 시작하기

PHPz

풀어 주다： 2023-09-03 23:13:08

원래의

1275명이 탐색했습니다.

워드프레스 커스터마이저는 처음부터 적극적으로 개발되었습니다. JavaScript API를 포함하여 API는 지속적으로 발전하고 있습니다. 그러나 이는 WordPress Codex에서 가장 적게 문서화된 API 중 하나입니다. 결과적으로 JavaScript API를 실제로 활용하는 방법을 보여주는 세부 기록은 몇 개밖에 없습니다.

WordPress Customizer에서 JavaScript API를 활용하면 실제로 컨트롤에서 미리보기 창으로 변경 사항을 전송하는 대신 테마를 사용자 정의할 때 더욱 강력한 실시간 경험을 제공할 수 있습니다.

Customizer JavaScript API를 사용하여 실시간으로 미리보기 창에 변경 사항을 적용하는 방법에 익숙할 수 있습니다. 이를 위해 아래와 같이 transport 模式设置为 postMessage를 설정하고 해당 JavaScript 코드를 추가하겠습니다.

으아악

그러나 부품, 패널, 컨트롤 숨기기, 표시 또는 이동, 다른 설정 값에 따라 설정 값 변경, 미리 보기 및 컨트롤 상호 작용 상호 연결 등 API를 더욱 확장할 수도 있습니다. 이것이 우리가 이 튜토리얼에서 살펴볼 내용입니다.

빠른 시작

우리는 WordPress Customizer API에 대한 세부 사항을 포함하여 여러 기사와 시리즈에 걸쳐 WordPress Customizer를 상당히 광범위하게 다루었습니다.

WordPress 사용자 정의 프로그램과 패널, 섹션, 설정, 컨트롤과 같은 구성 요소의 핵심 개념을 이해하신 것 같습니다. 그렇지 않은 경우에는 더 진행하기 전에 해당 주제에 대한 튜토리얼과 비디오 코스를 공부하는 데 시간을 할애하는 것이 좋습니다.

WordPress 테마 사용자 정의 가이드
WordPress 테마 사용자 정의 프로그램
사용자 정의자가 사용할 수 있는 WordPress 테마 작성

설정 및 제어

먼저 이 튜토리얼의 Customizer에 추가된 설정 및 컨트롤을 확인해 보겠습니다. 또한 이를 제자리에 배치하는 코드도 살펴보겠습니다.

WordPress 定制器中的 JavaScript API 入门

이 튜토리얼에서는 웹 사이트 "웹 사이트 제목"에 중점을 둘 것입니다. 위에서 볼 수 있듯이 기본 WordPress “사이트 제목” 입력 필드와 “사이트 제목”을 활성화 또는 비활성화하는 사용자 정의 확인란이라는 두 가지 컨트롤이 있습니다. 이 두 컨트롤은 사이트 식별 섹션에 있습니다. 이미지 오른쪽에는 렌더링되는 "사이트 제목"을 볼 수 있는 미리보기가 있습니다.

또한 아래에서 볼 수 있듯이 색상 섹션에는 사이트 제목 색상과 hover 상태 색상을 변경할 수 있는 두 개의 컨트롤이 있습니다.

WordPress 定制器中的 JavaScript API 入门

기본 코드

우리 테마는 모든 사용자 정의 관련 코드가 /inc/customizer.php 파일에 배치되는 밑줄을 기반으로 합니다.

으아악

위에서 볼 수 있듯이 이 튜토리얼의 요구 사항을 충족하기 위해 코드를 일부 수정했습니다.

“사이트 제목” 입력 필드 아래에 WordPress 내장 설정 blogdescription 降低为 12，以便复选框设置 display_blogname이 포함되었습니다.
저희 경우에는 "사이트 제목"과 "태그라인" 입력 필드 사이에 display_blogname 的新控件。我们将 priority 设置为 11라는 필드를 만듭니다.
할 것이다 header_text 默认颜色设置为 #f44336，将 transport 类型设置为 postMessage.
설정 아래에 새로운 설정 header_text_color。同样，我们还将优先级设置为 11，使其出现在 header_textcolor도 만들었습니다.

이러한 모든 설정은 postMessage 设置，而不是通过 refresh 设置。 postMessage 옵션을 통해 활성화되어 값을 비동기적으로 전송하고 실시간으로 미리보기 창에 표시할 수 있습니다. 그러나 변경 사항을 처리하려면 자체 JavaScript를 작성해야 합니다.

자바스크립트 로드

사용자 정의 패널 내의 컨트롤을 처리하려면 두 개의 JavaScript 파일을 만들어야 합니다. 하나의 파일 customizer-preview.js 用于处理预览，另一个文件 customizer-control.js. 으아악

다음 코드를 customizer-preview.js 안에 넣으세요.

으아악

현재는 비어 있는 JavaScript 함수입니다. 이 시리즈의 다음 튜토리얼에서는 미리보기 창에서 변경 사항을 미리 보는 방법에 대해 더 구체적으로 설명하겠습니다.

다른 파일에 customizer-control.js 다음 코드를 추가합니다:

으아악

위에서 볼 수 있듯이 맞춤설정 ready 이벤트에서 이 파일에 이 코드를 래핑합니다. 이렇게 하면 사용자 정의 기능 실행을 시작하기 전에 설정, 패널 및 컨트롤을 포함한 사용자 정의 프로그램의 모든 것이 완전히 준비되었는지 확인할 수 있습니다.

마지막으로 코드를 추가한 후 두 개의 JavaScript 파일을 서로 다른 두 위치에 로드합니다.

// 1. customizer-preview.js
function tuts_customize_preview_js() {
	wp_enqueue_script( 'tuts_customizer_preview', get_template_directory_uri() . '/js/customizer-preview.js', array( 'customize-preview' ), null, true );
}
add_action( 'customize_preview_init', 'tuts_customize_preview_js' );

// 2. customizer-control.js
function tuts_customize_control_js() {
	wp_enqueue_script( 'tuts_customizer_control', get_template_directory_uri() . '/js/customizer-control.js', array( 'customize-controls', 'jquery' ), null, true );
}
add_action( 'customize_controls_enqueue_scripts', 'tuts_customize_control_js' );

로그인 후 복사

customizer-preview.js 文件将通过 customize_preview_init 操作挂钩加载到定制器预览窗口中。 customizer-control.js 文件将加载到定制程序后端，其中的设置和控制元素可通过 customize_controls_enqueue_scripts 操作挂钩访问。