Blog fellyph cintra - wordpress bg medblue

Trabalhando com shortcodes no WordPress

Vamos falar sobre shortcodes no WordPress nesse post, mas antes vou contar uma história para vocês. Semana passada-me deparei com um problema. Daqueles que você só enxerga em produção. Desenvolvendo um tema para um freela, tudo ok no ambiente de teste. Quando o site foi para produção nenhum vídeo carregava.

Entrei para verificar o conteúdo, nele tinha uma tag video.

Quando bati o olho pensei duas coisas ou é um shortcode antigo, ou é algo do jetpack. Primeiro passo, verificar os plugins se estão ativos, em seguida atualizar o WP, por fim atualizar o Jetpack. Resultado nada!

Você faz aquele exercício o que foi que eu fiz antes “desabilitei o tema anterior” quando fui olhar o código do tema antigo estava lá o shortcode video. Shortcodes no WordPress é um recurso muito útil para que está a criar um tema ou plugin. Mas se está criando um shortcode para o tema ele deve ser totalmente vinculado ao tema, ou seja, um recurso que só faça sentido existir naquele tema ou plugin.

Exemplo, a tag vídeo estava presente em todos os posts mudou o tema, quebrou todo o site. Para alguns recursos hoje em dia não faz muito sentido, um caso é o YouTube basta colar o link do URL no editor visual que o WordPress já cria um embed. Optar por um recurso do WordPress independente do tem ou plugin a funcionalidade estará lá.

Trabalhando com Shortcodes no WordPress
Trabalhando com Shortcodes no WordPress

O que é um shortcode WordPress?

Shortcode é um recurso do WordPress que permite que o usuário insira desde pequenas informações personalizadas até controlar a exibição de parte do conteúdo, utilizando uma marcação especial chamada shortcode.

Para quem não tem muito conhecimento técnico, o WordPress pode parecer um pouco complicado. Na verdade, ele é bem simples de usar. Uma das principais vantagens do WordPress é a sua flexibilidade: com as inúmeras opções de plugins e temas disponíveis, você pode criar qualquer categoria de website que imaginar.

Uma das principais características do WordPress é a possibilidade de utilização de shortcodes no WordPress. Shortcodes são códigos curtos que podem ser inseridos em qualquer lugar do site e que executam uma determinada ação. Por exemplo, o shortcode [b]texto[/b] irá exibir o texto em negrito.

Existem shortcodes no WordPress para quase tudo, desde formulários até galerias de imagens. Neste artigo mostraremos o que são os shortcodes no WordPress e como utilizá-los.

Como criar shortcodes no WordPress?

Primeiro temos que adicionar no nosso function.php o seguinte hook:

add_shortcode( $tag , $func );Code language: PHP (php)

Ele espera dois parâmetros, nome da tag e a função que ele irá chamar na prática ele vai ficar da seguinte forma:

<?php  

function say_hello($atts) {
	return '<p> Olá meu nome é'.$atts['nome'].'</p> ';
}

add_shortcode('hello', 'say_hello');
?>Code language: HTML, XML (xml)

Exemplo acima criamos o shortcode “hello” quando a shortcodes API encontrar a tag [hello] dentro do meu post saberá que tem que chamar a função say_hello, basicamente ela cria um HTML como o texto olá meu nome é “x”. Notem que concateno com um valor que passamos como parâmetro na função.

Ela espera que passemos um atributo nome para os nossos shortcodes no WordPress, por exemplo, [hello nome="ze"]. Mas se caso o usuário não passar o valor o que acontecerá? ZICA!

Podemos definir um atributo default para resolver este problema:

<?php
function say_hello($atts) {
	$atts = shortcode_atts( array(
				'nome' => 'zezinho'
			), $atts, 'hello' );
	return '<p> Olá meu nome é'.$atts['nome'].'</p> ';
}

add_shortcode('hello', 'say_hello');
?>
Code language: HTML, XML (xml)

No caso usei um exemplo simples só montar um texto p. Mas poderíamos montar um componente de share, um componente de sugestão de produtos, o componente de publicidade. Lembrando que o recurso fica atrelado ao tema ou plugin, quer saber mais?

Também adicionei uma versão em português no codex do WordPress: https://codex.wordpress.org/pt-br:Function_Reference/add_shortcode

Conteúdo relacionado


Publicado

em

,

por

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *