Anwenden von jQuery UI Datepicker Theme für WordPress 3.8 und höher

WordPress hat sich seit Version 3.8 stark verändert, insbesondere das Admin-UI-Theme. Folgt den Massen, die WordPress-Admin-Benutzeroberfläche sieht jetzt flacher aus, entfernt von Farbverläufen und Schatten . Das heißt, wenn Sie ein Design oder ein Plug-in haben , das eine angepasste Benutzeroberfläche verwendet, ist es Zeit für eine Überarbeitung .

Als Beispiel, hier habe ich Data Picker in der Nachbearbeitung Bildschirm hinzugefügt. Und wie Sie unten sehen können, scheint die Benutzeroberfläche des Kalenders etwas fehl am Platz zu sein.

Wenn Sie das gleiche Problem haben, folgen Sie diesem Artikel, da wir Ihnen zeigen, wie Sie dies anpassen können, damit Ihre angepasste Benutzeroberfläche einheitlicher mit dem neuesten WordPress-Admin-Thema aussieht.

JQuery hinzufügen

Bevor Sie fortfahren, lassen Sie mich zuerst zeigen, wie ich Date Picker im WordPress-Postbereich hinzugefügt habe, wie Sie es oben gesehen haben.

Zu Beginn laden wir das jQuery-UI-Skript und die Stile in den WordPress-Administratorbildschirm. Fügen Sie diese Codes in der Datei functions.php Ihres Themes hinzu.

 Funktion hkdc_admin_styles () {wp_enqueue_style ('jquery-ui-datepicker-style', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css'); } add_action ('admin_print_styles', 'hkdc_admin_styles'); Funktion hkdc_admin_scripts () {wp_enqueue_script ('jquery-ui-datepicker'); } add_action ('admin_enqueue_scripts', 'hkdc_admin_scripts'); 

Dann fügen wir eine Meta-Box hinzu, die den Kalender anzeigt.

 Funktion hkdc_post_date_field () {echo '  '; } Funktion hkdc_post_date_meta_box () {add_meta_box ('entry_post_date', 'Datum', 'hkdc_post_date_field', 'post', 'side', 'default'); } add_action ('add_meta_boxes', 'hkdc_post_date_meta_box'); 

Nach dem Hinzufügen der Zeilen oben, sollte eine neue Meta-Box mit einem Eingabefeld in Ihrem WordPress Post-Editing-Bildschirm erscheinen. Aber es wird noch nichts passieren, da wir den jQuery Date Picker in das Eingabefeld einleiten müssen.

Erstellen wir eine neue JavaScript-Datei namens admin.js und fügen Sie die folgenden JavaScript-Codes hinzu. Speichern Sie es in einem Ordner namens js .

 (function ($) {$ ('# jquery-datepicker'). datepicker ();} (jQuery)); 

wp_enqueue_script( 'jquery-ui-datepicker' ); dann die folgende Zeile unter wp_enqueue_script( 'jquery-ui-datepicker' ); um die admin.js zu laden.

 wp_enqueue_script ('wp-jquery-date-picker', get_template_directory_uri (). '/js/admin.js'); 

Sie sollten nun die Datenauswahl sehen, wenn Sie den Cursor in das neue Eingabefeld setzen. Bitte beachten Sie, dass dies nur zur Demonstration dient. Das neue Eingabefeld ist noch nicht voll funktionsfähig; Die Eingabe übergibt die Daten noch nicht an die Datenbank, wenn Sie auf die Schaltfläche Aktualisieren klicken.

Sie werden einige Codes benötigen, um dies zu ermöglichen. Aber zumindest könnte dieser Code Ihnen den Einstieg erleichtern.

Hinzufügen eines neuen Datumsauswahlthemas

Dieses Date Picker Theme, das wir verwenden werden, wurde von X-Team Developers entwickelt. Es kommt mit acht WordPress-Admin-Farbschema nämlich Fresh, Light, Blue, Kaffee, Ektoplasma, Mitternacht, Ocean und Sunrise (schauen Sie sich unsere vorherige Post, Customize WordPress Admin Color Scheme). Es kommt auch LESS und Sass-Format, das es leicht anpassbar macht.

Sie können die Quelle von ihrem Github-Repository herunterladen. Kopiere das CSS-Stylesheet und lege es in das css- Verzeichnis deines Themes. hkdc_admin_styles Sie dann diese Zeile in hkdc_admin_styles, um das Stylesheet auf dem WordPress Admin-Bildschirm zu laden.

 wp_enqueue_style ('wp-jquery-ui-datepicker', get_template_directory_uri (). '/css/datepicker.css'); 

Das ist es. Wie Sie unten sehen können, entspricht das Thema dem WordPress "Default" Admin Theme. Es wird sich entsprechend dem ausgewählten Thema des Benutzers ändern.

Letzter Gedanke

Nach meiner Erfahrung könnte das Erstellen eines benutzerdefinierten Themas für jQuery-Datumsauswahl wirklich entmutigend sein. Zum Glück haben die X-Team-Entwickler die ganze Arbeit für Sie erledigt. Dieses Stylesheet muss unbedingt aufgenommen werden, wenn Sie ein Design oder ein Plug-in mit jQuery UI Date Picker erstellen.

12 Chrome-Erweiterungen, um das Beste aus Google Drive herauszuholen

Kein Zweifel, Google Drive ist ein erstaunlicher synchronisierter Cloud-Speicherdienst, mit dem Sie Ihre Dateien, Ordner, Fotos und Videos von überall aus sicher speichern und darauf zugreifen können.Um die Benutzerfreundlichkeit zu verbessern und mehr aus Google Drive herauszuholen, steht eine große Anzahl verschiedener Erweiterungen zur Verfügung. In

(Tech- und Design-Tipps)

Richten Sie eine benutzerdefinierte Domäne für Github-Seiten ein

Neben Github Pages bietet Github auch die Möglichkeit, einen eigenen Domainnamen für die von uns erstellte Seite zu verwenden. Anstatt also das folgende Namensformat zu verwenden: {username}.github.io/{project-name}, können Sie den Blog stattdessen wie www.myawesomeblog.com .Dies ist eine großartige Gelegenheit für ein kostenloses Open-Source-Projekt mit dem Mangel an finanzieller Unterstützung für ihre Website oder Blog. Sie m

(Tech- und Design-Tipps)