Titel einer Customize-Section verändern

Beim Erstellen einer Customize-Section wird ein Titel vergeben. In einigen Fällen kann es sein, dass dieser Titel während einer Customize-Session dynamisch verändert werden soll, um beispielsweise den veränderten Wert eines Formularfeldes wiederzugeben, wie unten im GIF zu sehen ist.

Ein GIF, das die Detailansicht einer Section zeigt. Beim Verändern eines Select-Feldes wird der Section-Titel ebenfalls aktualisiert.

Ich habe keine Möglichkeit gefunden den Titel über die Customize-JS-API zu verändern, also blieb nur der Weg über die direkte Manipulation des DOM.

Den Titel einer Section in der Detailansicht (also wie oben im GIF) können wir wie folgt ansprechen:

document.querySelector('#sub-accordion-section-sectionId .customize-section-title h3').lastChild.textContent

Und den Section-Titel in der Panel-Ansicht so:

document.querySelector('#accordion-section-sectionId .accordion-section-title').childNodes[0].textContent

Um das Verhalten aus dem GIF umzusetzen, benötigen wir den folgenden Code:

;(function (api) {
	api.bind('ready', function () {
		// Listen to changes of the page control value to update the page title in the section head and section title.
		api.control('portfolio_category_page[1][id]', function (control) {
			control.setting.bind(function () {
				var sectionTitle= 'No page selected';

				// Build the title for the section.
				if ('0' !== api.control('portfolio_category_page[1][id]').setting.get() && '' !== api.control('portfolio_category_page[1][id]').setting.get()) {
					// Get the page title.
					var pageSelectElem = document.querySelector('#customize-control-portfolio_category_page-1-id select');
					if (-1 !== pageSelectElem.selectedIndex) {
						sectionTitle= '»' + pageSelectElem.options[pageSelectElem.selectedIndex].text.trim() + '«';
					}
				}

				// Add the page title to the section.
				document.querySelector('#accordion-section-hannover_portfolio_category_page_section\\[1\\] .accordion-section-title').childNodes[0].textContent = sectionTitle;
				document.querySelector('#sub-accordion-section-hannover_portfolio_category_page_section\\[1\\] .customize-section-title h3').lastChild.textContent = sectionTitle;
			});
		});
	});
})(wp.customize);

Wir lauschen auf Veränderungen des Settings der portfolio_category_page[1][id]-Control und prüfen dann, ob der »leere« Select-Wert oder eine Seite ausgewählt wurde (über selectedIndex haben wir Zugriff auf den ausgewählten Wert eines Select-Elements). Falls eine Seite ausgewählt wurde, speichern wir deren Titel in einer Variable und setzen ihn als Wert für die beiden Vorkommen des Section-Titels.

Das könnte auch interessant sein

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.