Gewusst wie: Hinzufügen von benutzerdefinierten CSS-Schaltflächen zu WordPress als Shortcode?

Wie füge ich benutzerdefinierte CSS-Schaltflächen wie folgt hinzu:

[button class = “mybutton1” link = “Zuhause”]

Ich habe das CSS des Buttons von hier

.myButton { -moz-box-shadow:inset 0px 1px 0px 0px #cf866c; -webkit-box-shadow:inset 0px 1px 0px 0px #cf866c; box-shadow:inset 0px 1px 0px 0px #cf866c; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315)); background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315',GradientType=0); background-color:#d0451b; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border:1px solid #942911; display:inline-block; color:#ffffff; font-family:arial; font-size:13px; font-weight:normal; padding:6px 24px; text-decoration:none; text-shadow:0px 1px 0px #854629; } .myButton:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b)); background:-moz-linear-gradient(top, #bc3315 5%, #d0451b 100%); background:-webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%); background:-o-linear-gradient(top, #bc3315 5%, #d0451b 100%); background:-ms-linear-gradient(top, #bc3315 5%, #d0451b 100%); background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315', endColorstr='#d0451b',GradientType=0); background-color:#bc3315; } .myButton:active { position:relative; top:1px; } 

Ich möchte dies meiner WordPress-Seite als Shortcode hinzufügen. Wie mache ich das?

Vielen Dank!

Solutions Collecting From Web of "Gewusst wie: Hinzufügen von benutzerdefinierten CSS-Schaltflächen zu WordPress als Shortcode?"

 function myButton($atts, $content = ''){ extract(shortcode_atts(array( 'text' => '', 'link' => '' ), $atts)); $html = '
' . $text . '
'; return $html; } add_shortcode('mybutton', 'myButton');

Fügen Sie dies Ihrer functions.php hinzu und Sie können die Schaltfläche innerhalb von WordPress mit dem gewünschten Shortcode aufrufen.

Wie Sie sehen können, werden die class und der Link, die Sie festgelegt haben, zu den Variablen, die im Shortcode verwendet werden sollen.

Wenn Sie der Schaltfläche Text hinzufügen möchten, können Sie den HTML-Code wie folgt ändern:

 $html = '
' . $content . '
';

und benutze es so

 [button class='mybutton' link='home']mybuttonname[/button] 

Hoffe das hilft