Os atalhos do WordPress são um recurso poderoso para fazer coisas legais com pouco esforço. Podes fazer praticamente tudo com eles. Com atalhos, incorporar elementos interativos ou criar layouts de página complexos é tão fácil 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 feio.

Exemplo do código de atalho da galeria

Exemplo do código de atalho da galeria

Os códigos curtos eliminam 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 imensamente na automatização do conteúdo e na criação do design. Os atalhos são para desenvolvedores de WordPress o que as Macros são para analistas de dados, ou Atalhos de teclado para designers gráficos profissionais.

Neste guia, você vai aprender tudo o que há para saber sobre atalhos. Você vai descobrir como trabalhar com o Shortcode API, criando seus próprios atalhos. No final, vamos discutir o futuro dos atalhos e onde eles se encaixam com o novo editor de blocos do WordPress.

Entusiasmado? Vamos começar!

O que é um Shortcode?

Em resumo, Shortcode = Shortcut + Code.

Tipicamente, os atalhos usam etiquetas entre parênteses retos [] para definir como são usados. Cada atalho 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 atalhos 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.

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 posts 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, excepto 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 atalhos em 2008 com o lançamento da API Shortcode. Ele provou ser uma das características mais utilizadas por muitos plugins WordPress e desenvolvedores de temas.

O que são Códigos Curtos do WordPress?

Os atalhos do WordPress são cadeias de colchetes ([ ]) que se transformam magicamente em algo fascinante no frontend. Eles dão aos usuários uma maneira fácil de criar e alterar conteúdos complicados sem se preocupar com HTML complexo ou códigos incorporados.

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

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

Os 2 Tipos de Códigos Curtos

Existem principalmente dois tipos de atalhos no WordPress.

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

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

Exemplo: O atalho da galeria não precisa de uma etiqueta de fecho. 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 atalhos funcionam com ou sem atributos. Depende de como eles são definidos.

Os Códigos de Atalho Predefinidos do WordPress

O WordPress vem com 6 atalhos padrão:

Para mais detalhes sobre como você pode usar os atalhos 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 atalhos 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 Atalhos do WordPress em Páginas e Posts

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

Se estiver a usar o editor do Gutenberg, pode adicionar a etiqueta de atalho no bloco autónomo de Códigos de Atalho. Podemos encontrá-lo na seção de Widgets.

Acrescentar um bloco de Shortcode no Gutenberg

Acrescentar um bloco de Shortcode no Gutenberg

Bloco de Shortcode dedicado do Gutenberg

Bloco de Shortcode dedicado do Gutenberg

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

Adicionando um atalho no editor clássico

Adicionando um atalho no editor clássico

Usando Códigos Curtos do WordPress em Sidebar 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 atalho.

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

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

Cole o atalho dentro do widget Texto e salve-o. Você pode visitar o front-end do seu site e ver a saída do atalho 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 atalhos nos widgets da barra lateral. Leia as melhorias do Widget na atualização do WordPress 4.9 para saber mais.

Usando Atalhos do WordPress no Cabeçalho e Rodapé

Os atalhos do WordPress são, em geral, destinados a páginas, posts e widgets. Mas você tem uma maneira fácil de inserir atalhos em qualquer lugar do seu site.

Digamos que você queira adicionar um botão de chamada para ação em seu rodapé, ou em todos os seus posts antes da seção de comentários. A função do_shortcode() callback vem a callback 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 de atalho 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 atalhos 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 atalhos 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 atalhos.

A API suporta tanto o auto-fechamento como o enclausuramento de atalhos. 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 atalhos, 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 postar no WordPress, ele procura por atalhos registrados enquanto processa o conteúdo do site.

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

Você registra um código de atalho 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 atalhos é 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 cadeia de saída substitui a macro de atalhos no front-end do seu site. O que você finalmente vê no navegador é esta saída.

Onde Adicionar os Seus Shortcodes Scripts Personalizados?

Você pode adicionar seus scripts de atalho 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 Shortcode 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 atalhos!

Exemplo 1: Código de Atalho Usando [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-lhe o nome que quiseres.

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 código de atalho 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, post, 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 código de atalho 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: Código de Atalho 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.

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

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

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 de atalho. 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 de atalho.

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 de atalho.

/** 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 post:

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: Código de Atalho Usando $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 atalhos 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 seus próprios atalhos, você pode pensar fora da [box] e dar-lhes o seu próprio giro. Não se esqueça de partilhar as suas criações connosco!

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

Códigos de Atalho 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 atalhos. Os usuários agora podem adicionar blocos diretamente da interface do editor, em vez de lidar com marcações de atalhos, não importa o quão simples seja.

E se quiser adicionar atalhos, o Gutenberg até vem com um bloco dedicado para adicionar atalhos. Os blocos são os novos Shortcodes.

“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 atalhos 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 atalhos. A equipe central do WordPress prometeu muitas melhorias para o editor de blocos, que você poderia ver no Twenty Twenty, mas até lá, os atalhos estão aqui para ficar!

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

Resumo

Adicionar funcionalidades complexas em qualquer lugar ao seu site WordPress é fácil com os atalhos. 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 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 código de atalho personalizado usando o plugin Shortcoder. Trata de tudo o que é essencial para si. E lembre-se: a vida é curta, use atalhos!


Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 de nossa experiente equipe de WordPress. Nossa infraestrutura baseada no Google Cloud se concentra em escalabilidade automática, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira nossos planos