O Guia Final para Atalhos do WordPress (com Exemplos para Criar o seu Próprio)

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.

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.

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 2 Tipos de Códigos Curtos

Existem principalmente dois tipos de atalhos no WordPress.

• Shortcodes de auto-fechamento: Estes não precisam de uma etiqueta de fecho.

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

• Códigos de atalho de fechamento: Estes precisam de uma etiqueta de fecho. Os atalhos 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 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:

• • áudio: Incorpore arquivos de áudio no seu site. Inclui controles de reprodução simples, como Play & Pause.
  • Legenda: Enrole legendas à volta do seu conteúdo com ele. É usado principalmente para adicionar legendas de imagens, mas você pode usá-lo para qualquer elemento HTML.
  • embed : Expandir a funcionalidade oEmbed padrão. Este atalho permite-lhe definir diferentes atributos para as suas incrustações, como por exemplo, definir as suas dimensões máximas.
  • galeria : Insira uma simples galeria de imagens no seu site. Você pode usar atributos para definir quais imagens são usadas e personalizar o aspecto da galeria.
  • lista de reprodução : Mostrar uma coleção de arquivos de áudio ou vídeo com este atalho de autoencerramento. Você pode dar a ele um modo ‘escuro’ legal com seu atributo de estilo.
  • vídeo: Incorpore um arquivo de vídeo e reproduza-o usando um simples reprodutor de vídeo. Este atalho suporta a incorporação de vídeos com estes formatos: mp4, webm, m4v, webm, ogv, wmv, flv.

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.

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.

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.

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.

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

• shortcode_name: A tag WordPress irá procurar enquanto analisa o conteúdo do post. 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 de atalho registrado.

A função do manipulador de atalhos é 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 cadeia vazia.
• $content: O conteúdo anexo, se você estiver definindo um atalho. É da responsabilidade da função do manipulador assegurar que o valor de $contente seja devolvido à saída.
• $tag: O valor da tag do atalho (shortcode_name no exemplo acima). Se dois ou mais atalhos 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 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.

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

• @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 [ano_actual].
• salcodes_year é o nome da função do manipulador de atalhos 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 cadeia 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, post, 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: 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.

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 atalhos 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 atalhos, 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 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:

• is_a(): verifica se $post é uma instância do objeto WP_Post. Está se referindo a todos os tipos de posts no WordPress.
• has_shortcode(): verifica se o conteúdo do post 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 post:

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

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

• $has_shortcode: uma variável definida pelo usuário que verifica se algum dos atalhos existe na página/post. 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 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 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 atalhos ainda serão válidos e continuarão a funcionar como antes.
• O agrupamento de atalhos 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 atalhos 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 atalhos na sua página/posts aumenta, o mesmo acontece com esta carga. Demasiados atalhos 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 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!