Como criar Shortcode personalizado no WordPress – Tutorial

Shortcode é uma das formas mais fáceis de adicionar conteúdo dinâmico dentro dos seus artigos, posts, páginas e sidebar (widgets) no WordPress. Inclusive, vários templates e plugins fazem uso de shortcodes para adicionar seus dados internamente, como é o caso dos formulários de contato, por exemplo.

Neste artigo vamos ensinar como criar e adicionar shortcodes personalizados de forma simples, fácil e eficaz. Confira!

O que é Shortcode

Basicamente, shortcodes são atalhos que visam simplificar a inserção de praticamente qualquer tipo de conteúdo dinâmico e são usados sempre dentro de colchetes, como no exemplo abaixo:

[nome_do_shortcode]Code language: JSON / JSON with Comments (json)

Embora o WordPress filtre todo conteúdo que seja inserido dentro de posts e páginas, evitando a execução de possíveis códigos maliciosos, o gerenciador de conteúdo permite o registro e a criação de shortcodes customizados feitos pelos webmasters e desenvolvedores.

Desta forma, basta você criar um código específico e realizar a vinculação dele com um shortcode. Assim, quando o WP encontrar este atalho dentro de uma página ele vai ~ automaticamente ~ rodar o código que está associado a ele de forma automatizada.

Como criar Shortcode para WordPress

Agora que você já sabe da importância e das facilidades de fazer uso de atalhos personalizados, ter um shortcode customizado dentro do seu site ou blog pode te ajudar ainda mais no dia a dia.

Shortcodes simples para WordPress

Então, veja abaixo como é possível criar um exemplo simples de shortcode usando o arquivo functions.php do layout WordPress para salvar o código:

// Função associada ao shortcode
function shortcode_simples() { 
 
// Código ou mensagem personalizada
$message = 'Olá Mundo!'; 
 
// Retorno do código ou mensagem personalizada
return $message;
}

// Registro do shortcode
add_shortcode('shortcode_simples', 'shortcode_simples');Code language: PHP (php)

Para entender o código acima, primeiro criamos a função shortcode_simples que vai executar o código personalizado e retornar sua saída.

O termo shortcode_simples é exatamente o nome dado para o atalho. É exatamente este código que vai instruir o WordPress a rodar a função criada.

Agora basta você inseri-lo dentro do seu post ou página usando o termo [shortcode_simples] (entre colchetes) para que sua mensagem ou seu código seja exibido dentro do conteúdo.

Shortcodes com atributos para WordPress

Os códigos shortcodes podem conter atributos ou não, isso vai depender da sua necessidade. Então, caso você precise incluir determinados atributos em seu atalho para WordPress, insira o código abaixo no arquivo functions.php:

function text($atts) {
	extract(shortcode_atts(array(
                // Valor padrão se você não informar o atributo
		'attribute' => 'Olá mundo!'
	), $atts));

	return $attribute;
}
add_shortcode('shortcode_atributo', 'text');Code language: PHP (php)

Para acioná-lo em seu artigo, post ou página do WordPress basta usar o seguinte código:

[shortcode_atributo attribute="Inserir conteúdo simples aqui..."]Code language: JSON / JSON with Comments (json)

Shortcodes com estilos CSS para WordPress

Agora que ensinamos como criar atalhos para WordPress com exemplos básicos, vamos mostrar que também é possível personalizar um shortcode para WordPress usando folhas de estilos CSS, como no exemplo abaixo:

O primeiro passo é copiar e colar o seguinte código no arquivo functions.php do seu layout ou template WordPress:

function shortcode_css($atts, $content = null) {
	 return '<div class="shortcode_css">'.$content.'</div>';
}
add_shortcode('shortcode_css', 'shortcode_css')Code language: PHP (php)

Em seguida, insira o código abaixo na sua folha de estilos CSS style.css:

.shortcode_css{
         padding:5px 10px;
         background:#F5F5F5;
         color:#333333;
         border-left:#72A000 5px solid;
}
.shortcode_css strong{
         color:#72A000;
}Code language: CSS (css)

Por fim, basta começar a usar o seu novo shortcode personalizado para WordPress da seguinte forma:

[shortcode_css]
<strong>EXEMPLO DE SHORTCODE</strong>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing curabitur pretium sem justo, vel feugiat nisl rhoncus vitae nunc semper diam pellentesque faucibus laoreet.</p>

<p>Cras posuere blandit odio. Aliquam ac felis ac nulla lobortis nunc sit amet fringilla elit, eget consectetur velit mauris sodales scelerisque felis nec lacinia.</p>

[/shortcode_css]Code language: HTML, XML (xml)

Adicionar shortcode no template WordPress

O WordPress permite que você também execute um shortcode fora do conteúdo publicado, tais como posts, páginas e widgets, mas para isso será preciso que você tenha um pouco de conhecimento técnico.

Então, partindo do princípio que você saiba editar os arquivos do seu template WP, basta inserir o código PHP abaixo dentro de um arquivo do tema, exatamente no local onde este atalho precisa ser executado:

<?php echo do_shortcode("[nome_do_shortcode]"); ?>Code language: HTML, XML (xml)

Resumindo

Como escrevemos no início deste passo a passo, fazer uso de shortcodes personalizados pode simplificar a inserção de códigos extras tanto no conteúdo dinâmico do seu site ou blog, como páginas, widgets e artigos, tanto dentro do seu tema WordPress.

Agora basta você analisar todas as suas necessidades e ver quais delas podem ser utilizadas de uma forma automatizada através destes atalhos inteligentes.

Fica a dica!

Foto: Luca Bravo via Unsplash.