Taxonomy Abhängige Einstellungen – Teil 4

Im vierten und letzten Teil der Serie (hier zum ersten Teil) kümmern wir uns noch um das Frontend. Da die Logik und das Backend schon funktionieren müssen wir nur noch die richtige Nachricht auf der Homepage darstellen.

 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


Als letzten Schritt wollen wir die entsprechende Nachricht natürlich auch auf der Homepage anzeigen. Dazu haben wir im letzten Teil im Backend die Settings Page bearbeitet, dass wir für jede Kategorie auch eine eigene Nachricht speichern können. Jetzt muss diese Nachricht ins Frontend.

Tax-Settings: Posts

Im ersten Teil haben wir dafür die Methode get_cat_text() eingeführt in class-ts-category-message.php, die die Nachricht aus der Datenbank holt. Nun haben wir ja aber nicht nur eine Option sondern mehrere daher müssen wir diese Methode anpassen.

Aber bevor wir richtig los legen, lass erst noch mal überlegen, was wir genau wollen. Wir haben gesagt, wir wollen nun die entsprechende Nachricht der Post Kategorie anzeigen. Also wenn der Post in der Linux News Kategorie ist soll auch diese Nachricht angezeigt werden (Ich beschränke mich in diesem Tutorial auf die erste Kategorie. Also sollte ein Post in mehreren Kategorien sein wird nur die erste Nachricht dargestellt um das ganze zu Vereinfachen.). Aber wenn ein Post gar keiner Kategorie zugeordnet ist? Dafür haben wir ja extra die „General“ Option eingeführt, dass genau in diesem Fall der Fallback genutzt werden soll.

Die überarbeitete Methode sieht dann wie folgt aus:

public function get_cat_text() {
    global $post;
    $settings_model = new TS_Settings();

    $cats = wp_get_post_categories( $post->ID, array( 'fields' => 'slugs' ) );

    /* Make use of get_option_by_key method to get the correct
    message for the category of this post.
    In this tutorial the first category of the post is used to make things
    simple. But if you want to show all messages just loop over the $cats
    array and display each message. */
    $value = $settings_model->get_option_by_key( $cats[0], 'ts_cat_message' );
    return $value['field_value'];
}

Im Grunde passiert hier nicht viel. Zuerst werden die Kategorien des Posts abgefragt und die erste Kategorie des Post wird an die Methode get_option_by_key( $cat, $value_name ) übergeben. Diese Methode macht gebraucht von der Methode get_field_value, die wir aus dem 3. Teil kennen.

public function get_option_by_key( $setting_name, $value_name ) {
    if ( !isset( $setting_name ) || !isset( $value_name ) ) {
        return '';
    }
    $value = $this->get_field_value( $setting_name, $value_name );
    if ( !isset( $value ) || empty( $value['field_value'] ) ) {
        $value = $this->get_field_value( 'general', $value_name );
    }
    return $value;
}

Die Methode versucht erst die Nachricht der Kategorie zu bekommen. Sollte noch keine Nachricht für diese Kategorie gespeichert sein, so versucht die Methode die Nachricht von „General“ zu bekommen (Fallback). Somit wird auf jeden Fall eine Nachricht zurück gegeben und kann im Frontend angezeigt werden.

Am Rest müssen wir nichts mehr ändern, da der zurückgegebene Text einfach in den Post Content eingebunden wird und entsprechend formatiert wird. D.h. wir sind fertig 🙂

Zusammenfassung

In dieser vierteiligen Serie haben wir eine Taxonomy durch ein weiteres Feld erweitert: Mit einer simplen Nachricht. Dazu haben wir folgende Dinge gemacht:

  1. Generische Optionen-, Sektionen- und Felder-Generierung um mehrere Einstellungen speichern zu können
  2. Settingspage im Backend angepasst und durch Tabs erweitert
  3. Zudem eine Fallback Option (General) eingebaut, falls keine Option für eine Kategorie gesetzt ist
  4. Darstellung der entsprechenden Nachricht bzw. des Fallbacks im Frontend

Mit dieser Lösung können wir nun für eine Taxonomy leicht neue Optionen hinzufügen und überall im Plugin oder Theme verwenden.

Ein paar Gedanken zu dieser Lösung …

Ich habe diese Lösung im Rahmen meiner Entwicklung für Dicentis entwickelt und habe lange überlegt, wie ich das gescheit implementiere. Mit dieser Lösung bin ich persönlich derzeit sehr zufrieden.

Ralf hat allerdings angemerkt, dass man das ganze auch mit dem action hook {$taxonomy}_add_form_fields (Code Reference). Dieser Hook fügt ein neues Feld zu der genannten Taxonomy hinzu und kann dann über die gewohnten WP Funktionen abgefragt werden.

Dies ist definitiv auch eine Möglichkeit. Und in diesem simplen Tutorial, wo wir nur ein Textfeld hinzugefügt haben, wäre das auch vielleicht die bessere Lösung gewesen.

Aber die Lösung dieses Tutorials finde ich aus zwei Gründen besser:

  1. Wenn eine Taxonomy viele Optionen bekommen soll
  2. Die User Experience wird dadurch verbessert

Punkt 1 sollte klar sein. Wenn man viele Optionen hat kann ich mit dieser Lösung ebenfalls leicht und schnell eine ausgefeilte Settings page erstellen, die weit über einfachen Textfeldern hinausgeht.

Punkt 2 ist für mich hingegen wichtiger. Denn ich finde, durch meine Lösung wird die User Experience erhöht. Lasst mich das erklären: Wenn ich ein Plugin mit mehreren Taxonomies habe und zudem auch noch viele Einträge für eine Taxonomy, dann kommen schnell viele Einstellungsmöglichkeiten hinzu und wenn ich für jede Taxonomy auf die jeweilige Unterseite muss um die Einträge zu editieren, dann wir das schnell zu einer aufwändigen und langwierigen Aufgabe.

Durch eine zentrale Settingspage habe ich die Möglichkeit, dies für den User an einen Ort zu sammeln. Man findet schnell auf einer Seite und mit wenigen Klicks alle Einstellungen die für dieses Plugin nötig / möglich sind und muss mich nicht durch 3 oder mehr Seiten wühlen bis ich die Einstellung gefunden habe. Genau aus diesem Grund habe ich mich gegen den WP Hook entschieden und etwas mehr Aufwand betrieben und die User Experience zu erhöhen.

Ich hoffe ihr fandet das Tutorial nützlich und habt das ein oder anderen mitgenommen 🙂

Taxonomy Abhängige Einstellungen – Teil 3

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:

Tax-Settings: Screenshot der fertigen Settings page

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.

Taxonomy Abhängige Einstellungen – Teil 2

Im ersten Teil haben wir die Basis gelegt und eine neue Option in WordPress registriert. Nun gehen wir aber einen Schritt weiter und werden pro Kategorie eine eigene Option anlegen.

 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


Im 2. Teil dieser Serie starten wir mit der Überarbeitung des in Teil 1 erstellten Plugins. Damit später pro Kategorie eine eigene Nachricht abspeichern können müssen wir auch jeweils eine Option dafür abspeichern. Aber bevor wir komplett in Code versinken lass uns mal anschauen, wie das Endergebnis ausschauen wird.

Das Endergebnis wir sein …

Im Backend haben wir 3 verschiedene Beiträge die in ihrer jeweiligen Kategorie einsortiert sind.

Tax-Settings: 3 Posts in 3 verschiedenen Kategorien. (Admin Bereich)

Die Settings page aus Teil 1 existiert natürlich auch wird aber etwas erweitert. Für jede Kategorie, die zu dem Zeitpunkt der Darstellung registriert ist, wird ein Link gesetzt, der die jeweilige Einstellungsseite anzeigt. Weiterlesen →

Taxonomy Abhängige Einstellungen – Teil 1

Während meiner Entwicklung an Dicentis bin ich auf das Problem gestoßen, dass ich für eine Custom Taxonomy eigene Einstellungen benötigte. Da dies meines Wissens nicht in WordPress von Haus aus möglich ist musste ich mir selber was einfallen lassen. Dieses vierteilige Tutorial soll dir zeigen, wie man für eine Taxonomy eigene Einstellungen erstellt.

 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


Teil 1 – Normale Einstellungen

Um alle ins Boot zu holen, starte ich das Tutorial bei 0 und in diesem Teil erstellen wir zu aller erst eine einfach Einstellung mit der bekannten Settings API von WordPress. Wenn du bereits weißt wie man Einstellungen erstellt kannst du diesen Teil ruhig überspringen, da in diesem Post noch keine neuen Dinge vorkommen. Weiterlesen →