Criando seu primeiro widget no WordPress

Veja neste artigo como criar um widget totalmente do zero utilizando um modelo de classe definido pelo wordpress.

por Thiago Belem

Fala minha gente!! Trago até vocês mais um artigo sobre desenvolvimento, dessa sobre WordPress! (Atendendo o pedido do Phelipp de Avila , que me segue no Twitter)

Segundo a documentação oficial sobre widgets do WordPress você deve criar Widgets utilizando um modelo de classe definido por eles, que é o que vou ensinar no artigo de hoje.

Nesse exemplo, iremos criar um widget de “Sobre o autor”, que pode ser inserido no sidebar geral do blog (ou num sidebar específico para posts)… Esse widget irá verificar se estamos em um post (que o WordPress chama de single), e caso estejamos, irá exibir o nome, o avatar e a descrição do autor do post, todos esses dados vindos diretamente do banco de dados do WordPress.

A preparação

Antes de tudo, você vai precisar separar seu widget em três métodos dentro de uma classe:

• Um método para gerar e exibir o HTML que aparecerá na lateral do seu blog/site
• Um método que será usado para gerar e exibir o HTML do formulário que aparecerá no painel de controle do blog/site
• Um método que será usado para salvar os dados vindos desse formulário

Sabendo disso.. vamos começar a nossa classe:

<?php
/**
 * Widget de Sobre o Autor
 * 
 * @author Thiago Belem <contato@thiagobelem.net>
 * @link http://blog.thiagobelem.net/criando-seu-primeiro-widget-no-wordpress/
 */
class SobreAutorWidget extends WP_Widget {	
}
?>

Lembrando que a sua classe DEVE estender a classe WP_Widget, do próprio WordPress.

Agora vamos inserir quatro métodos vazios para deixar a estrutura da classe pronta:

/**
 * Construtor
 */
public function SobreAutorWidget() { parent::WP_Widget(false, $name = 'Sobre o autor'); }

/**
 * Exibição final do Widget (já no sidebar)
 *
 * @param array $argumentos Argumentos passados para o widget
 * @param array $instancia Instância do widget
 */
public function widget($argumentos, $instancia) {

}

/**
 * Salva os dados do widget no banco de dados
 *
 * @param array $nova_instancia Os novos dados do widget (a serem salvos)
 * @param array $instancia_antiga Os dados antigos do widget
 */
public function update($nova_instancia, $instancia_antiga) {			

}

/**
 * Formulário para os dados do widget (exibido no painel de controle)
 *
 * @param array $instancia Instância do widget
 */
public function form($instancia) {	

}

Método form()

Agora vamos começar pelo método form(), que exibe o formulário… Esse widget não precisaria de formulário e opções pois ele não tem nenhum tipo de configuração, mas vamos deixar uma coisa opcional como exibir o link do site do autor.

O nosso método form() ficará da seguinte forma:

/**
 * Formulário para os dados do widget (exibido no painel de controle)
 *
 * @param array $instancia Instância do widget
 */
public function form($instancia) {
	$widget['link_autor'] = (boolean)$instancia['link_autor'];
	?>
	<p><label for="<?php echo $this->get_field_id('link_autor'); ?>"><input id="<?php echo $this->get_field_id('link_autor'); ?>" name="<?php echo $this->get_field_name('link_autor'); ?>" type="checkbox" value="1" <?php if ($widget['link_autor']) echo 'checked="checked"'; ?> /> <?php _e('Exibe o link do autor'); ?></label></p>
	<?php	
}

Eu sei que parece complicado, mas estamos apenas criando um parágrafo com um checkbox e um label… Para definir o ID e o name do input utilizamos recursos do próprio WordPress, assim não caímos no problema de usar um name que já exista… O resultado é um checkbox onde você pode decidir se exibe ou não o link do autor no widget.

Logo no começo do método pegamos uma informação da instância atual do widget, assim caso estejamos editando um widget, saberemos a opção salva no banco de dados.

Método update()

Agora vamos partir para o método update(), que salva os dados e configurações do widget (nesse caso, apenas o checkbox) no banco de dados.

Esse método precisará retornar os dados a serem salvos no banco de dados, ficando assim:

/**
 * Salva os dados do widget no banco de dados
 *
 * @param array $nova_instancia Os novos dados do widget (a serem salvos)
 * @param array $instancia_antiga Os dados antigos do widget
 * 
 * @return array $instancia Dados atualizados a serem salvos no banco de dados
 */
public function update($nova_instancia, $instancia_antiga) {
	$instancia = array_merge($instancia_antiga, $nova_instancia);
	
	return $instancia;
}

Mais uma vez, não tem mistério: sobrescrevemos os valores de $instancia_antiga (o que estava salvo no banco de dados) com os valores de $nova_instancia e retornamos esses dados “mesclados” para serem salvos no banco de dados.

E pra finalizar, o método mais importante…

Método widget()

Esse método será responsável por mostrar os dados (HTML) do widget na lateral do seu blog… Vamos fazê-lo passo-a-passo:

Esse widget irá funcionar apenas nas páginas de post… então precisamos evitar que ele seja exibido nas outras páginas, dessa forma:

public function widget($argumentos, $instancia) {
	if (!is_single()) return;
}

Agora vamos trazer alguns dados sobre o autor:

$autor = array(
	'nome' => get_the_author_meta('display_name'),
	'email' => get_the_author_meta('user_email'),
	'descricao' => get_the_author_meta('description'),
	'link' => get_the_author_meta('user_url')
);

Feito isso é só começar a exibir o HTML do Widget:

// Exibe o HTML do Widget
echo $argumentos['before_widget'];
echo $argumentos['before_title'] . $argumentos['widget_name'] . $argumentos['after_title'];
echo get_avatar($autor['email'], $size = '59');
echo "<h4>{$autor['nome']}</h4>";
echo "<p>{$autor['descricao']}</p>";
if (isset($instancia['link_autor']) && $instancia['link_autor']) {
	echo '<p>Visite o <a href="'. $autor['link'] .'" title="'. $autor['nome'] .'" rel="nofollow" target="_blank">site do autor</a></p>';
}
echo $argumentos['after_widget'];

E o nosso widget está pronto!

Agora você precisa de apenas uma linha para habilitá-lo no seu painel de controle:

add_action('widgets_init', create_function('', 'return register_widget("SobreAutorWidget");'));

Figura 1: Widget em Funcionamento

Espero que tenham gostado! Agora é só você editar o CSS do seu blog para deixar o widget bem apresentável.

Faça o download do código-fonte completo do widget: Aqui

Gostou do artigo? Criou um widget pro seu blog? Comente como foi! Diga o que você conseguiu fazer!

Um grande abraço e até a próxima!

Artigo originalmente publicado em por Thiago Belem: Criando seu primeiro widget no WordPress