Erste Schritte mit der JavaScript-API im WordPress Customizer

Der WordPress-Customizer wurde seit seiner Einführung aktiv weiterentwickelt. APIs entwickeln sich ständig weiter, darunter auch JavaScript-APIs. Es handelt sich jedoch um eine der am wenigsten dokumentierten APIs im WordPress-Codex. Daher gibt es nur wenige detaillierte Aufzeichnungen, die zeigen, wie die JavaScript-API tatsächlich genutzt werden kann.

Durch die Nutzung der JavaScript-API im WordPress Customizer können wir beim Anpassen eines Themes tatsächlich ein überzeugenderes Echtzeiterlebnis bieten, anstatt Änderungen nur vom Steuerelement in das Vorschaufenster zu übertragen.

Möglicherweise wissen Sie, wie Sie mit der Customizer-JavaScript-API Änderungen am Vorschaufenster in Echtzeit umsetzen. Dazu richten wir transport 模式设置为 postMessage ein und fügen den entsprechenden JavaScript-Code wie unten gezeigt hinzu.

wp.customize( 'blogname', function( value ) {
	value.bind( function( to ) {
		$( '.site-title a' ).text( to );
	} );
} );

Wir können die API jedoch auch weiter erweitern, z. B. Teile, Bedienfelder und Steuerelemente ausblenden, anzeigen oder verschieben, den Wert einer Einstellung basierend auf dem Wert einer anderen Einstellung ändern und Vorschauen und Steuerinteraktionen miteinander verbinden. Dies werden wir uns in diesem Tutorial ansehen.

Schnellstart

Wir haben den WordPress Customizer in mehreren Artikeln und Serien ausführlich behandelt und dabei die Details der Customizer-API behandelt.

Ich denke, Sie haben die Kernkonzepte des WordPress-Customizers und der Komponenten wie Panels, Abschnitte, Einstellungen und Steuerelemente verstanden. Ansonsten empfehle ich Ihnen dringend, einige Zeit damit zu verbringen, unsere Tutorials und Videokurse zu diesem Thema zu studieren, bevor Sie fortfahren.

• WordPress Theme Customizer Guide
• WordPress Theme Customizer
• Schreiben Sie WordPress-Themes, die von Customizern verwendet werden können

Einstellungen und Steuerelemente

Zuerst schauen wir uns die im Customizer für dieses Tutorial hinzugefügten Einstellungen und Steuerelemente an. Wir werden uns auch den Code ansehen, um sie zu implementieren.

In diesem Tutorial konzentrieren wir uns auf den „Website-Titel“ der Website. Wie Sie oben sehen können, verfügen wir über zwei Steuerelemente: das native WordPress-Eingabefeld „Site-Titel“ und ein benutzerdefiniertes Kontrollkästchen zum Aktivieren oder Deaktivieren des „Site-Titels“. Diese beiden Steuerelemente befinden sich im Abschnitt „Site-Identifikation“. Rechts neben dem Bild befindet sich eine Vorschau, in der Sie sehen können, wie der „Site-Titel“ gerendert wird.

Darüber hinaus haben wir, wie Sie unten sehen können, im Abschnitt „Farben“ zwei Steuerelemente zum Ändern der Farbe des Site-Titels und seiner hover Statusfarbe.

Zugrundeliegender Code

Unser Theme basiert auf Unterstrichen, wobei der gesamte Customizer-bezogene Code in /inc/customizer.php Dateien abgelegt wird.

function tuts_customize_register( $wp_customize ) {

	$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';

	$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
	$wp_customize->get_control( 'blogdescription' )->priority = '12';

	$wp_customize->get_setting( 'header_textcolor' )->default = '#f44336';
	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';

	// Checkbox to Display Blogname
	$wp_customize->add_setting( 'display_blogname', array(
		'transport' => 'postMessage',
	) );

	$wp_customize->add_control( 'display_blogname', array(
		'label'     => __( 'Display Site Title', 'tuts' ),
		'section'   => 'title_tagline',
		'type'      => 'checkbox',
		'priority'  => 11,
	) );

	// Add main text color setting and control.
	$wp_customize->add_setting( 'header_textcolor_hover', array(
		'default'           => '#C62828',
		'sanitize_callback' => 'sanitize_hex_color',
		'transport'         => 'postMessage',
	) );

	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor_hover', array(
		'label'    => __( 'Header Text Color: Hover', 'tuts' ),
		'section'  => 'colors',
		'priority' => '11'
	) ) );
}
add_action( 'customize_register', 'tuts_customize_register' );

Wie Sie oben sehen können, haben wir einige Änderungen am Code vorgenommen, um den Anforderungen dieses Tutorials gerecht zu werden.

• Wir haben in WordPress integrierte Einstellungen blogdescription 降低为 12，以便复选框设置 display_blogname integriert, die unter dem Eingabefeld „Site-Titel“ angezeigt werden.
• Wir erstellen ein Feld namens display_blogname 的新控件。我们将 priority 设置为 11, das in unserem Fall zwischen den Eingabefeldern „Site Title“ und „Tagline“ liegt.
• wird header_text 默认颜色设置为 #f44336，将 transport 类型设置为 postMessage.
• Wir haben außerdem eine neue Einstellung erstellt, header_text_color。同样，我们还将优先级设置为 11，使其出现在 header_textcolor unter „Einstellungen“.

Alle diese Einstellungen werden über die Option postMessage 设置，而不是通过 refresh 设置。 postMessage aktiviert, sodass Werte asynchron übertragen und in Echtzeit im Vorschaufenster angezeigt werden können. Allerdings müssen wir auch unser eigenes JavaScript schreiben, um die Änderungen zu verarbeiten.

JavaScript laden

Wir müssen zwei JavaScript-Dateien erstellen: Eine Datei customizer-preview.js 用于处理预览，另一个文件 customizer-control.js, um die Steuerelemente im Customizer-Panel zu verwalten.

js
├── customizer-preview.js // 1. File to handle the Preview
├── customizer-control.js // 2. File to handle the Controls
├── navigation.js
└── skip-link-focus-fix.js

Fügen Sie den folgenden Code in customizer-preview.js ein.

( function( $ ) {
	// Codes here.
} )( jQuery );

Es handelt sich derzeit um eine leere, geschlossene JavaScript-Funktion. Wir werden im nächsten Tutorial dieser Serie genauer besprechen, wie Sie Änderungen im Vorschaufenster in der Vorschau anzeigen können.

In einer anderen Datei customizer-control.js fügen wir den folgenden Code hinzu:

(function( $ ) {
	wp.customize.bind( 'ready', function() {
		var customize = this;
		// Codes here
	} );
})( jQuery );

Wie Sie oben sehen können, werden wir diesen Code im Customizer-Ereignis ready in diese Datei einbinden. Dadurch wird sichergestellt, dass alles im Customizer, einschließlich Einstellungen, Panels und Steuerelemente, vollständig bereit ist, bevor wir mit der Ausführung benutzerdefinierter Funktionen beginnen.

Nachdem wir den Code hinzugefügt haben, werden wir diese beiden JavaScript-Dateien schließlich an zwei verschiedenen Orten laden.

// 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 操作挂钩访问。

下一步是什么？

WordPress 自成立以来一直在 PHP 方面进行了大量投资。因此，支持该生态系统的大多数开发人员对 PHP API 比 JavaScript API 更加熟练和熟悉也就不足为奇了。

直到最近，它才通过定制器和 WP-API 广泛集成了 JavaScript。掌握 WordPress 定制器中的 JavaScript API 可能是一个相当大的挑战。如前所述，WordPress 的这一面目前记录最少。因此，我们将彻底讨论这个主题。

同时，如果您正在寻找其他实用程序来帮助您构建不断增长的 WordPress 工具集，或者学习代码并更加精通 WordPress，请不要忘记查看我们提供的内容可在 Envato 市场购买。

在此，我们已准备好使用 WordPress JavaScript API 的所有基本元素。我们就到此结束。在本系列的下一部分中，我们将揭示 WordPress 中 JavaScript API 背后的更多内容，并开始编写可立即在主题中实现的功能脚本。

敬请期待！

Das obige ist der detaillierte Inhalt vonErste Schritte mit der JavaScript-API im WordPress Customizer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!