WordPress einfacher Button als Shortcode

Blog

Ist es nicht praktisch, wenn man auf einer WordPress Seite einen Button erstellen und schnell mittels Shortcode irgendwo auf einer Unterseite oder in einem Beitrag einfügen kann? Der Button lässt sich dann auf jede beliebige Seite verlinken, z.B. auf die eigene Kontaktseite oder eine externe Website.

WordPress Button Shortcode anlegen

Für den Button muss man einen Codeschnipsel in der functions.php anlegen:

add_shortcode( 'meinbutton', 'meinbutton_shortcode' );
function meinbutton_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'color' => 'blau',
                       'title' => 'Titel',
                       'subtitle' => 'Untertitel',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="meinbutton ' . $color . '-button"><a href="' . $url . '">' . $title . '<span class="subtitle">' . $subtitle . '</span>' . '</a></span>';
}

Button Shortcode in WordPress ausgeben

Der Shortcode sieht dann so aus:

[meinbutton color=“blau“ title=“Jetzt anfragen“ subtitle=“Untertitel“ url=“kontakt.html“]

So sieht der Button aus, wenn Ihr das CSS von unten mit verwendet. In der url=““ Angabe gebt Ihr die Seite an, auf die Ihr den Button verlinken möchtet. Das kann eine interne oder externe URL sein.

Button CSS Style anpassen

Um den Button nach Belieben farbig anpassen zu können, benötigt man jetzt nur noch ein paar CSS-Angaben für die style.css:

.meinbutton a:link, .meinbutton a:visited {
       border-radius: 2px;
       display: inline-block;
       font: 700 16px Arial, Sans-Serif;
       margin: 0 10px 10px 0;
       -moz-border-radius: 5px;
       padding: 15px 25px;
       text-align: center;
       text-decoration: none;
       text-transform: uppercase;
       -webkit-border-radius: 5px;
}

.meinbutton .subtitle {
       display: block;
       font: 400 11px Arial, Sans-Serif;
       margin: 5px 0 0;
}

.blau-button a:link, .blau-button a:visited {
       background-color: #0000cd;
       color: #FFFFFF;
}

.blau-button a:hover {
       background-color: #4876ff;
       color: #FFFFFF;
}

Möchte man flexiblere Shortcodes nutzen, beispielsweise um auch Texte oder Links mit auszugeben, sind Enclosing Shortcodes besser geeignet.

Schreibe einen Kommentar