O shortcode ou código curto do WordPress é um recurso poderoso que lhe permite fazer coisas legais com pouco esforço. Você pode fazer quase tudo com eles. Com o código curto, é tão fácil integrar elementos interativos ou criar layouts complexos quanto inserir uma única linha de código.

Se você quiser adicionar uma galeria, você tem que simplesmente digitar o seguinte código:

[gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]

Isto irá gerar uma galeria com os IDs de imagem mencionados. Ele terá 4 colunas e seu tamanho máximo será ‘médio’ (como definido pelo WordPress).

Não há necessidade de nenhum código HTML complicado.

Exemplo do código de atalho da galeria

Exemplo de galeria com código curto

O código curto elimina a necessidade de scripts complicados. Mesmo que você tenha pouca ou nenhuma habilidade de programação, você pode adicionar conteúdo dinâmico sem esforço com a ajuda deles.

Eles são muito populares entre os desenvolvedores do WordPress, pois ajudam tremendamente na automatização do conteúdo e na criação do design. Os códigos curtos são para os desenvolvedores do WordPress o que são macros para analistas de dados, ou atalhos de teclado para designers gráficos profissionais.

Neste guia, você aprenderá tudo o que há para saber sobre os códigos curtos. Você descobrirá como trabalhar com o API de código curto, criando seus próprios códigos curtos. Finalmente, discutiremos o futuro dos códigos curtos e seu lugar no novo editor de blocos do WordPress.

Você está entusiasmado com isso? Vamos começar!

O que é um shortcode ou código curto?

Em resumo, Shortcode = Shortcut + Code (código curto).

Tipicamente, o código curto usa etiquetas entre colchetes [ ] para definir como são usados. Cada código curto executa uma função específica em um site. Pode ser tão simples como formatar o conteúdo ou tão complexo como definir toda a estrutura do site.

Por exemplo, você pode usar código curto para incorporar controles deslizantes, formulários ou tabelas de preços. Você pode até usá-los para criar modelos reutilizáveis de design de páginas.

Um breve histórico de códigos curtos

Os códigos curtos foram inicialmente tornados populares por um software de fórum online chamado Ultimate Bulletin Board (UBB). Em 1998, eles introduziram o BBCode (Bulletin Board Code), uma coleção de tags fáceis de usar para os usuários formatarem seus artigos facilmente.

Fácil formatação com BBCodes simples

Fácil formatação com BBCodes simples

Como uma linguagem de marcação leve, a BBCode trabalha com os mesmos princípios do HTML, exceto que é muito mais simples.

O uso de tags predefinidas também é muito mais seguro, pois os usuários não podem inserir código HTML e introduzir vulnerabilidades de segurança. Por exemplo, um usuário com intenções maliciosas poderia usar a tag <script> para executar código JavaScript e quebrar a funcionalidade do site.

Logo depois, outros softwares de fórum online como phpBB, XMB Forum, e vBulletin adicionaram a funcionalidade BBCode em seus quadros de mensagens.

Códigos curtos habilitam os administradores a ter maior controle sobre o que seus usuários podem ou não fazer. Além disso, eles permitiram que os usuários formatassem seus conteúdos através de tags simples.

Devido às mesmas razões de segurança, o WordPress impede que o código PHP seja executado dentro do conteúdo do site. Para superar essa limitação, o WordPress 2.5 introduziu a funcionalidade de código curto em 2008 com o lançamento da API Shortcode. Ele provou ser um dos recursos mais utilizados por muitos plugins WordPress e desenvolvedores de temas.

O que são códigos curtos do WordPress?

Os códigos curtos do WordPress são strings entre colchetes ([ ]) que magicamente se transformam em algo fascinante na interface pública. Eles permitem aos usuários criar e editar facilmente conteúdos complexos sem ter que se preocupar com a complexidade do HTML ou com a incorporação de códigos.

Os atalhos do WordPress são simples e fáceis de usar

Os códigos curtos do WordPress são simples e fáceis de usar

Os 2 tipos de códigos curtos

Existem principalmente dois tipos de códigos curtos no WordPress.

O fecho automático e os atalhos de fecho podem ser válidos com ou sem atributos .

O fecho automático e o código curto de fechamento podem ser válidos com ou sem atributos .

Exemplo: O atalho da galeria não precisa de uma etiqueta de fechamento. Acrescentamos tudo o que precisa com diferentes atributos.

Exemplo: O atalho de legenda é usado para envolver uma legenda em qualquer conteúdo. É usado principalmente para adicionar uma legenda às imagens, mas funciona com qualquer elemento HTML.

Alguns códigos curtos funcionam com ou sem atributos. Depende de como eles são definidos.

Os códigos curtos padrão do WordPress

O WordPress vem com 6 códigos curtos padrão:

Para mais detalhes sobre como você pode usar os códigos curtos padrão e quais atributos eles suportam, você pode consultar os documentos ligados ao Codex.

Como usar os códigos de atalho do WordPress

Usar códigos curtos no WordPress é um processo simples. Mas depende de onde você quer adicioná-los no seu site. Certifique-se de ler a documentação do atalho para entender como ele funciona. Aprenda os atributos que suporta, para que você possa obter exatamente o que deseja.

Usando códigos curtos do WordPress em páginas e artigos

Primeiro, vá para o editor de página/artigo onde você quer inserir o código curto.

Se estiver usando o editor do Gutenberg, pode adicionar a etiqueta de código curto no bloco autónomo de Shortcode/código curto. Podemos encontrá-lo na seção de Widgets.

Acrescentar um bloco de Shortcode no Gutenberg

Acrescentar um bloco de código curto no Gutenberg

Bloco de Shortcode dedicado do Gutenberg

Bloco de código curto dedicado do Gutenberg

Ainda usa o Editor Clássico (ou o plugin)? Você pode digitar suas tags de código curto da maneira clássica. Alguns códigos curtos podem até ter um botão na tela do editor para inseri-los prontamente.

Adicionando um atalho no editor clássico

Adicionando um código curto no editor clássico

Usando códigos curtos do WordPress na barra lateral de widgets

Os códigos curtos também podem ser inseridos nos widgets da barra lateral. Para adicioná-los, vá para Appearance ” Widgets e adicione um widget de Texto à seção onde você deseja adicionar o código curto.

Adicione um atalho na sua barra lateral com o widget Texto.

Adicione um atalho na sua barra lateral com o widget Texto.

Cole o código curto dentro do widget de texto e salve-o. Você pode visitar o front-end do seu site e ver a saída na sua barra lateral.

A saída do atalho (galeria) pode ser vista na barra lateral

A saída do atalho (galeria) pode ser vista na barra lateral

Nota: As versões WordPress 4.8 e abaixo não suportam códigos curtos nos widgets da barra lateral. Leia as melhorias do Widget na atualização do WordPress 4.9 para saber mais.

Usando código curto do WordPress no Cabeçalho e Rodapé

Os códigos curtos do WordPress são, em geral, destinados a páginas, artigos e widgets. Mas você tem uma maneira fácil de inserir código curto em qualquer lugar do seu site.

Digamos que você queira adicionar um botão de Call to Action em seu rodapé, ou em todos os seus artigos antes da seção de comentários. A função do_shortcode() callback function é útil aqui.

Você precisa adicionar o seguinte código ao header.php do seu tema, footer.php ou qualquer um de seus arquivos template:

<?php echo do_shortcode("[name_of_your_shortcode]"); ?>

Isto irá emitir o código curto no local onde você inseriu o código.

Você precisa incluir os colchetes entre as aspas para fazer eco ao atalho. Só incluir o seu nome não vai funcionar.

Da mesma forma, você pode usar a função do_shortcode() callback para ativar o código curto em qualquer lugar no WordPress, como na seção de comentários.

Uma rápida introdução ao API de código curto

A API de código curto do WordPress define como você pode usar os códigos curtos para personalizar e expandir as funcionalidades do seu site. Ele permite que os desenvolvedores criem conteúdo único (por exemplo, formulários, carrosséis, sliders, etc.) que os usuários podem adicionar em seus sites, colando o atalho relevante.

Você pode adicionar quase qualquer recurso que você possa imaginar ao seu site com a ajuda de códigos curtos.

A API suporta tanto o auto-fechamento como o enclausuramento de código curto. Ele lida com toda a análise complicada e inclui funções de ajuda para definir e buscar atributos padrão.

Graças à API, você pode mergulhar diretamente no desenvolvimento e personalização de códigos curtos, em vez de perder tempo precioso definindo expressões regulares para cada atalho que você faz.

Entendendo os conceitos básicos do Shortcode API

Toda vez que você abre uma página ou um artigo no WordPress, ele procura por códigos curtos registrados enquanto processa o conteúdo do site.

Se um atalho registrado for encontrado, o Shortcode API assume e retorna a saída do código curto. A string de saída retornada substitui a tag de código curto no local em que foi adicionada.

Você registra um código curto no WordPress com a função add_shortcode(). É assim que se faz:

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

A função do manipulador de código curto é definida como tal:

function shortcode_handler_function( $atts, $content, $tag ){ }

A API analisa a tag do atalho, atributos e conteúdo incluso (se houver) contornando os valores para a função handler, que os processa e retorna uma string de saída.

Esta string de saída substitui a macro de atalho na interface pública do seu site. O que você finalmente vê no navegador é este resultado.

Onde adicionar os seus scripts de código curto personalizados?

Você pode adicionar seus scripts de código curto personalizados ao arquivo functions.php do tema ou incluí-los em um plugin.

Se você estiver adicionando a um arquivo temático, você pode executar a função add_shortcode() como está.

Mas se você estiver adicionando-o a um plugin, recomendo que você o inicialize somente após o WordPress ter carregado completamente. Você pode garantir que, ao envolver a função add_shortcode() dentro de outra função. Isto é chamado de função de embalar:

function shortcodes_init(){
 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

A função add_action() engata a função shortcodes_init para disparar somente depois que o WordPress terminar de carregar (é chamada de ‘init’ hook).

Como criar um código curto personalizado no WordPress (nível Iniciante)

Agora que já cobrimos o básico, é hora de criar um atalho personalizado.

Para seguir os passos dados abaixo, você precisa de familiaridade ao trabalhar com código PHP e editar seus arquivos temáticos do WordPress. Quando terminar o tutorial, você terá o seu primeiro atalho WordPress personalizado pronto para ser disparado!

Vamos começar com o atalho mais simples possível, e depois avançar para os mais complexos. Desfrute dos seus pequenos marcos no seu caminho para o domínio dos códigos curtos!

Exemplo 1: Usando o código curto [current_year]

Vamos criar um atalho chamado [current_year] que produz o ano atual no seu site.

Este atalho é útil se você estiver adicionando conteúdo ao seu site que precisa ser atualizado a cada ano. Por exemplo, adicionando um aviso de direitos autorais ao rodapé do seu site.

Vou usar um plugin de barebones para adicionar as minhas funções de atalho. Você pode adicioná-lo ao arquivo functions.php do seu tema e obter os mesmos resultados, mas eu não o recomendo. Mas não há problema em testar e aprender!

[notar type=”info”]Faça uma cópia de segurança antes de fazer qualquer alteração no seu site. A Kinsta fornece backups automáticos a todos os seus clientes. [/notice]

Vamos começar por criar um plugin. Crie uma nova pasta no seu /wp-content/plugins/diretório.

Note a localização do diretório do plugin

Note a localização do diretório do plugin

Vou nomear o meu plugin “códigos de sal”, mas podes dar o nome que quiser.

No diretório de plugins salcodes, crie um arquivo PHP com o mesmo nome (salcodes.php). Uma vez feito, adicione o seguinte cabeçalho ao arquivo do seu plugin:

<?php

/*
Plugin Name:  Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/

Este simples cabeçalho de plugin é suficientemente bom para os nossos propósitos. Você pode saber mais sobre os requisitos de cabeçalho do plugin no WordPress Codex. Salve este arquivo e depois vá para o seu painel do WordPress para ativar o plugin.

Agora, vamos registar o shortcode e a sua função de manuseamento. Para fazer isso, adicione o seguinte código ao seu arquivo de plugin:

/**
 * [current_year] returns the Current Year as a 4-digit string.
 * @return string Current Year
*/

add_shortcode( 'current_year', 'salcodes_year' );
function salcodes_init(){
 function salcodes_year() {
 return getdate()['year'];
 }
}
add_action('init', 'salcodes_init');

/** Always end your PHP files with this closing tag */
?>

Guarde o seu ficheiro de plugin. Agora é hora de testar se o atalho funciona como pretendido.

Adicione o atalho em qualquer parte do seu site (página, artigo, widget da barra lateral, etc.). Vou adicioná-lo ao widget de texto da barra lateral do meu site.

Testando o código de atalho personalizado adicionando-o ao site.

Testando o shortcode personalizado adicionando-o ao site.

E, como esperado, funciona perfeitamente.

Saída do atalho do ano

Saída do atalho do ano

Parabéns por ter atingido o seu primeiro marco miliário!

O atalho que você acabou de criar não tem nenhuma variável $attributes ou $content associada a ele. Você aprenderá como usá-los nos exemplos a seguir.

Exemplo 2: Usando o código curto para um botão CTA

Vamos criar um atalho para o botão CTA personalizável. Isto também será de auto-fechamento (desculpe $content, você precisa aguentar até o próximo).

Quero que os usuários possam personalizar o tamanho e a cor do Botão CTA com os atributos do atalho.

Como a saída final é um elemento de botão, seus atributos HTML tais como href, id, class, target & label podem ser usados para personalizá-lo com facilidade.

Está cansado de um anfitrião lento para o seu site WordPress? Nós fornecemos servidores rápidos e suporte de classe mundial 24 horas por dia, 7 dias por semana, por especialistas em WordPress. Confira os nossos planos

Você pode usar o id e os atributos de classe para dar estilo ao botão, já que ambos são seletores CSS comuns.

Não estou aqui a embrulhar a minha função de manipulador para manter as coisas simples de explicar.

/**
 * [cta_button] returns the HTML code for a CTA Button.
 * @return string Button HTML Code
*/

add_shortcode( 'cta_button', 'salcodes_cta' );

function salcodes_cta( $atts ) {
 $a = shortcode_atts( array(
 'link' => '#',
 'id' => 'salcodes',
 'color' => 'blue',
 'size' => '',
 'label' => 'Button',
 'target' => '_self'
 ), $atts );
 $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
 return $output;
}

Woah, há muito para desempacotar aqui. Vou explicar linha por linha, para que possas entender como funciona.

Se você quiser definir o link padrão para ser o URL da página inicial do site, você pode fazer uso da função home_url() WordPress.

Vamos tentar usar o atalho tal como está, sem atributos definidos, e ver o que é produzido.

Estou adicionando o atalho a um widget de texto de barra lateral para testá-lo.

Estou adicionando o atalho a um widget de texto de barra lateral para testá-lo.

Se você está se perguntando para que servem os colchetes duplos ([[cta_button]]), eles são chamados de um atalho de fuga. Ajudam-no a produzir qualquer atalho registado no seu site como texto regular, como na figura abaixo.

Saída do botão de atalho do CTA mostrando que funciona perfeitamente como esperado

Saída do botão de atalho do CTA mostrando que funciona perfeitamente como esperado

Saída HTML do botão CTA sem atributos.

Saída HTML do botão CTA sem atributos.

Os usuários podem personalizar o tamanho e a cor do botão com o código curto. Já definimos seus valores padrão na função handler, mas precisamos registrar e consultar a folha de estilo na lista de recursos disponíveis. Esta folha de estilo deve ter todas as classes definidas no código curto.

Você também pode definir essas aulas na folha de estilo global do seu tema, mas é recomendável carregá-las separadamente. Isso garante que mesmo que você altere ou atualize seu tema do WordPress, essas aulas ainda serão carregadas junto com o código curto.

/** Enqueuing the Stylesheet for the CTA Button */

function salcodes_enqueue_scripts() {
 global $post;
 if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

A função salcodes_enqueue_scripts() define a variável global $post, e então confirma duas condições via:

Se ambas as condições forem verdadeiras, a função registra e consulta a folha de estilos style.css incluída na pasta CSS. A função plugin_dir_url( $file ) facilita a obtenção da URL do diretório do plugin.

Eu não vou mostrar o código CSS aqui, mas você pode encontrá-lo no código fonte ligado no final desta seção.

Finalmente, vamos testar o atalho [cta_button], adicionando-o ao conteúdo do artigo:

Note o link personalizado, cor, tamanho e atributos de etiqueta .

Note o link personalizado, cor, tamanho e atributos de etiqueta .

A imagem abaixo mostra como o Botão CTA fica no frontend:

O botão CTA agora tem um novo URL, cor, tamanho e etiqueta.

O botão CTA agora tem um novo URL, cor, tamanho e etiqueta.

Agora que você aprendeu como definir atributos personalizados e incluir estilos, você pode adicionar várias outras funcionalidades ao seu atalho do Botão CTA. Por exemplo, você pode dar aos seus usuários a opção de adicionar animações, efeitos de pairar, e vários outros estilos de botões.

Exemplo 3: Usando o código curto $content

Para o nosso exemplo final, vamos construir um atalho de enclausuramento chamado [boxed], que produz qualquer conteúdo entre suas tags em uma caixa com títulos coloridos.

Vamos começar por registar o atalho e definir a sua função de manipulador.

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/

add_shortcode( 'boxed', 'salcodes_boxed' );

function salcodes_boxed( $atts, $content = null, $tag = '' ) {
 $a = shortcode_atts( array(
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ), $atts );
 
 $output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
 
 return $output;
}

Neste exemplo, nós modificamos o conteúdo usando estilos CSS inline.

Estilos para quaisquer classes utilizadas dentro do atalho são registrados e consultados como fizemos no exemplo anterior do atalho.

Mas ter dois códigos curtos para usar a mesma folha de estilos significa que você tem que carregá-la se qualquer um deles for usado. Então, vamos atualizar a função salcodes_enqueue_scripts():

/** Enqueuing the Stylesheet for Salcodes */

function salcodes_enqueue_scripts() {
 global $post;
 $has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' );
 if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

Agora, vamos pegar o nosso atalho [boxed] para dar uma volta.

Adicione a caixa de atalho juntamente com o título, a cor do título e os atributos de cor .

Adicione a caixa de atalho juntamente com o título, a cor do título e os atributos de cor .

A captura de tela abaixo mostra a saída que obtemos.

Afinal, uma caixa bonita não é assim tão difícil de obter!

Afinal, uma caixa bonita não é assim tão difícil de obter!

Agora que você aprendeu a fazer seu próprio código curto, você pode pensar fora da [box] e dar o seu próprio giro. Não se esqueça de compartilhar as suas criações connosco!

Se você quiser, você pode baixar o código fonte do Shortcode Plugin aqui.

Códigos de código curto WordPress: Prós vs Contras

Os Prós

Os Cons

Códigos curtos e blocos do Gutenberg

A apresentação do Gutenberg reduziu a conveniência dos códigos curtos. Os usuários agora podem adicionar blocos diretamente da interface do editor, em vez de lidar com marcações de códigos curtos, não importa o quão simples seja.

E se quiser adicionar um código curto, o Gutenberg até vem com um bloco dedicado para adicionar códigos curtos. Os blocos são os novos códigos curtos.

“Se o puderes fazer com um atalho, podes fazê-lo como um bloco.” – James Huff, Engenheiro da Felicidade da Automattic

Isso explica porque todos os códigos curtos populares estão sendo convertidos em blocos. Muitos programadores do WordPress mudaram para fazer com que os seus produtos e serviços funcionem exclusivamente com o editor de blocos (Gutenberg).

Mas isso não significa que seja o fim do mundo para os códigos curtos. A equipe central do WordPress prometeu muitas melhorias para o editor de blocos, que você poderia ver no Twenty Twenty, mas até lá, os códigos curtos estão aqui para ficar!

Fazendo mais com menos, você diz? Isso é possível com os códigos curtos do WordPress! Aprenda o o que eles são e como criar o seu próprio com este guia aprofundado. A vida é muito curta para não usar códigos curtos〚〛💪Click to Tweet

Resumo

Adicionar funcionalidades complexas em qualquer lugar ao seu site WordPress é fácil com os códigos curtos. Eles dão aos usuários etiquetas fáceis de digitar que podem ser usadas sem se preocupar em usar códigos complexos.

Embora possa não haver atalhos na vida, com certeza há muitos atalhos com códigos curtos para usar no WordPress. Os meus favoritos são Shortcodes Ultimate e Shortcodes da Angie Makes.

E se não consegues encontrar aquele que procuras, podes criar um sozinho.

Você pode até pegar um atalho para criar seu shortcode (código curto) personalizado usando o plugin Shortcoder. Trata de tudo o que é essencial para si. E lembre-se: a vida é curta, use shortcode (código curto)!


Economize tempo, custos e otimize o desempenho do seu site com:

  • Ajuda instantânea de especialistas em hospedagem do WordPress, 24/7.
  • Integração do Cloudflare Enterprise.
  • Alcance global com 28 centros de dados em todo o mundo.
  • Otimização com nosso monitoramento integrado de desempenho de aplicativos.

Tudo isso e muito mais em um plano sem contratos de longo prazo, migrações assistidas e uma garantia de 30 dias de devolução do dinheiro. Confira nossos planos ou entre em contato com as vendas com as vendas para encontrar o plano certo para você.