WordPress Metaboxen – Eine Kurzanleitung

WordPress-Meta-Boxen sind ziehbare Boxen, die in Ihrem Bearbeitungsbildschirm angezeigt werden und zur Handhabung zusätzlicher Daten wie Taxonomie-Begriffe verwendet werden. In diesem Artikel werfen wir einen Blick auf WordPress-Metaboxen und sehen, wie wir unsere eigenen benutzerdefinierten erstellen können, wie wir die von uns vorgenommenen Änderungen speichern und wie wir ihren Inhalt auf dem Frontend unserer Website anzeigen können.

Lass uns anfangen!

Benutzerdefinierte Felder, Metaboxen und Metadaten

Es gibt viel Verwirrung über den Unterschied zwischen diesen drei Begriffen. Werfen wir einen Blick auf alle drei, um besser zu verstehen, was sie sind und wie sie funktionieren.

Metadaten

Die Metadaten eines Beitrags sind die zusätzlichen Informationen über einen Beitrag, die in der postmeta-Tabelle der Datenbank gespeichert sind.

Jedes Schlüssel/Wert-Paar wird als „Post-Feld“ betrachtet. Es gibt keine Begrenzung, wie viele Meta-Einträge diese Tabelle haben kann.

Benutzerdefinierte Felder

Es gibt Felder, die von WordPress vordefiniert sind, wie das Feature-Bild, die technisch benutzerdefinierte Felder sind. Andere können durch ein Plugin oder benutzerdefinierten Code hinzugefügt und vom Administratorbenutzer definiert werden. Sie können mehr über benutzerdefinierte Felder erfahren, indem Sie unseren Artikel „Erste Schritte mit benutzerdefinierten WordPress-Feldern“ lesen.

Metaboxen

Wenn Sie einen WordPress-Beitrag öffnen, um ihn zu bearbeiten, sehen Sie, dass die Seite in verschiedene Abschnitte unterteilt ist (von denen sich viele in der Seitenleiste auf der rechten Seite befinden).

Alle diese Abschnitte sind technisch gesehen „Meta-Boxen“. Der Haupt-Post-Editor, die Container für die Auswahl von Kategorien, das Veröffentlichen des Posts, das Hinzufügen von Tags und das Hinzufügen eines vorgestellten Bilds sind also Metaboxen, die HTML-Elemente enthalten, die mit den Metadaten des Posts interagieren. Je nachdem, wie die Website mit den Metadaten umgeht, erscheinen diese Felder an unterschiedlichen Stellen auf Ihrem Bildschirm.

Sehen wir uns als weiteres Beispiel die Metabox Featured Image an. Dies befindet sich normalerweise in der rechten Seitenleiste des Admin-Bildschirms eines Beitrags. Dort können Sie das Bild einfach ändern. Wenn Sie dies tun, aktualisieren Sie tatsächlich die _thumbnail_id der Metadaten dieses Beitrags.

Eine benutzerdefinierte Feld-Metabox, wie die „Quelle“ (die wir in unserem Tutorial zu benutzerdefinierten Feldern hinzugefügt haben), befindet sich normalerweise unter dem Haupt-Post-Editor.

Erstellen einer Meta-Box für unseren benutzerdefinierten Beitragstyp

Jetzt haben wir eine klarere Vorstellung davon, was genau Metaboxen sind, und wir können weitermachen und unsere eigene benutzerdefinierte Metabox für unsere Website erstellen. Dieses Tutorial knüpft an unser Tutorial zu benutzerdefinierten Beitragstypen an. Wenn Sie Schritt für Schritt folgen möchten, müssen Sie sich diesen Artikel ansehen und einen benutzerdefinierten Beitragstyp namens „Rezepte“ erstellen und dann einige „Rezepte“ einrichten ' Testposts mit ausgewähltem Beitragsbild.

In diesem Tutorial werden wir unseren benutzerdefinierten Beitragstyp erweitern, indem wir ein neues Meta-Feld hinzufügen, das verwendet wird, um zu definieren, ob das Rezept vegan ist oder nicht, indem wir ein Kontrollkästchen aktivieren.

Schritt 1 – Registrieren Sie die Meta Box

Um eine Metabox in unseren benutzerdefinierten Beitragstyp hinzuzufügen, verwenden wir die von WordPress bereitgestellte add_meta_box Funktion. Hier ist die Struktur der Funktion mit den Argumenten, die wir verwenden werden:

 add_meta_box( $id, $title, $callback, $screen, $context )

Für die eindeutige ID verwenden wir is_vegan und für den Titel der Metabox die Zeichenfolge Is Vegan .

Die Callback-Funktion zum Anzeigen des Boxinhalts ist display_vegan_meta_box . Das $screen Attribut bezieht sich auf den Admin-Bildschirm, auf dem die Meta-Box angezeigt wird. In unserem Fall ist dies der Post-Edit-Bereich des Rezepts, also der eindeutige Name des Post-Typs, der, wie bereits erwähnt, recipes ist. Der $context Parameter variiert je nach Admin-Bildschirm.

Die hier verwendeten Kontexte des Post-Bearbeitungsbildschirms umfassen Normal, Side und Advanced als verfügbare Kontextwerte. Wir werden den Seitenwert verwenden, um das Meta-Feld in der Seitenleiste der Post-Bearbeitungsseite anzuzeigen.

Zusammenfassend sollte der Code, den wir in unserer my-custom-post-type.php hinzufügen sollten, unter Verwendung der oben definierten Parameter wie folgt aussehen:

 function my_metabox() { add_meta_box( 'is_vegan', 'Is Vegan', 'display_vegan_meta_box', 'recipes', 'side' ); } add_action( 'admin_init', 'my_metabox' );

Wie Sie sehen werden, haben wir den Hook admin_init verwendet, der vor allen anderen Hooks ausgelöst wird, wenn ein Benutzer auf den Admin-Bereich zugreift.

Wenn Sie jetzt die Bearbeitungsseite eines Rezeptbeitrags besuchen, sollten Sie das Feld in der Seitenleiste sehen. Der Inhalt ist derzeit natürlich leer.

Im nächsten Schritt wird die Box mit dem gewünschten Inhalt befüllt.

Schritt 2 – Zeigen Sie den Grundinhalt der Meta Box an

Wir werden den Inhalt dieser Box einfach halten. Alles, was wir brauchen, ist eine Beschreibung und ein Kontrollkästchen. Wie bereits erwähnt, wird der Inhalt in der Funktion display_vegan_meta_box .

Bitte fahren Sie fort und fügen Sie den folgenden Codeabschnitt unter der Funktion my_metabox :

 function display_vegan_meta_box( $recipe ) { ?> <span class="title">Vegan recipe?</span> <span class="content"> <label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" /> </label> </span> <?php }

Was wir in dieser Funktion getan haben, ist ein HTML-Kontrollkästchen auszugeben, das vorerst nicht aktiviert ist. Nachdem wir die Speicherfunktion eingeführt haben, kehren wir zu diesem Codeabschnitt zurück, um weitere Änderungen vorzunehmen, damit das Kontrollkästchen beim Laden der Nachbearbeitungsseite den gespeicherten Kontrollkästchenstatus abruft.

Schritt 3 – Speichern Sie den Meta-Box-Wert in der Datenbank

Um den Wert der Eingabefelder der Metabox zu speichern, verwenden wir den Aktions-Hook save_post , den WordPress wie folgt bereitstellt:

 function update_vegan_box( $post_id ) { if( !current_user_can( 'edit_post' ) ) return; if ( 'recipes' == get_post_type() ) { if ( isset( $_POST['vegan_checkbox'] ) && $_POST['vegan_checkbox'] != '' ) { update_post_meta( $post_id, 'is_vegan', $_POST['vegan_checkbox'] ); }else { update_post_meta( $post_id, 'is_vegan', "no" ); } } } add_action( 'save_post', 'update_vegan_box' );

Innerhalb der Funktion update_vegan_bo mit dem Argument $post_id wir einige Bedingungen eingefügt. Wir möchten zuerst prüfen, ob der Benutzer die Berechtigung zum Bearbeiten des Beitrags hat, und sicherstellen, dass wir einen recipes -Beitragstyp bearbeiten.

Wenn der Beitrag also zum Typ recipes gehört, prüfen wir den Wert des Kontrollkästchens. Denken Sie daran, dass der gespeicherte Datenbankwert standardmäßig „yes“ ist, wenn das Kontrollkästchen aktiviert ist, und wenn nicht, dann ist der Wert NULL. Wir haben dies ein wenig optimiert, sodass der „Nein“-Wert gespeichert wird, wenn wir den Beitrag mit deaktiviertem veganem Meta-Kästchen speichern.

Hier haben wir die WordPress-Funktion update_post_meta verwendet update_post_meta( $post_id, $meta_key, $meta_value, $prev_value = '' )

In seinen Argumenten haben wir die Beitrags-ID, den Metaschlüssel und den Metawert definiert. Die Funktion kann jedoch ein weiteres Argument akzeptieren, den $prev_value
Falls wir den vorherigen Wert vor dem Aktualisieren überprüfen möchten, und nur wenn er gleich ist, fahren Sie fort und aktualisieren Sie.

Schritt 4 – Verfeinern Sie den Inhaltscode der Meta Box

Kehren wir nun zur vorherigen Funktion zurück, die den Inhalt der Metabox ausgibt, und fügen Sie einige weitere Codezeilen hinzu, die die zugehörigen Daten aus der Datenbank abrufen.

 function display_vegan_meta_box( $recipe ) { $is_value = esc_html( get_post_meta( $recipe->ID, 'is_vegan', true ) ); $checked; if ( $is_value == "yes" ) { $checked = "checked"; } else if ( $is_value == "no" ) { $checked = ""; } else { $checked="";} ?> <span class="title">Vegan recipe?</span> <span class="content"><label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" <?php echo $checked; ?> /> </label></span> <?php }

Zuerst rufen wir also den is_vegan Metawert ab und dann wird der checked Wert gegebenenfalls an die $checked Variable übergeben und in der HTML-Ausgabe wiedergegeben.

Und das ist es. Wir haben jetzt eine funktionierende Metabox, mit der definiert werden kann, ob das Rezept in unserem benutzerdefinierten Beitrag vegan ist oder nicht.

Fazit

Meta-Boxen bieten ein erhöhtes Maß an Kontrolle und Flexibilität bei Beiträgen und können auf vielfältige Weise genutzt werden. Besonders schön an ihnen ist, dass sie vom Rest des Inhalts des Beitrags getrennt sind, sich aber gleichzeitig auf demselben Admin-Bildschirm befinden, was die Verwaltung viel einfacher macht, als wenn sie sich an anderer Stelle im WordPress-Admin befinden würden.

Wie bei den meisten WordPress-Codierungen kann es eine Weile dauern, bis Sie sich mit der Verwendung von Metaboxen vertraut gemacht haben. Hoffentlich reichen die obigen Informationen für den Einstieg aus. Viel Spaß beim Codieren!