Criando um shortcode para botão com link no WordPress
Postado em 19 de maio de 2011 por Henderson | Categorias: Shortcodes | Sem comentários » | Comentar
Coloque o código abaixo no arquivo functions.php do seu tema:
// SHORTCODE PARA BOTÃO COM LINK
function botao_padrao( $atts ) {
extract( shortcode_atts( array(
'texto' => 'Texto do Link',
'link' => 'url do link'
),
$atts ) );
return '
<div class="botao-dinamico">
<a href="' . $link . '" rel="bookmark" title="' . $texto . '">
<div class="botoa-lado-esc"></div>
<div class="botao-meio">' . $texto . '</div>
<div class="botoa-lado-dir"></div>
</a>
</div>';
}
add_shortcode('botao', 'botao_padrao');
Coloque os códigos no arquivo de CSS principal do tema:
/*BOTAO DINÂMICO*/
.botao-dinamico{
height:26px;
padding: 0;
margin: 0;
float: left;
display: inline;
margin-right: 15px;
}
.botao-dinamico a{
text-decoration:none;
font-weight:bold;
color:#FFF;
font-size: 14px;
}
.botoa-lado-esc{
float: left;
display: inline;
background-image:url(images/botao-lado-esq.png);
background-repeat:no-repeat;
height: 26px;
width: 7px;
}
.botoa-lado-dir{
float: left;
display: inline;
background-image:url(images/botao-lado-dir.png);
background-repeat:no-repeat;
height: 26px;
width: 7px;
}
.botao-meio{
float: left;
display: inline;
text-align: center;
height: 24px;
background:url(images/botao-meio.png) repeat;
text-decoration: none;
font-variant:small-caps;
min-width: 88px;
padding-top: 2px;
}
Para chamar o botão dentro de um post ou página do WordPress use o shortcode:
[botao link="http://caminho-do-link" texto="texto do botão"]
O botão é compsoto das 3 imagens abaixo:
Referências:
http://rozanchetta.com/blog/shortcodes-no-wordpress-como-usar/
http://rozanchetta.com/blog/wordpress-shortcodes-self-enclosing/
http://codex.wordpress.org/Shortcode_API