Share
In dieser Serie arbeiten wir an einem Plugin, um einen jQuery-Datumsauswahler mithilfe einer Post-Meta-Box in den Post-Editor einzuführen und ihn dann im Front-End der Site anzuzeigen.
Anstatt eine umfangreiche, detaillierte Serie zu einem vertieften Thema in WordPress zu erstellen, ist es das Ziel dieser Serie, sich auf ein sehr Nischenthema zu konzentrieren.
Im ersten Artikel der Serie haben wir Folgendes erreicht:
In diesem Artikel setzen wir die Arbeit fort, indem wir die jQuery-Datumsauswahl implementieren, das Datum im Beitrag speichern und dann das Plugin für die Veröffentlichung vorbereiten.
Wir haben bereits drei der sechs Schritte abgeschlossen, die zur Implementierung unseres Plugins erforderlich sind. Jetzt müssen Sie alle erforderlichen JavaScript-Funktionen einbauen, um den Farbwähler anzuzeigen und die Daten abzurufen.
Dank WordPress ist dies jedoch nicht so schwierig, da vieles, was wir brauchen, bereits in der Kernanwendung enthalten ist.
Um die jQuery-Datumsauswahl zu implementieren, benötigen wir mehrere Abhängigkeiten:
Fügen Sie Ihrem Konstruktor zunächst folgende Zeile hinzu:
Accentsconagua
add_action ('admin_enqueue_scripts', array ($ this, 'register_admin_scripts')); Als Nächstes müssen wir die Funktion definieren, die die jQuery-Datumsauswahlbibliothek sowie unsere eigene benutzerdefinierte JavaScript-Datei einreihen wird.
Also gehen Sie vor und definieren Sie register_admin_scripts und die Zeile für die Aufnahme der jQuery-Datumsauswahl:
/ ** * Registriert adminspezifisches JavaScript. * * @version 1.0 * @since 1.0 * / public function register_admin_scripts () wp_enqueue_script ('jquery-ui-datepicker'); // end register_admin_scripts Als nächstes stellen Sie ein js Verzeichnis in Ihr Plugin und fügen Sie dann ein admin.js Datei in dieses Verzeichnis.
Die Datei sollte das folgende JavaScript enthalten:
(function ($) $ (function () // Überprüfen Sie, ob das Eingabefeld vorhanden ist, wenn (0 < $('#datepicker').length ) $('#datepicker').datepicker(); // end if ); (jQuery)); Einfach ausgedrückt: Diese Datei führt das JavaScript für jede Seite aus, die das Dashboard geladen wird. Dort ist Eine alternative Möglichkeit, dies zu behandeln, würde jedoch den Rahmen dieses Artikels sprengen.
Stattdessen prüfen wir mit JavaScript die Existenz des Elements. Wenn es existiert, dann gilt das Datumsauswahl Plugin zum Element.
Schließlich müssen wir das Stylesheet für jQuery Date Picker mit unserem Plugin registrieren. Fügen Sie dazu die folgende Zeile hinzu register_admin_styles Funktion:
wp_enqueue_style ('jquery-ui-datepicker', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css'); Aktualisieren Sie an dieser Stelle das Plugin, und Sie sollten auf klicken Eingang Element und so etwas sehen:
Ziemlich cool, nicht wahr? Wenn Sie ein Datum auswählen, wird das Datum automatisch auf das Eingabeelement angewendet. Wenn Sie daran interessiert sind, das Datumsformat (oder andere Aspekte der Datumsauswahl) noch weiter anzupassen, sollten Sie sich die API-Dokumente ansehen.
An dieser Stelle können wir das Datum in der aktuellen Position anzeigen. Für unser Plugin werden wir dies dem Inhalt voranstellen.
Definieren Sie dazu den folgenden Hook im Konstruktor Ihres Plugins:
add_action ('the_content', array ($ this, 'prepend_the_date')); Als Nächstes müssen wir die Funktion tatsächlich definieren. Es ist wirklich sehr einfach. Schau es dir an, dann erkläre ich es nach dem Code-Snippet:
/ ** * Speichert die Projektabschlussdaten für die eingehende Post-ID. * * @param int Die aktuelle Post-ID. * @version 1.0 * @since 1.0 * / public function prepend_the_date ($ content) // Wenn das Post-Meta für 'the_date' nicht leer ist, rendern Sie es im Inhalt if (0! = ($ the_date = get_post_meta ( get_the_ID (), 'the_date', true))) $ content = ''. $ the_date. '
'. $ content; // Ende wenn return $ content; // Ende von prepend_the_date
In dieser Funktion überprüfen wir die Post-Metadaten für den aktuellen Beitrag. Da diese Funktion im Kontext von The Loop ausgelöst wird, können wir sie verwenden get_the_ID ().
Wenn der Datumsstring - das ist der Post-Meta - eingegeben von das Datum - ist nicht leer, dann wickeln wir es in ein Absatz-Tag ein und fügen es dem voran $ content; Andernfalls geben wir einfach das zurück $ content wie es ist.
Zu diesem Zeitpunkt gibt es nur noch zwei Dinge zu tun:
Das Erstellen der Lokalisierungsdatei ist einfach. Da haben wir die definiert plugin.po Datei im ersten Artikel. Alles, was wir tun müssen, ist, die Datei mit Poedit zu öffnen, auf "Aktualisieren" zu klicken und die Datei zu speichern. Dies erzeugt eine plugin.mo Datei in der lang Verzeichnis.
Als nächstes müssen wir eine erstellen README Datei, die den WordPress-Readme-Konventionen folgt. Obwohl Sie so kreativ sein können, wie Sie möchten, habe ich meine weiter unten geteilt.
=== WordPress jQuery Date Picker === Mitwirkende: tommcfarlin Tags: date, post Erforderlich mindestens: 3.5 Getestet bis: 3.5.1 Stable-Tag: 1.0 Ein Beispiel-Plugin, mit dem gezeigt wird, wie der jQuery Date Picker in den Beitrag eingefügt wird Editor. == Beschreibung == WordPress jQuery Date Picker ist ein einfaches Plugin, das zeigt, wie Sie benutzerdefinierte Post-Meta-Boxen, Metadaten und jQuery-Plugins nutzen können, um Benutzern die Auswahl von Datumsangaben in ihren Posts zu ermöglichen. == Installation == = Verwenden des WordPress-Dashboards = 1. Navigieren Sie zum Plugin-Dashboard 'Add New'. 2. Wählen Sie 'wordpress-jquery-date-picker.zip' von Ihrem Computer aus. 3. Hochladen 4. Aktivieren Sie das Plugin in WordPress Plugin Dashboard = Mit FTP = 1. Extrahieren Sie 'wordpress-jquery-date-picker.zip' auf Ihren Computer. 2. Laden Sie das Verzeichnis 'wordpress-jquery-date-picker' in Ihr Verzeichnis 'wp-content / plugins'. 3. Aktivieren Sie das Kontrollkästchen das Plugin im WordPress-Plugins-Dashboard == Häufig gestellte Fragen == = Im Moment wird das Datum nur oben im Beitrag angezeigt. Kann ich seine Position ändern? = Nein. == Änderungsprotokoll == = 1,0 = * Erstveröffentlichung
Nichts bahnbrechend - sagt einfach genau, was es tut.
Wenn Sie dies noch nicht getan haben, holen Sie sich die neueste Version des Plugins von GitHub, lesen Sie die Kommentare und folgen Sie den Anweisungen, um sicherzustellen, dass Sie alles über das Plugin verstehen.
Und das ist alles - einfach genug, richtig?
Wie üblich, bitte hinterlassen Sie Kommentare und Fragen im Kommentarformular.
