WordPress einfacher Button als Shortcode

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.

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;
}

 

Schreibe einen Kommentar