Es kann sehr praktisch sein, einen Button in WordPress zentral anzulegen und anschließend per Shortcode auf beliebigen Unterseiten oder in Beiträgen einzufügen. Der Button kann dabei auf jede gewünschte Seite verlinken – etwa auf eine Kontaktseite oder auch auf eine externe URL.
WordPress-Button-Shortcode anlegen
Legen Sie dazu in der functions.php Ihres Child-Themes folgenden Code an:
add_shortcode( 'meinbutton', 'meinbutton_shortcode_simple' );
function meinbutton_shortcode_simple( $atts ) {
$atts = shortcode_atts(
array(
'title' => 'Titel',
'subtitle' => 'Untertitel',
'url' => '',
'target' => '_self',
'class' => 'standard-button', // CSS-Klasse für Farbe/Style
),
$atts,
'meinbutton'
);
$title = esc_html( $atts['title'] );
$subtitle = esc_html( $atts['subtitle'] );
$url = esc_url( $atts['url'] );
$target = esc_attr( $atts['target'] );
$class = esc_attr( $atts['class'] );
return '
<span class="meinbutton ' . $class . '">
<a href="' . $url . '" target="' . $target . '">
' . $title . '
<span class="subtitle">' . $subtitle . '</span>
</a>
</span>';
}Button-Shortcode in WordPress verwenden
Der Shortcode kann anschließend wie folgt verwendet werden:
[meinbutton class=”standard-button” title=”Jetzt starten” subtitle=”Untertitel” url=”/kontakt/” target=”_blank”]
Wenn das zugehörige CSS von unten eingebunden wird, erscheint der Button im folgenden Styling. Im Attribut url=”” Angabe wird die Zieladresse angegeben – dies kann sowohl eine interne als auch eine externe URL sein.
Button CSS-Style anpassen
Damit der Button farblich und gestalterisch angepasst werden kann, werden in der style.css einige CSS-Angaben benötigt. So lassen sich die Farben und Stile flexibel erweitern, insbesondere wenn mehrere unterschiedliche Button-Varianten verwendet werden sollen.
Eine Button-Variante in Rot könnte ganz einfach mit einer anderen CSS-Klasse gesteuert werden:
[meinbutton class=”red-button” title=”Jetzt starten” subtitle=”Untertitel” url=”/kontakt/” target=”_blank”]
.meinbutton a {
display: inline-block;
padding: 1rem 1.5rem; /* 15px 25px */
border-radius: 0.3125rem; /* 5px */
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-weight: 700;
font-size: 1rem; /* 16px */
margin: 0 0.5rem 0.5rem 0; /* 10px 10px */
color: #ffffff;
font-family: Arial, sans-serif;
}
.meinbutton .subtitle {
display: block;
text-align: center;
font-size: 0.6875rem; /* 11px */
font-weight: 400;
margin-top: 0.3125rem; /* 5px */
font-family: Arial, sans-serif;
}
/* Blaue Variante */
.standard-button a {
background-color: #0000CD;
}
.standard-button a:hover {
background-color: #0094ff;
}
/* Weitere Styles */
.red-button a {
background-color: #e60000;
}
.red-button a:hover {
background-color: #ff3333;
}
Wenn Shortcodes noch flexibler eingesetzt werden sollen – beispielsweise, um auch zusätzlichen Text oder komplexere Inhalte zu integrieren – eignen sich auf Webseiten mit WordPress-CMS sogenannte Enclosing Shortcodes besser. Diese ermöglichen es, Inhalte innerhalb des Shortcodes zu übergeben und dynamischer zu gestalten.