Wenn ihr im Customizer ein Panel öffnet, kommen entweder direkt Optionen (wie bei dem »Website-Informationen«-Panel) oder Verweise auf Sections, in denen dann die Optionen zu finden sind (wie bei den Menüs). Standardmäßig sehen diese Verweise aus wie im Screenshot unten das Slider settings – der Titel der Section in einem Bereich mit hellerem Hintergrund und rechts einem Pfeil.
Wir möchten das verändern, sodass stattdessen ein beschreibender Text und ein Button angezeigt wird, der dann die Section öffnet – so wie es im Screenshot für Portfolio feature zu sehen ist.
Template für den Section-Head erstellen
Das Markup für den veränderten Head der Section binden wir als Template in den Customizer ein:
<?php
// Include customize control templates into the customizer.
add_action( 'customize_controls_print_footer_scripts', 'hannover_customize_templates' );
/**
* Prints templates into the customizer.
*/
function hannover_customize_templates() { ?>
<script type="text/html" id="tmpl-hannover-no-portfolio-page-notice">
<div class="hannover-customize-control-text-wrapper">
<p class="customize-control-description">
<?php _e( 'It looks like your site does not have a portfolio yet.', 'hannover' ); ?>
</p>
<button type="button" class="button hannover-open-portfolio-page-section-button">
<?php _e( 'Create Portfolio', 'hannover' ); ?>
</button>
</div>
</script>
<?php }
Code-Sprache: PHP (php)
Wir nutzen die customize_controls_print_footer_scripts
-Action und hängen unsere hannover_customize_templates()
-Funktion an. Darin definieren wir innerhalb eines script
-Elements das Markup für unseren späteren Section-Head. Die ID des script
-Elements muss das Präfix tmpl-
haben, damit später das Einsetzen über JavaScript funktioniert.
Section-Head mit Template ersetzen
Um das Template zu verwenden, brauchen wir nur ein paar Zeilen JavaScript (wie die Datei in den Customizer eingebunden wird habe ich in meinem Artikel »Customize-JS-API zur Erstellung von Panels, Sections und Controls nutzen« gezeigt):
;(function (api) {
api.bind('ready', function () {
// Replace section head with custom template.
api.section('hannover_portfolio_page_section').headContainer.find('.accordion-section-title').replaceWith(
wp.template('hannover-no-portfolio-page-notice')
);
// Add click event listener to the portfolio page section button.
panel.container.find('.hannover-open-portfolio-page-section-button').on('click', function () {
api.section('hannover_portfolio_page_section').expand();
});
});
})(wp.customize);
Code-Sprache: JavaScript (javascript)
Nachdem der Customizer bereit ist, suchen wir uns mit der Customize-API den .accordion-section-title
-Container im Head-Container der Section, die wir verändern möchten (bei uns hannover_portfolio_page_section
). Diesen ersetzen wir dann mit unserem Template, das wir über wp.template('hannover-no-portfolio-page-notice')
aufrufen können. Der Parameter für wp.template
muss dabei der id
des Templates ohne das tmpl-
-Präfix entsprechen.
Anschließend fügen wir einen Klick-Event-Listener zu dem Button hinzu und öffnen die Section, wenn er angeklickt wurde.
Original-Markup sichern und wiederherstellen
Wenn ihr später während der Customize-Session das ursprüngliche Markup wiederherstellen müsst, könnt ihr es zwischenspeichern und später darauf zurückgreifen. Das könnte dann so aussehen:
;(function (api) {
api.bind('ready', function () {
// Backup the original markup.
var backup = api.section('hannover_portfolio_page_section').headContainer[0].innerHTML;
// Replace section head with custom template.
api.section('hannover_portfolio_page_section').headContainer.find('.accordion-section-title').replaceWith(
wp.template('hannover-no-portfolio-page-notice')
);
// Add click event listener to the portfolio page section button.
panel.container.find('.hannover-open-portfolio-page-section-button').on('click', function () {
api.section('hannover_portfolio_page_section').expand();
});
document.querySelector('button.hannover-create-portfolio-button').addEventListener('click', function () {
// Restore the original section head markup.
api.section('hannover_portfolio_page_section').headContainer[0].innerHTML = backup;
// Add event listener.
api.section('hannover_portfolio_page_section').container.find('.accordion-section-title').on('click', function () {
api.section('hannover_portfolio_page_section').expand();
});
});
});
})(wp.customize);
Code-Sprache: JavaScript (javascript)
Der mittlere Teil ist bekannt und am Anfang speichern wir einfach das HTML des Head-Containers unserer Section in einer Variable. Am Ende des Codes wird wieder ein Event-Listener genutzt, um nach einem Button-Klick das HTML wiederherzustellen. Dafür weisen wir dem innerHTML
des Head-Container-Elements das gesicherte Original-Markup zu und müssen danach erneut einen Event-Listener erstellen, um nach einem Klick auf den Section-Titel die Section zu öffnen.