Im zweiten Teil haben wir die Basis überarbeitet und neue Optionen in WordPress registriert. Jetzt geht es dran das Backend zu überarbeiten, dass wir auch die Optionen bearbeiten können.
Ziel des Tutorials
Im Laufe des Tutorials werden wir ein Plugin entwickeln, welches mit der Taxonomy „Kategorie“, die man von den Posts her kennt, arbeitet und pro Kategorie eine eigene Einstellungsseite erstellt. In dem Beispiel wird das lediglich eine Einstellung als Textfeld (Message) sein, die wir dann im Frontend bei den Posts ausgeben.
Den gesamten Code findest du auf GitHub: tax-settings.
v1: eine Einstellung für alle Kategorien
v2: pro Kategorie eine Einstellung
Aus Teil 2 weist du ja bereits, wie das Endergebnis aussehen wird. Hier noch mal der Screenshot des Backends wie wir es jetzt erstellen möchten:
Im Grunde ist es nicht viel, was wir hier ändern müssen. Im Screenshot sehen wir, dass über dem Titel noch Tabs nun sind für jede Kategorie. Diese werden wir hinzufügen und wir müssen dann auch die Textfelder mit den richtigen Settings verknüpfen.
Was jetzt auf diesem Bild nicht zu sehen ist, was aber auf jeden Fall einen großen Vorteil in der User Experience bringt, ist die Möglichkeit den Standartwert als Placeholder zu verwenden. So let’s get started!
Tabs erstellen
Um die Tabs anzuzeigen braucht es nicht viel. Wir brauchen im Grunde nur die aktuelle Liste mit Kategorien. Pro Kategorie wird dann ein Link mit einem GET
Parameter erstellt. Und für die allgemeingültigen Einstellungen wird noch ein General Tab erstellt und als erstes gesetzt.
// Get all categories which registred are at the time $categories = $this->get_categories(); // Add links to category specific setting pages ?> <div id="ts_subheader" class="wrap"> <?php $all_cat = 'General'; echo "<a href='?page=ts_settings&cat=general'>{$all_cat}</a>"; foreach ($categories as $key => $cat) : ?> | <a href='?page=ts_settings&cat=<?php echo $cat->slug; ?>'><?php echo esc_attr( $cat->name ); ?></a> <?php endforeach; ?>
Die Links tragen als Namen die Kategorie-Namen und als GET
Parameter verwenden wir die slugs
der Kategorie. Anhand des Parameters in der URL können wir dann später entscheiden welche Option im Textfeld angezeigt werden soll und vor allem welche Option gespeichert werden soll.
Im folgenden Listing wird das Formular gerendert und wie man leicht sehen kann überprüfen wir hier den GET Parameter. Wenn dieser nicht gesetzt ist, weil die Settings page z.B. über das Hauptmenü aufgerufen wurde, dann wird die „general“ angezeigt. Ansonsten verwenden wir den slug um die jeweilige Option zu bekommen.
Jetzt können wir auch wieder unsere Methoden get_option_name
und get_page_name
verwenden und die korrekten Namen zu bekommen.
Der Rest ist standard WordPress zum darstellen der Settings, wie wir es schon aus Teil 1 kennen.
<?php // Render actual settings page depending ?> <h2>Taxonomy Settings</h2> <div class="wrap"> <div id="icon-tools" class="icon32"></div> <form method="POST" action="options.php"> <?php if ( ! isset( $_GET['cat'] ) ) { $current_cat = 'general'; } else { $current_cat = esc_attr( $_GET['cat'] ); } $option_name = $this->get_option_name( $current_cat ); $page_name = $this->get_page_name( $current_cat ); settings_fields( $option_name ); do_settings_sections( $page_name ); submit_button(); ?> </form> </div>
Settings Field: Nachricht anzeigen
Klasse jetzt haben wir also die Tabs und auch die richtigen Options werden verwendet. Allerdings funktioniert es noch nicht ganz. Was jetzt noch fehlt ist das Anzeigen der Nachricht.
Aus Teil 2 haben wir die Methode category_message
erweitert und dort war folgendes zu sehen:
$value = $this->get_field_value( $args['slug'], "ts_cat_message" ); $placeholder = $this->get_field_value( 'general', "ts_cat_message" );
Dort werden zwei Variablen für den eigentlichen Value und den Placeholder gesetzt. Allerdings fehlt noch die Methode get_field_value
. Das werden wir jetzt ändern.
public function get_field_value( $setting_name, $value_name ) { $opt_name = $this->get_option_name( $setting_name ); $options = get_option( $opt_name ); $value = ( isset( $options[$value_name] ) ) ? $options[$value_name] : '' ; return array( 'setting_name' => $opt_name, 'field_name' => $value_name, 'field_value' => $value ); }
Mit dieser einfachen Methode bekommen wir durch den gegebenen Settings Namen und den Value Namen den entsprechenden Wert zurück. In unserem Fall haben wir zwar nur ein Value namens „ts_category_message“. Aber in der Regel gibt es für ein Plugin ja mehr Settings und dann ist diese Methode sehr nützlich, da wir nicht für jedes Feld eine eigene Funktion schreiben müssen.
Zudem können wir diese Funktion ja verwenden um jeglichen Wert unsere Options zu bekommen. Wir benutzen daher die Methode nicht nur für den Value sondern auch für den Placeholder. D.h. wenn kein Wert für diese Kategorie gespeichert ist dann soll im Feld ein Placeholder mit dem Wert von „General“ angezeigt werden.
Da wir nun die Methode haben und somit unseren richtigen Value und auch den Placeholder auch müssen wir diese nur noch in unser input
Feld einbauen:
<input id="ts_message" name="<?php echo $options_name; ?>[ts_cat_message]" size="40" type="text" value="<?php echo esc_attr( $value['field_value'] ); ?>" placeholder="<?php echo esc_attr( $placeholder['field_value'] ); ?>" />
Fazit
So das war es auch schon für das Backend. Wir haben jetzt für jede Kategorie einen Tab und auch die richtige Wert wird im Textfeld angezeigt. Und wenn gar kein Wert für diese Kategorie gesetzt ist, dann werde ein Placeholder angezeigt. Sehr nützlich 🙂
Im vierten und letzten Teil der Serie passen wir dann noch das Frontend an, damit auch die richtige Nachricht im Post angezeigt wird.
Den ganzen Code könnt ihr wie gewohnt auf GitHub finden: obstschale/tax-settings.