Custom field in Widget von WordPress ausgeben

Bei manchen Artikeln, die ich hier schreibe, habe ich noch Randbemerkungen, die ich am Artikel, aber eben nicht im Artikel unterbringen möchte. Daher habe ich nach einer Lösung gesucht, ein benutzerdefiniertes Feld des Artikels zu verwenden und seinen Inhalt in einem Widget in der Seitenleiste anzuzeigen.

Eigentlich zeigen Sidebars im Blog ja immer die selben Inhalte, neue Artikel, meistgelesene Artikel, Blogroll, Tag-Cloud usw.
Mein Ansinnen war jedoch, artikelspezifische Daten in einem Widget in der Sidebar anzeigen zu lassen.

Dafür gibt es verschiedene Lösungswege. Man kann diverse PlugIns dafür nutzen oder in der functions.php die Ausführung von PHP erlauben, um das custom field im vordefinierten „Text“-Widget von WordPress auszugeben. Dem Sicherheitsrisiko der PHP-Ausführung wollte ich mich aber nicht hingeben und ein PlugIn scheint mir für diese einfache Aufgabe so, als würde man mit Kanonen auf Spatzen schießen.

Daher habe ich mich dazu entschlossen, die functions.php etwas aufzubohren und mir ein eigenes Widget zu programmieren, welches diese Aufgabe übernimmt.

So kannst Du ein benutzerdefiniertes Feld in einem Widget ausgeben

Als erstes müssen wir uns ein eigenes Widget programmieren. Das klingt aber komplizierter, als es ist. Eigentlich ist es ganz einfach und kann mit wenigen Zeilen Code bequem in der functions.php Deines Child-Themes (Du benutzt doch ein Child-Theme, oder?!) erledigt werden

Eigenes Widget in der functions.php definieren

Um ein eigenes Widget zu erstellen, fügst Du den folgenden Code einfach ans Ende Deiner functions.php ein (vor dem schließenden PHP-Tag)

/* eigenes Widget erstellen, um custom field "Notizen" auszugeben */
// Widget bei WordPress registrieren
function notes_load_widget() {
  register_widget('notes_widget');
}
// Widget laden
add_action('widgets_init','notes_load_widget');
 
// Widget in WordPress erstellen
class notes_widget extends WP_Widget {
  function __construct() {
    parent::__construct(
      // ID des Widgets
      'notes_widget', 
      // Widget-Name, wie er im WordPRess-Backend angezeigt werden soll
      __('Notizen Widget','notes_widget_domain'), 
     // Widget-Beschreibung
     array( 'description' => __( 'Widget, um Notizen zum Artikel aus dem custom field Notizen anzuzeigen', 'notes_widget_domain' ), ) 
    );
  }
 
  // Widget zur Anzeige im Frontend konfigurieren
  public function widget($args, $instance) {
    $title = apply_filters( 'widget_title', $instance['title'] );

    echo $args['before_widget'];
    if ( ! empty( $title ) )
    echo $args['before_title'] . $title . $args['after_title'];

    /* Hier kommt der Code rein, der das Widget mit Inhalt befüllt.
    in diesem Beispiel ziehen wir den Inhalt des custom fields "Notizen".
    Du kannst aber natürlich auch andere Felder auslesen.
    Passe dazu einfach die ID des Feldes an */
    $value=get_post_meta(get_the_ID(),'Notizen',false);
    if(!empty($value)) {
      // Wenn Feld nicht leer ist, dann den Inhalt laden
      $notes= $value[0];
    } else {
      // Kleiner Hack: wenn das Feld leer ist, blende das Widget mit CSS aus
      $notes='<style type="text/css" media="all">.widget_notes_widget{display:none;}</style>';
    }
    echo __( $notes, 'notes_widget_domain' );
    echo $args['after_widget'];
  }
         
  // Anzeige des Widgets im WordPress-Backend konfigurieren
  public function form( $instance ) {
    if ( isset( $instance[ 'title' ] ) ) {
      $title = $instance[ 'title' ];
    } else {
      $title = __( 'Notizen', 'notes_widget_domain' );
    }
    // Backend-Anzeige
    ?>
    <p>
      <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
      <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>
    <?php
  }

  // Widget-Update-Routine
  public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    return $instance;
  }
}

Füge diesen Code in Deine functions.php und besuche die Seite „Widgets“ im Backend von WordPress. Du solltest das neue Widget „Notizen“ dann dort sehen können.

Widget in der Sidebar einpflegen

Wenn Du das Widget dort siehst, kannst Du es zu einer beliebigen Sidebar hinzufügen und ihm einen Titel geben:

Ich habe mich für das generische „Hinweise“ entschieden, da es für viele Situationen passt.

Artikel bearbeiten

Jetzt musst Du nur noch zu einem beliebigen Artikel in WordPress das custom field hinzufügen und mit einem Value belegen, damit etwas angezeigt wird.

Bearbeite einen Artikel und aktiviere ggf. mit dem Menü „Ansicht anpassen“ oben rechts die custom fields/benutzerdefinierte Felder.

Du solltest nun so etwas sehen können:

Wenn Du „Notizen“ nicht bereits aus dem Dropdown auswählen kannst, weil Du es noch nie benutzt hast, dann klicke einfach auf „Neu eingeben“ und gib „Notizen“ ein.
Es ist jedoch wichtig, dass Du wirklich „Notizen“ eingibst, denn danach sucht der Code im Widget, welches Du eben angelegt hast.
Wenn Du lieber einen anderen Namen für das custom field benutzen möchtest, dann musst Du den Namen auch im Code abändern (die Stelle ist mit einem Kommentar markiert).

Du kannst an dieser Stelle nicht nur Text eingeben, sondern auch simple HTML-Tags nutzen, um Deinen Text zu formatieren.
Mit Anpassungen am Code in der functions.php kannst Du natürlich auch noch ganz andere Dinge realisieren, z.B. Bilder anzeigen, in dem Du die eingegebene URL entsprechend auszeichnest oder oder oder — Deiner Phantasie sind kaum Grenzen gesetzt 😉

Wenn Du den Artikel jetzt aktualisierst und ins Frontend wechselst, solltest Du das Widget bei dem Artikel sehen können.
Bei Artikeln, die das custom field nicht haben, wird das Widget mit CSS ausgeblendet.

Sicherlich gibt es dafür schönere Lösungen, aber die ging mir am schnellsten 😉

Bei diesem Artikel solltest Du als letztes Widget ebenfalls das Hinweise-Widget sehen können:

4 2 Bewertungen
Gesamtbewertung
Kommentarbenachrichtigungen
Benachrichtige mich bei
3 Kommentare
älteste
neueste meiste Bewertungen
Inline Feedbacks
View all comments