O Guia Final para Criar e Inserir Shortcode ou Código Curto no WordPress (Com Exemplos)

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.

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.

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 2 tipos de códigos curtos

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

• Códigos curtos de auto-fechamento: Estes não precisam de uma etiqueta de fechamento.

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

• Códigos curtos de fechamento: Estes precisam de uma etiqueta de fechamento. O código curto de fechamento geralmente manipulam o conteúdo entre as tags de abertura e fechamento.

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:

• • audio: Incorpora arquivos de áudio em seu website. Inclui controles simples de reprodução como Play & Pause.
  • caption: Envolve seu conteúdo com legendas. É usado principalmente para adicionar legendas de imagens, mas você pode usá-lo para qualquer elemento HTML.
  • embed : Expande a funcionalidade oEmbed padrão. Este atalho permite que você defina diferentes atributos para seus brasões, tais como a definição de suas dimensões máximas.
  • gallery : Insere uma galeria simples de imagens em seu site. Você pode usar atributos para definir quais imagens são usadas e personalizar a aparência da galeria.
  • playlist : Exibe uma coleção de arquivos de áudio ou vídeo com este atalho de auto-fechamento. Você pode dar-lhe um modo escuro com seu atributo de estilo.
  • vídeo: Incorpora um arquivo de vídeo e reproduza-o com um simples reprodutor de vídeo. Este atalho permite a incorporação de vídeos nestes formatos: mp4, webm, m4v, webm, ogv, wmv, flv.

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.

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.

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.

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.

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' );

• shortcode_name: A tag WordPress irá procurar enquanto analisa o conteúdo do artigo. O Shortcode API recomenda que você use apenas letras minúsculas, números e sublinhados para definir seu valor (evite traços).
• shortcode_handler_function: A função de chamada de retorno que será executada após o WordPress confirma a presença de um código curto registrado.

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

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

• $atts: Um conjunto associativo de atributos (isto é, um conjunto de pares de valores-chave). Se você não definir nenhum atributo, ele será definido por padrão para uma string vazia.
• $content: O conteúdo anexo, se você estiver definindo um atalho. É da responsabilidade da função do manipulador assegurar que o valor de $content seja devolvido à saída.
• $tag: O valor da tag do atalho (shortcode_name no exemplo acima). Se dois ou mais códigos curtos compartilham a mesma função de callback (que é válida), o valor $tag ajudará você a determinar qual atalho acionou a função do manipulador.

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!

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

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 */
?>

• @return tag no comentário do PHP define o tipo de saída retornada. É seguido por uma breve descrição do mesmo.
• current_year é a tag ou nome do atalho. Isto define a etiqueta de auto-fechamento que você precisa adicionar ao seu conteúdo, que neste caso seria [current_year].
• salcodes_year é o nome da função do manipulador de códigos curtos que retornará a string de saída. Vamos definir esta função de retorno nas próximas linhas. Como estamos criando um simples atalho de auto-fechamento, você não precisa passar nenhum valor variável, como $attributes, $content, ou $tag.
• salcodes_init é a função de invólucro que é ligada ao ‘init’ para garantir que o atalho seja registrado e executado somente após o WordPress ter terminado o carregamento. A função inbuilt add_action() do WordPress torna isso possível.
• getdate() é uma função PHP que retorna um array de informações de data do carimbo da hora atual. A chave do ano contém o valor do ano corrente (como uma string de 4 dígitos). Então, getdate()[‘year’] retorna o ano corrente. Esta saída é exatamente o que queremos.

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.

E, como esperado, funciona perfeitamente.

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.

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.

• Nós cobrimos a função add_shortcode() e como ela funciona na seção anterior.
• shortcode_atts() é uma função do WordPress que combina atributos de código curto do usuário com atributos conhecidos. Ele preenche os valores padrão quando necessário (que você mesmo pode definir também). O resultado será um array contendo cada chave dos atributos conhecidos, fundidos com valores de atributos de atalhos definidos pelo usuário.
• Dentro da função manipulador de códigos curtos, nós definimos uma variável ($a) e a atribuímos ao array retornado por shortcode_atts(). Atribuímos aos atributos os seus valores padrão com a sintaxe: ‘attribute’ => ‘default value’. Por exemplo, no código acima, estamos definindo o valor padrão do atributo label para Button com a sintaxe ‘label’ => ‘Button’.
• Podemos extrair os valores para cada chave de atributo com a sintaxe do PHP para arrays: $a[‘attribute’].
• A variável $output armazena o código HTML do elemento botão (<a> tag com classe ‘button’). É a corda que finalmente é devolvida pela função.

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.

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.

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:

• is_a(): verifica se $post é uma instância do objeto WP_Post. Está se referindo a todos os tipos de artigos no WordPress.
• has_shortcode(): verifica se o conteúdo do artigo contém o atalho [cta_button].

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:

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

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;
}

• $content = nulo : isto registra o atalho como um tipo de enclausuramento. Você pode usar a variável $content dentro da função do seu manipulador para alterar a sua saída como desejar.
• $tag = ” : isto define a variável $tag do atalho. Não é necessário neste exemplo, mas é uma boa prática incluí-la.

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');

• $has_shortcode: uma variável definida pelo usuário que verifica se algum dos códigos curtos existe na página/artigo. O || (OU operador) torna isso possível.

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

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

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 códigos curtos simplificam a adição de recursos complexos em sites WordPress. Você pode adicionar quase tudo digitando uma única linha de código.
• Os códigos curtos automatizam o fluxo de trabalho de desenvolvimento. Eles eliminam a necessidade de escrever scripts complexos cada vez que você quer inserir uma determinada funcionalidade.
• Os códigos curtos são mais fáceis de usar do que adicionar código HTML ou scripts PHP.
• Os códigos curtos podem ser agrupados dentro de plugins. Mesmo que você atualize o WordPress ou altere/atualize seu tema, os códigos curtos  ainda serão válidos e continuarão a funcionar como antes.
• O agrupamento de códigos curtos dentro de plugins torna-os fáceis de usar em vários sites WordPress. Se você é um desenvolvedor que lida com muitos sites, ter todos os seus atalhos personalizados prontos para ir é um salva-vidas.
• Como os códigos curtos também aceitam atributos, os usuários podem modificar como o mesmo atalho se comporta alterando apenas suas opções de atributos.

Os Cons

• Os códigos curtos não são intuitivos para o usuário final, especialmente se muitos deles forem usados em uma página. Nesses casos, eles são mais adequados para desenvolvedores.
• É difícil dizer o que um atalho faz só de olhar para ele. A equipe central do WordPress os chamou apropriadamente de “códigos embutidos de carne misteriosa” por este exato motivo.
• Os códigos curtos que vêm com os temas vão deixar de funcionar se você mudar de tema.
• Os códigos curtos são ambíguos no que diz respeito à sua sintaxe. Por exemplo, alguns deles suportam fechamento opcional, de modo que você pode usá-los como auto-fechamento ou fechamento automático, ou mesmo ambos, se estiverem aninhados. Podes adivinhar como pode ficar super confuso super rápido.
• Os códigos curtos podem quebrar o HTML devido a tags conflitantes ou problemas de interoperabilidade. Nunca é uma boa visão vê-los na fachada de qualquer site.
• Os códigos curtos adicionam uma carga extra no seu servidor. À medida que o número de códigos curtos na sua página/artigos aumenta, o mesmo acontece com esta carga. Demasiados códigos curtos podem levar o seu site a um rastejamento (por exemplo, a saída da maioria dos construtores de páginas).

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!

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)!