ShortCode WordPress

O que são ShortCode WordPress

Com estas “ShortCode” podemos inserir conteúdo no nosso artigo de forma mais rápida e mais estilizada. Veja os exemplos seguintes e perceberá a sua imensa utilidade.

Com estas shortcode torna-se ainda mais fácil escrever artigos com aspecto visual mais profissional, inserir blocos de AdSense, botões…

Criar um exemplo prático de shortcode

O código base para criar uma shortcode no wordpresss é o seguinte:

function shortcode_name_func() {
//código aqui
}
add_shortcode(‘shortcode_name’,’shortcode_name_func’);

Esta função tem de ser adicionar ao ficheiro functions.php do nosso blog.

A partir desse momento sempre que quisermos chamar a função só precisamos de escrever:
[shortcode_name]
ou
[shortcode_name]texto[/shortcode_name]

Exemplos Shortcodes:

Exemplo 1: Caixa Simples

Vamos começar com este exemplo simples para criar uma caixa de texto em destaque no meio do nosso texto.
Neste caso temos de colocar [shortcode_name]texto[/shortcode_name]

Para criar esta shortcode adicione este código ao ficheiro functions.php (cuidado para não eliminar a linha final deste ficheiro)

// funcao caixa simples
function box($atts, $content = null) {
$return = '<div class="box">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode('box', 'box');
//

Agora temos de definir a classe box na nossa folha de estilos.
Acrescente o seguinte código à sua folha de estilos, provavelmente será o ficheiro style.css:
.box {
background: #bfe4f9;
border:1px solid #68a2cf;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin: 20px;
padding: 10px;
position: relative;
}

Se quiser alterar alguma formatação na sua caixa basta alterar este último bocado de código css.
Pode alterar cor, margens, tipo e tamanho de texto,…

Exemplo 2: Caixa de Destaque de Alerta

[boxalert]Este é um exemplo de uma caixa de destaque de alerta.
Com uma imagem de alerta e o texto que quisermos colocar na caixa.
Neste caso temos de colocar [shortcode_name]texto[/shortcode_name][/boxalert]

Para criar a caixa de texto anterior bastou escrever o seguinte no texto do nosso artigo:

[alertbox] Este é um exemplo de uma caixa de destaque de alerta.
Com uma imagem de alerta e o texto que quisermos colocar na caixa. [/alertbox]

Para criar esta shortcode cole este código no final do seu ficheiro functions.php:
function alertbox_func( $atts, $content=null, $code="") {
$return = '<div class="alertbox">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode( 'alertbox' , 'alertbox_func' );

Neste caso, a shortcode refere a classe “alertbox”, logo temos de adicionar esta classe na nossa folha de estilos CSS:
.alertbox{
background:url('/images/Alert.png') no-repeat scroll 15px 15px #ffea97;
border: 1px solid #887d50;
color: #887d50;
-moz-border-radius: 6px 6px 6px 6px;
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
line-height: 24px;
margin: 20px;
padding: 15px 15px 15px 80px;
position: relative;
}

Falta só a Imagem:

Pode descarregar as imagens deste exemplo e dos próximos dois exemplos aqui.

Depois de descarregar faça upload para o seu servidor. Verifique se o caminho que está no código CSS é o mesmo caminho onde colocou estas imagens.

Exemplo 3: Caixa Info

[boxinfo]Esta caixa tem uma imagem diferente e cores diferentes.
O código das próximas duas caixas é semelhante ao anterior. Neste caso temos de colocar [shortcode_name]texto[/shortcode_name][/boxinfo]

Para criar esta shortcode adicione este código ao ficheiro functions.php
function infobox_func( $atts, $content=null, $code="") {
$return = '<div class="infobox">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode( 'infobox' , 'infobox_func' );

Neste caso, a shortcode refere a classe “infobox”, logo temos de adicionar esta classe na nossa folha de estilos CSS:
.infobox{
background:url('/images/Info.png') no-repeat scroll 15px 15px #c6d8f0;
border: 1px solid #4381cc;
color: #4381cc;
-moz-border-radius: 6px 6px 6px 6px;
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
line-height: 24px;
margin: 20px;
padding: 15px 15px 15px 80px;
position: relative;
}

 

Exemplo 4: Caixa Proibido

[boxforbid]Esta caixa tem uma imagem diferente e cores diferentes.
O código é semelhante às duas anteriores.
Neste caso temos de colocar [shortcode_name]texto[/shortcode_name][/boxforbid]

Código para adicionar ao ficheiro functions.php
function forbidbox_func( $atts, $content=null, $code="") {
$return = '<div class="forbidbox">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode( 'forbidbox' , 'forbidbox_func' );

Neste caso, a shortcode refere a classe “forbidbox”, logo temos de adicionar esta classe na nossa folha de estilos CSS:
.forbidbox{
background:url('/images/Info.png') no-repeat scroll 15px 15px #efcec9;
border: 1px solid #ad3f30;
color: #ad3f30;
-moz-border-radius: 6px 6px 6px 6px;
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
line-height: 24px;
margin: 20px;
padding: 15px 15px 15px 80px;
position: relative;
}

 

Exemplo 5: Criar 2 Colunas

[primeira_metade]Por vezes precisamos de escrever em duas colunas. Para isso poderíamos criar uma div na nossa folha de estilos. E chamá-lo no editor HTML do wordpress.[/primeira_metade]

[segunda_metade]Com este shortcode já não é necessário. Basta escrever o texto dentro das tags correspondentes[/segunda_metade]

Ou seja, basta fazer:

[nome_shortcode_coluna1] texto coluna 1 [/nome_shortcode_coluna1]
[nome_shortcode_coluna2] texto coluna 1 [/nome_shortcode_coluna2]

 

Para criar esta shortcode adicione este código ao ficheiro functions.php
//funcao para criar 2 colunas
function primeira_metade( $atts, $content = null ) {
$return = '<div class="primeira_metade">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode('primeira_metade', 'primeira_metade');
function segunda_metade( $atts, $content = null ) {
$return = '<div class="primeira_parte segunda_metade">';
$return .= $content;
$return .= '</div><div class="stclearboth"></div>';
return $return;
}
add_shortcode('segunda_metade', 'segunda_metade');

Eu escolhi os nomes “primeira_metade” e “segunda_metade” para as tags do shortcode.

Temos de adicionar estas classes na nossa folha de estilos CSS:
.primeira_metade { width:48%; padding-bottom: 20px;position:relative; margin-right:4%; float:left; }
.segunda_metade { margin-right:0 !important; clear:right; }
.stclearboth {clear: both;}

Exemplo 6: Colocar blocos de anúncios AdSense

Podemos colocar blocos de anúncios (ou outro elemento qualquer) de forma fácil e automática em quaquer local no nosso artigo.
Vou exemplificar com um bloco de anúncios AdSense.

Código para adicionar ao ficheiro functions.php
//funcao inserir bloco de anúncios
function bloco_adsense_func() {
$return = '
//código do seu bloco de anúncios aqui
';}
add_shortcode('adsense', 'bloco_adsense_func');

Depois disto basta escrever:
[adsense]
para colocar o bloco de anúncios onde quiser.

Se quiser pode fazer várias funções adsense para diversos blocos, por exemplo:
[adsense] -> bloco quadrado de 250×250
[adsense_rodape] -> bloco rectangular de 468×60

Outros Exemplos

Não existe limites para a imaginação, logo poderá fazer basicamente tudo o que quiser com estas shortcodes.

Alguns exemplos:

  • Uma acção muito repetitiva, como por exemplo, colocar uma assinatura personalizada no final de cada post
  • Bloco com os posts relacionados
  • Informação do autor no final do artigo
  • Inserir formulário de contacto
  • Inserir um Google Map
  • Mostrar uma listagem de posts com um determinado critério, como por exemplo, pertencentes a uma categoria
  • Botões para o Twitter: ReTweet ou TweetmeMe
  • Colocar uma galeria de imagens
  • Inserir um Gráfico Dinâmico

 

Pesquisa Bibliográfica

 

E já está!

Alguma dificuldade ou ideia? Comente abaixo!

Sobre Diogo Gomes

Farto de trabalhar para os outros e insatisfeito com a vida que tinha,… procurou alternativas na internet.

Hoje trabalha 100% a partir de casa, sem horários, com férias ilimitadas e rendimentos ilimitados.

Apaixonado por ciências exactas, programação, internet, viajar, festas, conhecer pessoas, bilhar, mar, queijo e chocolate

Siga-me no

Porque Você Nunca Irá Ter Sucesso Online

Subscreva este blog:

...e Receba Grátis o Livro Best-Seller
"Porque Você Nunca Irá Ter Sucesso Online"

Marcado com: , , , ,
2 comentários sobre “ShortCode WordPress
  1. Cara. O tutorial realmente é muito bom.

    Estou com um probleminha aqui.

    Estou usando um shortcode [box] … [/box], e uso um plugin que imprime o shortcode [download id=”X”] dentro do meu shortcode box.

    O box está funcionando normal, mas o shortcode do plugin não funciona, ele imprime como texto, e fora do box o shortcode do plugin funciona.

    Como posso reverter isso? Tem algum jeito de fazer shortcode dentro de shortcode funcionar?

    • Olá Everaldo,

      Sim, é natural que não funcione.
      Existem várias formas de ultrapassar esse problema.
      Se você quer sempre usar a formatação da shorcode box para esse plugin acho que o melhor será procurar a div associada a esse “shorcode [download id=”X”]” e formatar essa div com o mesmo CSS que usei na Box. Desta forma nem sequer precisa de usar duas shortcode ao mesmo tempo.

      Se isso não ajudar veja esta explicação:
      http://codex.wordpress.org/Shortcode_API

      Espero ter ajudado,
      Abraço, Diogo Gomes

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*

Arquivo