O que é shortcode e como criar no WordPress

Shortcode é um pequeno trecho de código no modo texto que faz referência a uma função de callback (função externa) a fim de produzir conteúdos dinâmicos em paginas e posts editadas diretamente no painel administrativo do CMS.

Isso faz com que o trabalho de um redator seja rápido e bem produtivo tirando a responsabilidade de estar criando códigos html diretamente no painel em modo texto.

Exemplo prático de criar código HTML direto no editor de texto

Imagine que você tenha que criar um texto que chame a atenção de seus usuários no final de todo o post para que eles não esqueça de curtir ou compartilhar seus post, e o editor de texto do WordPress não tem uma div especifica então com sua criatividade decide criar um código como este:

1
2
3
4
5

<div class="alert-message alert-message-warning">
 
  <p>Achou legal o Post clique em curtir, Adorou? compartilhe!</p>
 
</div>

Essa é uma má pratica porque mistura código HTML com o texto de seu post, força o redator a aprender HTML e é um trabalho exaustivo digitar esse código repetidamente.

Solucionando o problema criando um shortcode único

Como essa <div> e seu conteúdo é estático podemos criar a função de callback sem receber qualquer parâmetros, abra seu arquivo functions.php do seu tema e cole o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
function alerta_compartilhe(){
 
  $msg  = '<div class="alert-message alert-message-warning">';
  $msg .= '<p>Achou legal o Post clique em curtir, Adorou? compartilhe!</p>';
  $msg .= '';
 
  return $msg;
 
}
// Definimos o gatilho ' compartilhe' para a função ' alerta_compartilhe()'
add_shortcode('compartilhe', 'alerta_compartilhe');
?>

Pronto foi criada a função de callback e o shortcode, agora tudo que devemos fazer para usa-lá é referencia-lá como [compartilhe] no seu editor e ela vai produzir as 4 linhas de HTML criado na função.

Desenvolvendo shortcode com atributos

A primeira solução foi simples e não cria conteúdos dinâmicos, mas vou apresentar com base no mesmo problema um shortcode com atributos, abra o seu arquivo functions.php do se tema e cole o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php
function alerta_compartilhe2($atts, $content){
 
  extract(
      shortcode_atts(
         array(
            'type' => 'alert-message',
            'alert_type'  => 'alert-message-warning'
         ),
         $atts
      )
   );
  $msg  = '<div class=" '.$type.' '.$alert_type.' ">'; $msg .= '
<p>' .$content. '</p>
'; $msg .= '</div>';
 
  return $msg;
 
}
// Definimos o gatilho "compartilhe2" para a função "alerta_compartilhe2()"
add_shortcode('compartilhe2', 'alerta_compartilhe2');
?>

A partir de agora podemos criar uma <div> com conteúdo dinâmico exemplo de uso:

[compartilhe2]
Achou legal o Post clique em curtir, Adorou? compartilhe!
[/compartilhe2]

O que irá produzir a saída de um alert parecida a que eu uso em meus posts.

Explicando o código

Note que a função recebe um array shortcode_atts e cada chave recebe um valor padrão isso para que quando chamar o shortcode e caso não passar os atributos esses já estejam configurados. Isso foi exatamente o que aconteceu com a chamada do shortcode compartilhe2

Chamando o mesmo shortcode e declarando os atributos

Vamos mudar o tipo de alerta para que seja apenas informativo alterando o tipo de classe na <div> passando os atributos declarado na função de callback.

1
2
3

[compartilhe2 alert_type='alert-message-info'] 
  Achou legal o Post clique em curtir, Adorou? compartilhe!
[/compartilhe2]

O que vai produzir o HTML:

[compartilhe2 alert_type=’alert-message-info’] Achou legal o Post clique em curtir, Adorou? compartilhe! [/compartilhe2]