Am Ende meiner ersten Vorstellung eines WP-PlugIns wollte ich eigentlich nur schnell eine grafische Bewertung in Form von einem bis maximal fünf Awesome-Font-Smileys ausgeben. Die Ausgabe in Form von <i class="fa fa-smile-o"></i> konnte mich aber nicht begeistern, zumal sie im visuellen Modus des Editor auch nicht richtig dargestellt wurde.

Eine schnelle Lösung mit einfachen Shortkeys musste her. An diesem Beispiel kann man auch erkennen, wie unter WordPress Shortcodes mit Attributen genutzt werden können:

add_shortcode( 'Bewertung', 'bewertung_func' );

function bewertung_func( $atts ) {
   $a = shortcode_atts( array(
      'pkt' => 5,
      'von' => 0,
      'txt' => 'Meine persönliche Bewertung: ',
   ), $atts );
   
   $von = ($a['von'] <= 0) ? $a['pkt'] : $a['von'];
   $out = "<p>$a[txt]";
   for ($i=1; $i<=$von; $i++) {
      $class = ($i <= $a['pkt']) ? 'yellow' : 'light_grey';
      $out .= "<span class=\"bewertung\"><i class=\"fa fa-smile-o $class\"></i></span>";
   }
   $out .= "</p>";
   return $out;
}

Zunächst habe ich die functions.php um die oben stehenden Codezeilen ergänzt.

In Zeile 1 wird der Shortcode in WordPress durch die Funktion add_shortcode()  initialisiert. Der erste Parameter beinhaltet den Namen des Shortcodes. Mein Shortcode hört also auf den Namen [Bewertung]. Damit WP weiß, was es mit dem neuen Shortcode anstellen soll, wurde ein zweiter Parameter vorgesehen. Dieser gibt den Namen der (zu erstellenden) Funktion an: bewertung_func($atts).

Diese Funktion wird ab Zeile 3 erstellt. Der Parameter $atts erlaubt die Übergabe von Attributen an den Shortcode.

In den Zeilen 4-8 werden die per Shortcode übergebenen Attribute bearbeitet. Dies übernimmt die WP-Funktion shortcode_atts($arr, $atts). Im ersten Parameter werden die erlaubten Attribute in Form eines assoziativen Arrays definiert. Die Keys entsprechen den Attributnamen, die Werte dem Standardwert. Dieser wird übernommen, wenn ein Attribut nicht angegeben wurde.

Ich habe die folgenden Parameter zugelassen:

• pkt -> Dies entspricht der Anzahl der vergebenen Punkte (bzw. Smileys); Standardwert ist 5
• von -> Dies entspricht der maximalen Anzahl zu vergebender Smileys; Standardwert ist 0.
  Hier ergibt sich eine Besonderheit. Wenn dieser Wert nicht angegeben wird, werden genau die Anzahl der Simleys ausgegeben, die unter pkt zu finden ist. Wird hier eine Zahl angegeben, die größer als pkt ist, werden von Smileys ausgegeben, von denen die ersten pkt in gelb und die folgenden in grau dargestellt werden.
• txt -> Dies ist der Text, der vor den Bewertungssmileys ausgegeben wird.

In Zeile 10 überprüfe ich, ob das Attribut von einen Wert >0 hat. Wenn ja, wird er als Maximalzahl der Smileys akzeptiert und in $von gespeichert. Ansonsten wird der Wert in Attribut pkt als Wert für $von übernommen.

In Zeile 11 wird die Variable $out mit dem Attribut txt initialisiert. $out enthält den String, der später den Shortcode im Beitrag ersetzen wird. Ich möchte die Bewertung als eigenen Absatz angezeigt bekommen, deshalb der öffnende Absatz <p>.

Die Zeilen 12-15 enthalten die Schleife, in der die Smileys ausgegeben werden – hier könnten natürlich anstatt der awesome-Smileys ebensogut andere Zeichen oder Images ausgegeben werden.

In Zeile 13 wird überprüft, ob der Index des auszugebenden Smileys größer als die angegebene Punktzahl (pkt) ist. Hiervon ist die Ausgabefarbe des Smileys abhängig.

Zeile 14 sorgt für die HTML-Konstruktion eines Smileys. Hier kann natürlich auch eine Grafik, ein beliebiges anderes Zeichen oder eine Zeichenfolge ausgegeben werden.

In Zeile 16 wird der umgebende Absatz </p> geschlossen.

Um die Ausgabe richtig zu formatieren, werden noch ein paar CSS-Definitionen benötigt. Diese stehen in der styles.css:

.bewertung { 
   display: inline-block;
   margin: 0 2px;
   font-size: 24px;
   line-height: 100%:
}
.yellow { color: #f6bb42; }
.light_grey { color: #bbb; }

.bewertung{} zeigt die Styles für einen Smiley an. Damit die Smileys ein wenig Abstand bekommen, wurde [css]display: inline-block[/css] angegeben – sonst wirkt [css]margin: 0 2px[/css] nicht.

Die Klassen .yellow und .light_grey sollten natürlich nach ihrer Funktion und nicht nach dem Aussehen benannt werden, in meinem Theme sind die genutzten Farben jedoch als einzelne Klassen vergeben, so dass ich die Klassennamen der Farbe angegeben habe.

Hinweis: Dieses Beispiel funktioniert nur, wenn Font Awesome installiert ist. Ohne die Nutzung des Fonts kann das Snippet natürlich problemlos so angepasst werden, dass Grafiken oder andere Zeichen ausgegeben werden.

Beispiele:

[Bewertung] – Aufruf ohne Attribute:

Meine persönliche Bewertung:

[Bewertung pkt=4] – Aufruf nur mit pkt-Attribut:

Meine persönliche Bewertung:

[Bewertung pkt=2, von=5] – Aufruf mit pkt– und von-Attribut:

Meine persönliche Bewertung:

[Bewertung pkt=2, von=5, txt='Ich sag mal: '] – Aufruf mit pkt-, von– und txt-Attribut:

Ich sag mal:

Vielen Dank für’s Lesen!