Accentsconagua

Erstellen eines Plugins für zukünftige Ereignisse in WordPress Erstellen des Widgets

Code
Share

Im letzten Teil der Serie haben wir einen benutzerdefinierten Beitragstyp für Ereignisse registriert. Wir haben das Dashboard angepasst, indem wir eine benutzerdefinierte Metabox und einige benutzerdefinierte Meta-Felder für die Eingabe von Ereignisdaten hinzugefügt haben. Um dem Benutzer die Eingabe von Datumsangaben zu erleichtern, haben wir auch das jpery UI-Datepicker-Steuerelement in das Dashboard integriert. 

Während in WordPress nur der Titel und die Datumsspalte für den benutzerdefinierten Beitragstyp im Post-Admin-Bildschirm angezeigt werden, haben wir eigene benutzerdefinierte Spalten hinzugefügt, um das Startdatum, Enddatum und den Veranstaltungsort des Ereignisses anzuzeigen. Auf diese Weise haben wir den größten Teil des Plugins für zukünftige Events abgeschlossen.

Im letzten Teil dieser Serie werden wir:

  • Schauen Sie sich die WordPress-Widget-API an
  • Registrieren Sie ein Widget, um eine Liste der anstehenden Ereignisse anzuzeigen
  • Fragen Sie die Datenbank mit der Klasse WP_Query nach anstehenden Ereignissen ab
  • Machen Sie eine Meta-Abfrage, um Datumsangaben zu vergleichen, damit nur die zukünftigen Ereignisse angezeigt werden

Lassen Sie uns eintauchen, da wir von Grund auf ein WordPress-Widget erstellen.

WordPress Widgets API

Wir können uns Widgets als Codeblöcke vorstellen, die einer Site bestimmte Funktionen hinzufügen sollen. Dies kann alles aus einem Kalender, Social-Sharing-Schaltflächen, einem Bewertungssystem oder einem Testimonial-Schieberegler sein. Ein Benutzer kann sie ganz einfach zur Site hinzufügen oder daraus entfernen, indem er sie einfach zieht.

WordPress-Widgets können durch Erweitern des erstellt werden WP_Widget Klasse, die WordPress bietet. Diese Klasse enthält erforderliche Methoden und Eigenschaften, damit ein Widget funktionieren kann. Dazu gehören Funktionen, um ein Widget zu initialisieren, die Benutzeroberfläche im Administrator anzuzeigen, ihre verschiedenen Instanzen zu aktualisieren, die neuen Einstellungen in der Datenbank zu speichern und sie am Font-Ende anzuzeigen.

Wir werden vier Funktionen aus der Basisklasse erweitern, um die Funktionalität unseres Widgets zu definieren:

  1. __konstruieren()
  2. bilden()
  3. aktualisieren()
  4. Widget ()

Lassen Sie uns zu jedem von ihnen einen Überblick haben:

__konstruieren()

Das __konstruieren() Methode initialisiert das Widget. Es legt den Namen des Widgets, die Basis-ID und andere Informationen wie Beschreibung und Widget-Klasse usw. fest.

bilden()

Dies ist die Funktion, die das Einstellungsformular im Dashboard ausgibt. Das Formular kann Felder für verschiedene Optionen enthalten, um das Aussehen und die Funktionalität des Widgets im Frontend anzupassen. Das bilden() Die Methode akzeptiert ein Argument für die Instanz des Widgets.

aktualisieren()

Diese Methode stellt sicher, dass das Widget aktualisiert wird, wenn eine neue Einstellung auf eine Instanz des Widgets angewendet wird. Es akzeptiert zwei Argumente: eines für die alte Instanz und eines für die neue Instanz des Widgets.

Widget ()

Diese Methode gibt den Inhalt des Widgets an das Front-End der Site aus. Hier definieren wir, was die Benutzer beim Besuch der Website sehen sollen. Diese Methode akzeptiert zwei Argumente:

  1. $ widget_args: Dies ist ein Array mit den erforderlichen Informationen zum Widget
  2. $ Instanz: Die Instanz des anzuzeigenden Widgets

Wir werden diese Methoden und ihre Argumente in Kürze näher betrachten. Jetzt registrieren wir unsere Widget-Klasse.

Widget registrieren

Erstellen Sie im Stammordner des Plugins ein neues Verzeichnis mit dem Namen inc für umfasst. Erstellen Sie in diesem Verzeichnis eine Datei mit dem Namen widget-coming-events.php. Wir werden den gesamten Widget-Code in diese Datei schreiben, um die Dinge sauber und überschaubar zu halten.

Wir beginnen damit, die übergeordnete Widget-Klasse so zu erweitern:

Um das Widget zu registrieren, verwenden wir die register_widget () Funktion in Verbindung mit dem widgets_init Haken:
 
Funktion uep_register_widget () register_widget ('Upcoming_Events');  add_action ('widgets_init', 'uep_register_widget');
Das register_widget () Funktion akzeptiert den Namen der erweiterten Klasse als Argument.
 
In der Kommende Veranstaltungen Klasse werden wir unsere vier Methoden definieren, nach denen wir uns im vorherigen Abschnitt befasst haben:
 
Im nächsten Schritt schreiben wir Code für jeden von ihnen und schauen uns genauer an, wie sie funktionieren. Fügen Sie jedoch vorher die folgende Codezeile am Ende von ein coming-events.php Haupt-Plugin-Datei zum Einfügen des Widgets:
 
include ('inc / widget-coming-events.php');
Das __konstruieren() Methode
 
Wenn Sie einen Hintergrund in OOP haben, wissen Sie sicherlich, was Konstruktoren sind. Konstruktoren sind für Anfänger spezielle Funktionen in einer Klasse, die automatisch aufgerufen werden, wenn ein Objekt dieser Klasse instanziiert wird. 
Da wir über eine Klasse für ein Widget verfügen, benötigen wir eine Funktion, die bestimmte Elemente wie die ID und den Namen des Widgets einrichtet, wenn das Widget instanziiert wird __konstruieren() Methode kommt ins Spiel.
 
Das __konstruieren() Die Methode der übergeordneten Klasse akzeptiert drei Argumente:
 
     
  1.  $ base_id: Die eindeutige ID für das Widget
    2.  
  2.  $ title: Der Titel des Widgets im Adminbereich. Sollte für die Übersetzung markiert werden
    3.  
  3.  $ widget_ops: Ein Array mit anderen Widgetoptionen wie Widget - Klasse und Widgetbeschreibung usw
    4.  
 
Jetzt wissen wir was __konstruieren() tut und welche Argumente akzeptiert, schreiben wir Code dafür:
public function __construct () $ widget_ops = array ('class' => 'uep_upcoming_events', 'description' => __ ('Ein Widget zum Anzeigen einer Liste anstehender Ereignisse', 'uep')); parent :: __ construct ('uep_upcoming_events') // Basis-ID __ ('Bevorstehende Ereignisse', 'uep'), // title $ widget_ops); 
In dem __konstruieren() Methode unseres Widgets, haben wir einen Aufruf an die __konstruieren() Methode der übergeordneten Klasse, bezeichnet mit parent :: __ construct () und übergab drei Argumente für Basis-ID, Titel und Widget-Optionen. Beachten Sie auch, dass die Zeichenfolgen für die Übersetzung mit markiert werden __ () Funktion.
Das bilden() Methode
 
Das bilden() Als Methode definieren wir den Körper unseres Widgets, der im WordPress-Admin angezeigt wird. Es akzeptiert ein Argument $ Instanz für die Instanz des Widgets.
 
Wir müssen dem Benutzer ein Textfeld zur Eingabe des Widget-Titels zur Verfügung stellen. Außerdem sollte er oder sie in der Lage sein, zwischen der Anzahl der Ereignisse zu wählen, die er auf der Website anzeigen möchte. Diese Felder sollten jedoch auch einige Standardwerte enthalten, falls der Benutzer keine eigenen eingeben möchte.
 
Zuerst definieren wir die Standardwerte für unsere Felder:
$ widget_defaults = array ('title' => 'Upcoming Events', 'number_events' => 5); $ instance = wp_parse_args ((array) $ instance, $ widget_defaults);

Wir haben unsere Standardwerte in einem Array mit Schlüsseln als Feldnamen definiert. Wir haben dann die verwendet wp_parse_args () Dienstprogrammfunktion, die ein Array von Argumenten zusammenführt (in unserem Fall) - $ Instanz) mit einem Array von Standardwerten (in diesem Fall - $ widget_defaults). Beachten Sie auch, dass wir den Typ typisiert haben $ Instanz als Array.
 
Es ist Zeit, Formularfelder für den Titel und die Anzahl der Ereignisse zu rendern. Beginnen wir mit dem Erstellen eines Textfelds für den Titel:
   

Als Erstes haben wir einen Absatz als Containerelement erstellt (obwohl Sie genauso einfach ein a verwenden könnten div). Dann haben wir eine Beschriftung für das Eingabefeld erstellt. Wir müssen es nicht manuell angeben, da WordPress sich selbst darum kümmert. Es stellt uns einige Hilfsfunktionen zur Verfügung, um besser mit Feldnamen und IDs arbeiten zu können. Jedes Mal, wenn wir eine Instanz des Widgets erstellen, wird für jedes Feld im Formular eine eindeutige ID und ein eindeutiger Name generiert, sodass wir so viele Instanzen des gleichen Widgets erstellen können.
 
Die Methode zum Generieren der Feld-ID lautet get_field_id () vorangestellt von a $ this->, So kann man sagen, dass diese Methode zur selben Klasse gehört. Diese Methode ist bereits in der Basis definiert WP_Widget Klasse und da wir sie um unsere eigene Klasse erweitert haben, ist sie sofort verfügbar. Die Methode akzeptiert ein Argument für das Feld, für das wir eine ID generieren.
 
Wir haben den Etikettentext für die Übersetzung mit markiert _e () Funktion.
 
Die nächste Methode, die wir verwendet haben, ist get_field_name () das funktioniert genauso wie get_field_id () Sie generiert jedoch einen Wert für das Namensattribut des Felds.
 
Die Klasse widefat Wir haben dem Eingabefeld eine Standard-WordPress-Klasse zugewiesen, die die Eingabefelder im WordPress-Admin formatiert.
 
Dann haben wir für das Wertattribut des Eingabefelds einfach den Inhalt von wiedergegeben $ Instanz ['Titel'] während es durch die esc_attr () Funktion zum Kodieren unerwünschter Zeichen.
 
Fügen Sie den folgenden Code in der Dropdown-Liste select (Auswahl) hinzu, um die Anzahl der anzuzeigenden Ereignisse anzugeben bilden() Methode:
   

Der Code entspricht im Wesentlichen dem Code für das Titelfeld, mit der Ausnahme, dass eine Schleife zum Erstellen der Option-Tags ausgeführt wurde. Um zu prüfen, ob momentan eine Option ausgewählt ist, haben wir eine andere WordPress-Dienstprogrammfunktion verwendet ausgewählt() das vergleicht zwei gegebene Werte (in diesem Fall) - $ i und $ instance ['number_events']) und fügt dann die ausgewählt Attribut zum aktuellen Optionstag, wenn die Werte gleich sind.
 
Das ist alles über das bilden() Methode. Wir müssen jetzt sicherstellen, dass unser Widget aktualisiert wird, wenn eine neue Änderung angewendet wird.
 
Das aktualisieren() Methode
 
Das aktualisieren() Diese Methode macht es so, dass wir die von einem Widget verwalteten Werte aktualisieren können. Es akzeptiert zwei Argumente $ old_instance und $ new_instance und gibt die aktualisierte Instanz des Widgets zurück. 
Der Code ist ziemlich einfach:
Aktualisierung der öffentlichen Funktionen ($ new_instance, $ old_instance) $ instance = $ old_instance; $ instance ['title'] = $ new_instance ['title']; $ instance ['number_events'] = $ new_instance ['number_events']; $ Instanz zurückgeben; 

Jedes Mal, wenn eine Änderung an einer Instanz des Widgets vom Benutzer vorgenommen wurde, wird die aktualisieren() Die Methode aktualisiert die Einstellungen in der Datenbank, sodass das Widget mit den neuen Einstellungen aktualisiert wird.
 
Das Widget () Methode
 
Dies ist die wichtigste Methode, da der beabsichtigte Inhalt im Frontend der Site angezeigt wird. Es akzeptiert zwei Argumente $ args und $ Instanz. Das $ args Array enthält folgende Elemente:
 
     
  1.  $ name: Der Name der Seitenleiste, in der das Widget angezeigt wird
    2.  
  2.  $ id: Die ID der respektierten Seitenleiste
    3.  
  3.  $ beschreibung: Die Beschreibung der Seitenleiste
    4.  
  4.  $ class: Die Sidebar-Klasse
    5.  
  5.  $ before_widget: Der HTML-Code, der vor dem Widget stehen würde. Könnte ein öffnendes Tag des enthaltenden Elements sein
    6.  
  6.  $ after_widget: Das HTML, das nach dem Widget kommen würde. Im Allgemeinen ein schließendes Tag des enthaltenden Elements
    7.  
  7.  $ before_title: Der HTML-Code, der vor dem Titel des Widget platziert wird
    8.  
  8.  $ after_title: Der HTML-Code, dem der Titel des Widgets vorangestellt ist
    9.  
  9.  $ widget_id: Die ID dieser bestimmten Instanz des Widgets. Dies ist NICHT die Basis-ID des Widgets
    10.  
  10.  $ widget_name: Der Name des Widgets, der bei der Registrierung des Widgets übergeben wird
    11.  
 
Wenn Sie jemals eine Sidebar für ein WordPress-Theme registriert haben, werden die ersten acht Elemente des $ args Array sollte Ihnen bekannt vorkommen. Die letzten beiden Elemente sind Widget-spezifisch.
 
Extrahieren wir das $ args Array und wende das an widget_title filtern Sie nach dem Widget-Titel:
Widget für öffentliche Funktionen ($ args, $ instance) extract ($ args); $ title = apply_filters ('widget_title', $ instance ['title']); 

Nun ist es an der Zeit, die Abfrage für das Abrufen einer Ereignisliste vorzubereiten. Wir werden die verwenden WP_Query Klasse für diesen Zweck zusammen mit der Meta-Abfrage:
$ query_args = array ('post_type' => 'event', 'posts_per_page' => $ instance ['number_events'], 'post_status' => 'publish', 'ignore_sticky_posts' => true, 'meta_key' => 'event -start-date ',' orderby '=>' meta_value_num ',' order '=>' ASC '); $ coming_events = new WP_Query ($ query_args);
Da wir unsere Ereignisse in aufsteigender Reihenfolge nach ihrem Startdatum sortieren möchten, haben wir das festgelegt meta_key zum Startdatum der Veranstaltung Meta-Wert unserer Veranstaltungen. Zusammen mit diesem haben wir WordPress mitgeteilt, dass wir hier Zahlen (nicht die Zeichenfolgen) vergleichen, indem Sie das setzen Sortieren nach zu meta_value_num. Wenn du eingestellt hast Sortieren nach um nur meta_value, WordPress wird den Vergleich so durchführen, als würde es Strings vergleichen, und das wollen wir nicht.
 
Die obige Abfrage ruft die angegebene Anzahl von Ereignissen in aufsteigender Reihenfolge in Bezug auf ihre Startdaten ab. Wir möchten aber auch Ereignisse herausfiltern, die bereits vergangen sind, d. H Enddatum der Veranstaltung Der Metawert ist kleiner als der aktuelle Zeitstempel. Um dies zu erreichen, werden wir eine Meta-Abfrage übergeben, die das Enddatum überprüft:
$ meta_quer_args = array ('relation' => 'AND', array ('key' => 'event-end-date', 'value' => time (), 'compare' => '> =')); $ query_args = array ('post_type' => 'event', 'posts_per_page' => $ instance ['number_events'], 'post_status' => 'publish', 'ignore_sticky_posts' => true, 'meta_key' => 'event -start-date ',' orderby '=>' meta_value_num ',' order '=>' ASC ',' meta_query '=> $ meta_quer_args); $ coming_events = new WP_Query ($ query_args);

Im obigen Code haben wir das verglichen Enddatum der Veranstaltung Metawert, der größer oder gleich dem aktuellen Zeitstempel ist. Jetzt nur noch die Ereignisse mit ihren Enddatum der Veranstaltung Meta-Werte, die größer als der aktuelle Zeitstempel sind, d. h. die in der Zukunft anstehenden Ereignisse werden abgerufen.
 
Nachdem wir die Ereignisse abgerufen haben, beginnen wir damit, den Inhalt unseres Widgets auszuspähen:
echo $ before_widget; if ($ title) echo $ before_title. $ title $ after_title; ?> 
     have_posts ()): $ coming_events-> the_post (); $ event_start_date = get_post_meta (get_the_ID (), 'event-start-date', true); $ event_end_date = get_post_meta (get_the_ID (), 'event-end-date', true); $ event_venue = get_post_meta (get_the_ID (), 'event-venue', true); ?> 
  •  
    "> beim 
       
    •   
 "> Alle Ereignisse anzeigen 
Der obige Code sollte selbsterklärend sein: Wir haben zuerst den Inhalt von wiedergegeben $ before_widget als öffnendes Tag des enthaltenden Elements. Dann haben wir geprüft, ob das Widget einen Titel hat. Wenn ja, druckten wir es aus, während er es umwickelte $ before_title und $ after_title. 
Danach haben wir die abgerufenen Ereignisse durchlaufen und deren Titel, Auszüge und andere Informationen wie Datum und Ort ausgedruckt. Am Ende haben wir mit der Funktion einen Link zu ihrer Archivseite hinzugefügt get_post_type_archive_link () Dadurch wird ein Permalink zur Archivseite des angegebenen Beitragstyps zurückgegeben. Dann haben wir unser Widget durch das Echo von $ after_widget schließendes Tag.
Lassen Sie uns einige grundlegende Stile für unser Widget in der css / style.css Datei:
.uep_event_entry margin-bottom: 21px;  .uep_event_entry h4 margin-bottom: 3px;  .uep_event_entry h4 a Textdekoration: keine; Farbe: erben;  .uep_event_entry .event_venue font-size: 0.9em; Farbe: # 777777; Schriftgewicht: normal; Schriftstil: kursiv;  .uep_event_entry p margin-bottom: 3px! important;  .uep_event_entry .uep_event_date font-size: 0.9em; Farbe: # 777777; 

Jetzt müssen wir diese Datei im Frontend einfügen, aber nur, wenn unser Widget gerade aktiviert ist. Wir werden prüfen, ob unser Widget derzeit im Frontend angezeigt wird, indem Sie die is_active_widget () Funktion, die vier Argumente akzeptiert und alle optional sind:
     
  1.  $ Rückruf: Der zu überprüfende Widget-Rückruf
    2.  
  2.  $ widget_id: Widget-ID Wird zur Überprüfung benötigt
    3.  
  3.  $ id_base: Die Basis-ID des Widgets, wie sie im übergeben wird __konstruieren() Methode
    4.  
  4.  $ skip_inactive: Ob die inaktiven Widgets übersprungen werden sollen
    5.  
Fügen Sie den folgenden Code unter dem hinzu uep_admin_script_style () Funktion in der coming-events.php Haupt-Plugin-Datei:
Funktion uep_widget_style () if (is_active_widget (",", 'uep_upcoming_events', true)) wp_enqueue_style ('coming-events', STYLES. 'coming-events.css', false, '1.0', 'all');  add_action ('wp_enqueue_scripts', 'uep_widget_style');

Daher haben wir zunächst geprüft, ob das Widget gerade aktiv ist. In diesem Fall haben wir das Stylesheet mit dem Befehl in die Warteschlange gestellt wp_enqueue_style () Funktion.
Das ist alles über das Widget () Methode. Wir haben erfolgreich ein Widget erstellt, das eine Liste anstehender Ereignisse zusammen mit den anderen zugehörigen Informationen anzeigt.
Regeln zum Überschreiben von Flushing
 
Wir haben unser Plugin und das Widget fast fertiggestellt, aber wir haben immer noch ein kleines Problem - klicken Sie auf einen der Event-Titel und Sie erhalten möglicherweise die Fehlermeldung "Seite nicht gefunden". Das liegt daran, dass wir, wenn wir einen Beitragstyp über ein Plugin registrieren, die Regeln bei der Aktivierung des Plugins umschreiben müssen, damit die Permalink-Struktur ordnungsgemäß funktioniert. 
Sie können Ihre Links durch Ändern der Permalink-Struktur zum Laufen bringen, aber das ist nicht der ideale Weg. Daher werden die Regeln jedes Mal, wenn unser Plugin aktiviert wurde, die Regeln zum Überschreiben überschreiben.
 
Fügen Sie den folgenden Code in Ihr ein coming-events.php Datei:
Funktion uep_activation_callback () uep_custom_post_type (); flush_rewrite_rules ();  register_activation_hook (__FILE__, 'uep_activation_callback');

Also haben wir den Aktivierungshaken für unser Plugin mit dem registriert register_activation_hook () Funktion, die zwei Argumente akzeptiert:
     
  1.  $ file: Der Pfad zur Haupt-Plugin-Datei
    2.  
  2.  $ Funktion: Die Callback-Funktion wird ausgeführt, wenn das Plugin aktiviert ist
    3.  
 In der Callback-Funktion unseres Hooks haben wir zunächst den benutzerdefinierten Post-Typ von Ereignissen mithilfe der Funktion in die Datenbank eingefügt uep_custom_post_type () Wir hatten zuvor in unserem vorherigen Tutorial definiert. 
Wir haben dann die Regeln für das Umschreiben mit der flush_rewrite_rules () Funktion. Jetzt möchten Sie möglicherweise das Plugin deaktivieren und es wieder aktivieren, um sicherzustellen, dass die Regeln zum Umschreiben gelöscht wurden. Ihre Links sollten nun einwandfrei funktionieren und Sie auf die einzelne Seite des Ereignisses umleiten.
 
Fazit
 
Dies war ein recht langes Tutorial, in dem wir viel Code geschrieben und verschiedene WordPress-Funktionen angeschaut haben. Wir haben ein WordPress-Widget von Grund auf erstellt, indem wir das übergeordnete Element erweitert haben WP_Widget Klasse und betrachtete die Member-Funktionen, die diese Klasse bereitstellt, um die Funktionalität unseres Widgets zu definieren. Wir haben auch eine Anfrage geschrieben, die die Macht von nutzt WP_Query Klasse, um eine Liste von Ereignissen abzurufen, die nach ihren Metawerten gefiltert sind.
 
Damit schließen wir auch unsere dreiteilige Serie ab. Ich hoffe, dass diese Serie neuen Lesern helfen wird, die gerade mit WordPress anfangen und auch denen, die ihr Wissen über die Entwicklung von WordPress-Plugins und Widgets erweitern möchten.
 
Den vollständigen Code des Plugins finden Sie auf meiner GitHub-Seite. Nachfolgend finden Sie einige Links zur weiteren Erkundung der in diesem Tutorial behandelten Themen:
     
  •  WordPress Widgets API
    •  
  • Klassenreferenz: WP_Query
    •  
  • Beherrschen von WordPress-Metadaten: Eine Einführung in Metadaten
    •  
  •  Objektorientierte Programmierung in WordPress: Eine Einführung
    •  






	
	
			
	   
	







Code
×