Tableless - Desenvolvimento inteligente com Padrões Web

18/01/2011
Wordpress

Shortcodes

Um dos API’s mais importantes do WordPress, fácil de usar e customizar.

Por

Os shortcodes são abreviaturas no intuito de retornar o código desejado em uma única linha.

Exemplos de Shortcodes

Um exemplo de shortcode:

1
[botao]Meu primeiro botão[/botao]

Um exemplo de shortcode com parâmetros:

1
[botao cor=”vermelho” url=”http://tableless.com.br”]Site do Tableless[/botao]

Essa é a melhor solução para quem desenvolve sites para terceiros e deseja criar elementos com rapidez.

Criando um Shortcode

Para criar um shortcode, adicione o seguinte código em functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
add_shortcode('botao', 'botao_shortcode');

function botao_shortcode( $atts, $content = null ) {

   extract(shortcode_atts(array(
      'cor' => 'verde',
      'url' => '',
   ), $atts ) );
 
   return '<a href="'.esc_attr($url).'" title="'.$content.'" class="botao'.esc_attr($cor).'">'.$content.'</a>';
}
?>

No código, a função add_shortcode registrar o shortcode e abriga dois parâmetros, o nome do shortcode (tag) e a função que vai manipular o shortcode respectivamente.

Após isso, criei a função que vai abrigar os parâmetros e retornar todo o shortcode. Analise bem esta parte, pois são elas que vão abrigar os parâmetros:

1
2
3
4
   extract(shortcode_atts(array(
      'cor' => 'verde',
      'url' => '',
   ), $atts ) );

Nesta parte, a função shortcode_atts significa os atributos do shortcode, logo abaixo em um array, criaremos quais vão ser os parâmetros disponíveis. Por exemplo, criei um parâmetro de cor e outro de url, o valor que está atribuído ao parâmetro pode ser vazio ou um valor padrão, caso o parâmetro esteja vazio quando aplicarmos o shortcode.

1
      return '<a href="'.esc_attr($url).'" title="'.$content.'" class="botao'.esc_attr($cor).'">'.$content.'</a>';

Este código retorna o shortcode, cada parâmetro é uma variável dentro da função, para retorná-las use, $nomedoparametro, a função esc_attr é própria do WordPress e serve para codificar um texto.

Por último a variável $content, que serve para retornar o que está dentro da tag do shortcode, por exemplo:

1
[botao]Isso é o content[/botao]

Retornando um Shortcode

Por fim, vamos retornar o shortcode:

1
[botao cor=”azul” url=”http://tableless.com.br”]Site Tableless[/botao]

Para adicionar esse código você precisa está no editor Visual, caso contrário ele não irá funcionar.

Caso você queria usar o shortcode em algum outro lugar diferente do post, é necessário usar uma função chamada do_shortcode, por exemplo:

1
<?php echo do_shortcode(‘[botao cor=”azul” url=”http://tableless.com.br”]Site Tableless [/botao]’); ?>

De brinde, vou disponibilizar o código em CSS, somente para que vocês tenham uma noção, caso precisem

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.botaoverde{
    background-color: green;
    text-decoration: none;
    color: #FFF;
    padding: 5px;
    margin: 0px 10px;
}

.botaoazul{
    background-color: blue;
    text-decoration: none;
    color: #FFF;
    padding: 5px;
    margin: 0px 10px;
}

Por Paulo Rodrigues

Paulo Rodrigues é residente de Salvador-BA, especialista em criação de sites e desenvolvimento web desde de 2008. Foi com o desenvolvimento front-end que se apaixonou por esse caminho sem volta, atualmente além de interfaces, Paulo desenvolve para WordPress.

http://www.twitter.com/paulorodriguesw

Veja os outros posts de