Veja o guia completo sobre shortcode no blog da HostGator. Conheça algumas das principais opções para serem utilizadas no WordPress.

Os sites desenvolvidos com WordPress (WP) possuem várias vantagens. Uma delas é o shortcode, códigos de acesso que funcionam como atalhos e agilizam a rotina de trabalho. 

Como você sabe, o WordPress é um dos Gerenciadores de Conteúdo (CMS) mais populares do mundo. O sistema completo e de alta confiabilidade para a criação é capaz de atender desde aos blogs mais simples até às grandes lojas virtuais. Assim, é natural que inovações como shortcodes estejam presentes entre as funcionalidades desse gerenciador. 

De acordo com o próprio WordPress, os shortcodes são uma forma valiosa de manter o conteúdo limpo e semântico, permitindo aos usuários finais alguma capacidade de alterar programaticamente o conteúdo do site.

O que é um shortcode?

Agora, você deve estar se perguntando o que é shortcode, certo? Eles são pequenos pedaços de código, reconhecidos pela composição entre colchetes, que permitem que o proprietário do site execute diversas atividades com pouco esforço: 

  1. “[” (abertura de colchete); 
  2. nome escrito em letras minúsculas, acompanhado (ou não) de números e sublinhados;
  3. “]” (fechamento de colchete).
Abrindo bloco de shortcode no WordPress

Pronto: agora você já sabe o que significa shortcode! Os códigos curtos foram introduzidos pela primeira vez no WordPress 2.5. O motivo para apresentá-los foi permitir que as pessoas executassem códigos em postagens, páginas e widgets do WordPress sem escrever nenhum código diretamente.

Dessa forma, é possível inserir arquivos e criar objetos, que normalmente exigiriam códigos complexos, em apenas uma linha. Por exemplo, um shortcode para incorporar um vídeo pode aparecer assim: 

O WordPress vem com seis códigos de acesso padrão:

  • áudio; 
  • legenda; 
  • embed;
  • galeria;
  • lista de reprodução;
  • vídeo. 

Outros podem ser adicionados por plugins, usando a API Shortcode.

Para que serve um shortcode?

O WordPress shortcode serve para facilitar o trabalho das pessoas que lidam com o gerenciador diariamente, evitando que tenham que programar códigos longos e complexos para embedar um vídeo ou inserir uma imagem. 

Quando o usuário adiciona uma galeria de fotos à postagem usando um shortcode, ele está adotando o mínimo de dados possível para indicar como a galeria deve ser apresentada. Além disso, o shortcode mantém a apresentação de conteúdo limpa.

Eles também podem aceitar parâmetros, permitindo que os usuários modifiquem como o shortcode se comporta de acordo com a demanda. Ao usar códigos, o HTML e as outras marcações são adicionados dinamicamente, diretamente na postagem ou na página que o usuário deseja que apareçam.

Assim, pode haver shortcode em diversas páginas do seu site WP. Basta inserir as tags especiais que o código irá substituir o conteúdo quando um visitante da web visualizar o site WordPress. 

Vantagens 

O processo de como inserir shortcode WordPress é um dos principais benefícios dessa funcionalidade, pois é possível adicionar praticamente qualquer coisa numa única linha de código. Eles também são mais fáceis de usar quando comparados aos códigos HTML, PHP e scripts. 

Outro benefício é o agrupamento de shortcodes em plugins. Mesmo se você atualizar o WordPress, transferir arquivos via FTP ou alterar e atualizar seu tema, os códigos de acesso ainda serão válidos e continuarão funcionando como antes. 

Como os shortcodes aceitam atributos, os usuários podem modificar como o mesmo shortcode comporta-se apenas alterando suas opções de atributo.

Desvantagens

Os shortcodes não são intuitivos para o usuário final, sobretudo se há muitos deles numa única página. Dada a diversidade dos shortcodes, é difícil dizer o que um shortcode faz apenas olhando para ele.

Sempre há o risco de que os shortcodes quebrem o HTML por causa de problemas de interoperabilidade ou tags conflitantes. Por fim, os códigos curtos sobrecarregam o servidor, o que pode prejudicar o SEO do site, devido ao tempo de carregamento da página.  

Como adicionar um shortcode no WP?

Antes de falarmos sobre como criar um shortcode WordPress, recomendamos que você faça um backup do seu site. Com isso feito, ao abrir uma página ou uma postagem no WP, o gerenciador irá buscar os shortcodes. Se algum for encontrado, a API assume e retorna com o resultado do shortcode.  A string de saída que retornou substitui a tag shortcode no local em que foi adicionada.

Sobre a questão de como conseguir um shortcode, de acordo com o próprio WP, é possível adicionar códigos usando a API shortcode. O processo envolve o registro de uma callback $func numa $tag  usando “add_shortcode()”, conforme o modelo abaixo: 

add_shortcode(   
  string $tag,    
callable $func
);

Se [wporg] é o seu novo shortcode, seu uso irá acionar o código wporg_shortcode à função de retorno da chamada. 

add_shortcode(‘wporg’, ‘wporg_shortcode’);
function wporg_shortcode( $atts = [], $content = null) {    
// do something to $content    
// always return    
return $content;
}

Usar códigos de acesso no WordPress é muito fácil, mas dependerá de onde você quer colocar o código no site. Por isso, é importante ler a documentação do shortcode, disponibilizada pelo WP, para entender como esse processo funciona.

Para a criação de shortcodes no WP, existem algumas regras. 

  1. O shortcode possui uma função associada a ele;
  2. Os atributos do shortcode deverão sempre ser escritos em letras minúsculas;
  3. O objetivo de callback é enviar argumentos para a função registada, como os atributos, o nome do shortcode e o conteúdo (quando houver);
  4. As funções nunca devem printar qualquer tipo de conteúdo. 

Exemplos de shortcodes

Existem diversos shortcodes e plugins disponíveis para agilizar a rotina de quem utiliza o WP. Abaixo, separamos alguns que podem ser muito úteis. 

Visualização Google Docs

Alguns usuários não estão acostumados a fazer download de arquivos na internet, então, eles baixam diversos aplicativos para visualizar PDFs. O shortcode de visualização do Google Docs resolve esse problema. 

O plugin disponibiliza um link direto para o visualizador Google Docs. É muito fácil: basta inserir o link para o PDF no parâmetro do shortcode.

Google Adsense 

Para quem ganha dinheiro com blog, este shortcode pode ser uma ótima opção, pois facilita a monetização de sites. Com esse shortcode, é possível colocar anúncios do Adsense em qualquer lugar da postagem.  

Inserção de notas privadas

Se você possui uma equipe dedicada ao WP, aproveite este shortcode para melhorar a comunicação entre o time. Usando-o, você pode deixar mensagens que só os administradores do blog conseguem ver.

Google Maps

Com este shortcode, você poderá adicionar mapas do Google Maps em seu blog, bastando colocar a URL providenciada pela página do próprio mapa.

Compartilhamento Twitter

Adicionar o botão “compartilhar” do Twitter nas postagens do blog é um ótimo recurso para potencializar o alcance do seu conteúdo.  Este shortcode permite adicionar um botão de partilha do Twitter nos seus artigos.

Conteúdo apenas para membros registrados

Uma tendência que vem crescendo é restringir conteúdo apenas para membros. Com o shortcode, qualquer conteúdo mostrado entre as tags fica visível apenas aos usuários registrados no site.

Há, ainda, diversos shortcodes prontos para serem usados na página de suporte do WP, conforme listado abaixo:

Vídeo 

  • [youtube] incorpora um vídeo do YouTube;
  • [vimeo] incorpora um vídeo do Vimeo;
  • [flickr] incorpora um vídeo do Flickr;
  • [ted] incorpora um vídeo do TED Talks;
  • [kickstarter] incorpora um vídeo Kickstarter;
  • [ted] incorpora um vídeo do TED Talks;
  • [[cnnmoney-video]] incorpora um vídeo CNNMoney;
  • [dailymotion] incorpora um vídeo DailyMotion;
  • [hulu] incorpora um vídeo Hulu.

Para mais shortcodes de vídeo, confira a página de suporte do WP! 

Áudio

  • [soundcloud] incorpora áudio do SoundCloud;
  • exibe o arquivo de áudio enviado como audio player;
  • [[mancha]] incorpora música do Spotify;
  • exibe uma lista de reprodução para arquivos enviados de áudio.

Para mais shortcodes de áudio, confira a página de suporte do WP! 

Imagens e documentos

  • [instagram] incorpora uma imagem do Instagram;
  • [slideshare] incorpora uma apresentação de slides do Slideshare.net;
  • [ gallery ] insere uma galeria de imagens em um post ou página;
  • [googleapps] incorpora um documento do Google Docs;
  • [scribd] incorpora um documento/arquivo do Scribd;
  • [slideshow] incorpora uma apresentação de slides de fotos enviadas.

Outros 

  • [contact-form] adiciona um formulário de contato à sua página;
  • [twitter-timeline] incorpora uma linha do tempo do Twitter;
  • [archives] exibe um índice de arquivo de posts do seu blog;
  • [googlemaps] incorpora mapas do Google;
  • [list-pages] permite que você liste páginas, páginas-irmãs e páginas-filhas;
  • [sourcecode] preserva a formatação do código-fonte.

Como você viu, é fácil inserir gráficos, incorporar arquivos de vídeo, criar formulários de pesquisa e adicionar botões com a funcionalidade de shortcode. Os códigos curtos simplificam a adição de recursos a um site WordPress. A boa notícia é que, se você não encontrar o shortcode que procura, pode criar um! 

Continue acompanhando o blog da HostGator para mais conteúdos sobre tecnologia, negócios e marketing!