web-dev-qa-db-fra.com

Bouton Shortcode

J'essaie de créer un shortcode de bouton personnalisé, avec plusieurs options de couleur et de taille. Cependant, lorsque j'essaie d'utiliser le shortcode dans mon message, il ne s'affiche pas.

Ma fonction

function btn($atts, $content = null) {
   extract(shortcode_atts(array('link' => '#', 'color' => 'teal' , 'size' => 'large'), $atts));
   return '<a class="btn '.$size.'" href="'.$link.'" style="background:'.$color.';"><span>' . do_shortcode($content) . '</span></a>';
}

Comment j'utilise le shortcode

[btn color="blue" size="large"]Button Text[/btn]

Mon CSS

/* Buttons */
.btn {background:#222 url(img/alert-overlay.png) repeat-x; display:inline-block; padding:5px 10px 6px; color:#fff!important; text-decoration:none; font-weight:bold; line-height:1; -moz-border-radius:5px; -webkit-border-radius:5px; position:relative; cursor:pointer; -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); text-shadow:0 -1px 1px rgba(0,0,0,0.25); border-bottom:1px solid rgba(0,0,0,0.25)}
.btn:active{-webkit-transform:translateY(1px); -moz-transform:translateY(1px)}

/* Sizes ---------- */
.small { font-size: 11px; margin:10px 0 }
.medium { font-size: 13px; margin:10px 0 }
.large { font-size: 14px; padding: 8px 14px 9px; margin:10px 0 }

/* Colors ---------- */
.blue { background-color: #2daebf }
.red { background-color: #e33100 }
.Magenta { background-color: #a9014b }
.orange { background-color: #ff5c00 }
.yellow { background-color:#ffb515 }
shortcode
1
AndrettiMilas

Que dis-tu de ça?

<?php
function btn($atts, $content = null) {
   extract(shortcode_atts(array('link' => '#', 'color' => 'teal' , 'size' => 'large'), $atts));
   return '<a class="btn '.$size.'" href="'.$link.'" style="background:'.$color.';"><span>' . $content . '</span></a>';
}

add_shortcode('btn', 'btn');
?>
1
Rutwick Gangurde