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=”https://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”]
[/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.’{.botao’.esc_attr($cor).’}‘;
[/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=”https://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”]
[/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]