Tableless

Busca Menu

Shortcodes

Seja o primeiro a comentar 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:

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

Um exemplo de shortcode com parâmetros:

[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:

[cce lang=”php”]
<?php
add_shortcode(‘botao’, ‘botao_shortcode’);

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

extract(shortcode_atts(array(
‘cor’ => ‘verde’,
‘url’ => ”,
), $atts ) );

return ‘‘.$content.’‘;
}
?>
[/cce]

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:

[cce lang=”php”]
extract(shortcode_atts(array(
‘cor’ => ‘verde’,
‘url’ => ”,
), $atts ) );
[/cce]

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.

[cce lang=”php”]
return ‘‘.$content.’‘;
[/cce]

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:
[cce lang=”html”][botao]Isso é o content[/botao][/cce]

Retornando um Shortcode

Por fim, vamos retornar o shortcode:

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

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:

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

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

[cc lang=”css”]
.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;
}

[/cc]

Publicado no dia