Wiederverwendbare benutzerdefinierte Meta-Boxen Teil 3 Zusätzliche Felder

In Teil 1 und Teil 2 unserer Tutorial-Serie für benutzerdefinierte Meta-Box-Vorlagen haben wir gelernt, wie Sie ein Feld-Array erstellen, das durchlaufen werden kann, und eine benutzerdefinierte Meta-Box mit Ihren Standardfeldern erstellen. Lassen Sie uns jetzt ein wenig JavaScript für ein paar ausgefallene, aber äußerst nützliche Felder hinzufügen.

Datumsauswahl

Für jedes der in diesem Tutorial behandelten Felder sind jQuery und die jQuery-Benutzeroberfläche erforderlich. Glücklicherweise macht es WordPress sehr einfach, diese mit zu verwenden wp_enqueue_script, und ab 3.3 sind alle Interaktionen und Widgets der jQuery-Benutzeroberfläche mit WordPress gebündelt.

Da wir gerade an einer Seite arbeiten, die jQuery bereits in eine Warteschlange stellt, können wir dies überspringen, müssen jedoch die jQuery-Benutzeroberfläche Datepicker verwenden. Wir müssen auch ein eigenes Stylesheet erstellen, da das erforderliche CSS noch nicht in WordPress gebündelt ist - obwohl das funktioniert.

 if (is_admin ()) wp_enqueue_script ('jquery-ui-datepicker'); wp_enqueue_style ('jquery-ui-custom', get_template_directory_uri (). '/ css / jquery-ui-custom.css'); 

Wir müssen diese nur in den Admin laden und nicht in das Front-End der Site, also wickeln Sie die Funktionen in eine Bedingung. Die erste Funktion ruft den Datepicker auf und lädt auch den jQuery-UI-Core. Die zweite Funktion ruft unser jquery-ui-custom.css-Stylesheet aus dem CSS-Ordner des Themas auf. Für das im Download am Anfang dieses Tutorials enthaltene Beispiel-Stylesheet sind keine Bilder erforderlich. Sie können auch ein eigenes jQuery-UI-Design erstellen.

Schauen wir uns nun das Array-Element an, das wir zu unserem hinzufügen müssen $ custom_meta_fields Array haben wir in Teil 1 begonnen.

 array ('label' => 'Date', 'desc' => 'Eine Beschreibung für das Feld.', 'id' => $ prefix.'date ',' type '=>' date ')

Dieses Array ist fast identisch mit unserem Textelement. Es hat ein Hauptetikett, eine Beschreibung, eine eindeutige ID und der Datumstyp ist definiert. Wir gehen in unserem Beispiel hier nur auf eine grundlegende Implementierung der Datumsauswahl ein. Wenn Sie jedoch die Verwendung der Datumsauswahl stärker hervorheben möchten, können Sie dem Array auch weitere Informationen hinzufügen, z. B. das bevorzugte Format, die Lokalisierung und Datumsbereich, um nur einige zu nennen. Dann könnten Sie diese Informationen in dem folgenden Skriptaufruf verwenden, den Sie dem Kopf der Seite hinzufügen müssen:

 add_action ('admin_head', 'add_custom_scripts'); Funktion add_custom_scripts () global $ custom_meta_fields, $ post; $ output = ''