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:
01
< ?php
02
03
/**
04
* Widget de Sobre o Autor
05
*
06
* @author Thiago Belem
07
* @link http://blog.thiagobelem.net/criando-seu-primeiro-widget-no-wordpress/
08
*/
09
class SobreAutorWidget extends WP_Widget {
10
11
}
12
13
?>
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:
11
/**
12
* Construtor
13
*/
14
public function SobreAutorWidget() { parent::WP_Widget(false, $name = ‘Sobre o autor’); }
15
16
/**
17
* Exibição final do Widget (já no sidebar)
18
*
19
* @param array $argumentos Argumentos passados para o widget
20
* @param array $instancia Instância do widget
21
*/
22
public function widget($argumentos, $instancia) {
23
24
}
25
26
/**
27
* Salva os dados do widget no banco de dados
28
*
29
* @param array $nova_instancia Os novos dados do widget (a serem salvos)
30
* @param array $instancia_antiga Os dados antigos do widget
31
*/
32
public function update($nova_instancia, $instancia_antiga) {
33
34
}
35
36
/**
37
* Formulário para os dados do widget (exibido no painel de controle)
38
*
39
* @param array $instancia Instância do widget
40
*/
41
public function form($instancia) {
42
43
}
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:
38
/**
39
* Formulário para os dados do widget (exibido no painel de controle)
40
*
41
* @param array $instancia Instância do widget
42
*/
43
public function form($instancia) {
44
$widget[‘link_autor’] = (boolean)$instancia[‘link_autor’];
45
?>
46
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'); ?>
47
< ?php
48
}
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:
28
/**
29
* Salva os dados do widget no banco de dados
30
*
31
* @param array $nova_instancia Os novos dados do widget (a serem salvos)
32
* @param array $instancia_antiga Os dados antigos do widget
33
*
34
* @return array $instancia Dados atualizados a serem salvos no banco de dados
35
*/
36
public function update($nova_instancia, $instancia_antiga) {
37
$instancia = array_merge($instancia_antiga, $nova_instancia);
38
39
return $instancia;
40
}
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:
24
public function widget($argumentos, $instancia) {
25
if (!is_single()) return;
26
}
Agora vamos trazer alguns dados sobre o autor:
27
$autor = array(
28
'nome' => get_the_author_meta(‘display_name’),
29
‘email’ => get_the_author_meta(‘user_email’),
30
‘descricao’ => get_the_author_meta(‘description’),
31
‘link’ => get_the_author_meta(‘user_url’)
32
);
Feito isso é só começar a exibir o HTML do Widget:
34
// Exibe o HTML do Widget
35
echo $argumentos[‘before_widget’];
36
echo $argumentos[‘before_title’] . $argumentos[‘widget_name’] . $argumentos[‘after_title’];
37
echo get_avatar($autor[‘email’], $size = ’59’);
38
echo “
{$autor[‘nome’]}
“;
39
echo “
{$autor[‘descricao’]}
“;
40
if (isset($instancia[‘link_autor’]) && $instancia[‘link_autor’]) {
41
echo ‘
Visite o site do autor
‘;
42
}
43
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:
1
add_action(‘widgets_init’, create_function(”, ‘return register_widget(“SobreAutorWidget”);’));
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: http://blog.thiagobelem.net/arquivos/widget_sobre-autor.class.phps
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!