Wenn ein Code oder eine bestimmter Stil auf der eigenen Webseite häufig zum Einsatz kommt, kann man dies sehr schön unter WordPress mit Shortcodes lösen. Anstatt jedes mal einen bestimmten Code zB für einen Werbeblock direkt einzufügen, reicht es, bei einem dementsprechend vorhandenen Shortcode in den Beitrag nur den Shortcode in Form von zB [short] einzufügen. Natürlich können wir auch den Shortcode direkt in das Theme an der gewünschten Stelle einfügen mit zB folgendem Code.
<?php echo do_shortcode( '[short]' ); ?>
Eine sehr praktische Funktion, die auch in vielen Plugins zum Einsatz kommt. Kontaktformulare oder Slider werden, wenn es sich um ein Plugin handelt und sie nicht direkt im Theme schon integriert sind, normalerweise über eben solche Shortcodes eingebunden.
Wie erstellen wir uns selber so einen Shortcode?
Hierzu versorgt uns, wie sonst auch, die WordPress Codex Seite hier und hier mit den dementsprechenden Infos. Auf GenerateWp können wir uns sogar einige Beispiele ansehen, welche auch direkt in die functions.php des Themes oder in Form eines eigenen Plugins übernommen werden können.
Shortcodes können Selbstschließend [short] sein oder Umschließend [short]Der Shortcode[/short]. Natürlich ist es auch noch möglich bei beiden Varianten zusätzliche Variablen hinzuzufügen in Form von [short wert="1" farbe="rot"].
Ein Shortcode Beispiel zum Einfügen eines Blindtextes (Lorem Ipsum)
function zoechbauer_lorem_shortcode ( $atts ) {
return '<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>';
}
add_shortcode( 'lorem', 'zoechbauer_lorem_shortcode' );Wenn wir nun [lorem] in einem Beitrag hinzufügen wird automatisch der Blindtext mit return eingefügt. Diesen Blindtext könnten wir natürlich auch noch mit einem eigenem Styling anzeigen lassen.
Mit folgendem Codebeispiel wird der Blindtext nun mit der Textfarbe Rot angezeigt.
function zoechbauer_lorem_shortcode ( $atts ) {
return '<p style="color:red">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>';
}
add_shortcode( 'lorem', 'zoechbauer_lorem_shortcode' );
Variablen in Shortcodes bereitstellen
Oftmals ist es durchaus nützlich auch mit Variablen in Shortcodes zu arbeiten. Bei diesem Lorem-Beispiel könnte man daher einen Wert für die Textfarbe bereitstellen. Folgender Code hilft uns dabei.
function zoechbauer_lorem_shortcode ( $atts ) {
extract( shortcode_atts(
array(
'color' => '',
), $atts ) );
return '<span style="color:' . $color . '">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>';
}
add_shortcode( 'lorem', 'zoechbauer_lorem_shortcode' );Mit einem Shortcode [lorem color="green"] wäre der Text zB Grün. Natürlich können wir die Farbe auch im Hexadezimal Format einfügen, so etwa [lorem color="#e6e6e6"] für ein helles Grau bzw. im RGB Format mit [lorem color="rgb(255,165,0"] für zB Orange oder zusätzlich auch noch mit Transparenz mit dem RGBA Format [lorem color="rgba(255,165,0,.6)"] mit zB nur 60% Deckkraft.
Einen umschließenden Shortcode erstellen
Wenn wir einen Teil des Inhaltes mittels eines Shortcodes anders darstellen wollen bietet sich ein umschließender Shortcode an. Erstellen wir ein Beispiel hierzu.
function zoechbauer_upper_shortcode ( $atts, $content = null ) {
return '<span style="text-transform:uppercase">' . $content . '</span>';
}
add_shortcode( 'upper', 'zoechbauer_upper_shortcode' );Dieses Codebeispiel mit einem umschließenden Shortcode wird so angewendet – [upper]Text in Großschreibung[/upper]. Als Ergebnis erhalten wir den Text innerhalb des Shortcodes komplett in Großschreibung.
Ein Shortcode im Shortcode – Auch das ist möglich
Für den einen sehr praktisch, ein anderer braucht es womöglich nie, aber auch innerhalb eines Shortcodes können wir Shortcodes verwenden. Jedoch müssen wir den Code noch ein bisschen erweitern, damit das möglich wird.
function zoechbauer_upper_shortcode ( $atts, $content = null ) {
return '<span style="text-transform:uppercase">' . do_shortcode( $content ) . '</span>';
}
add_shortcode( 'upper', 'zoechbauer_upper_shortcode' );Mit [upper]Text in [lorem color="blue"] Großschreibung[/upper] im Artikel erhalten wir dabei folgende Ausgabe.
WordPress Funktionen oder PHP Code in Shortcodes verwenden
Ein Shortcode wäre nur halb so praktisch, wenn wir nicht auch noch PHP in Shortcodes verwenden könnten. Damit der PHP Code oder die gewünschte WordPress Funktion auch an der gewünschten Stelle angezeigt, müssen wir den Shortcode noch um die PHP Ausgabepufferung erweitern. Ein Beispiel für das einfügen des aktuellen Datums mit PHP.
function zoechbauer_date() {
echo date( 'j.n.Y' );
}
function zoechbauer_date_shortcode ( $atts ) {
ob_start();
zoman_date();
return ob_get_clean();
}
add_shortcode( 'date', 'zoechbauer_date_shortcode' );
Ohne Ausgabepufferung
Mit Ausgabepufferung
Wie man sieht kann man Shortcodes sehr universell einsetzen und man kann sich dadurch bei immer wiederkehrenden Funktionen durchaus das Arbeiten mit und in WordPress vereinfachen. Auch kann man mit einem kleinen zusätzlichen Codeschnippsel auch Shortcodes in den WordPress Widgets nutzen – Mehr dazu hier.
Bitte beachten Sie, dass dieser Beitrag bereits vor über einem Jahr geschrieben wurde und unter umständen nicht mehr aktuell ist.