{"id":2793,"date":"2014-07-31T03:21:24","date_gmt":"2014-07-31T03:21:24","guid":{"rendered":"http:\/\/www.deuzebranaweb.com.br\/?p=2793"},"modified":"2014-07-31T03:21:24","modified_gmt":"2014-07-31T03:21:24","slug":"criando-seu-primeiro-widget-no-wordpress","status":"publish","type":"post","link":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/2014\/07\/31\/criando-seu-primeiro-widget-no-wordpress\/","title":{"rendered":"Criando seu primeiro widget no WordPress"},"content":{"rendered":"

Fala minha gente!! Trago at\u00e9 voc\u00eas mais um artigo sobre desenvolvimento, dessa sobre WordPress! (Atendendo o pedido do Phelipp de Avila, que me segue no Twitter)<\/p>\n

Segundo a documenta\u00e7\u00e3o oficial sobre widgets do WordPress voc\u00ea deve criar Widgets utilizando um modelo de classe definido por eles, que \u00e9 o que vou ensinar no artigo de hoje.<\/p>\n

Nesse exemplo, iremos criar um widget de \u201cSobre o autor\u201d, que pode ser inserido no sidebar geral do blog (ou num sidebar espec\u00edfico para posts)\u2026 Esse widget ir\u00e1 verificar se estamos em um post (que o WordPress chama de single), e caso estejamos, ir\u00e1 exibir o nome, o avatar e a descri\u00e7\u00e3o do autor do post, todos esses dados vindos diretamente do banco de dados do WordPress.<\/p>\n

A prepara\u00e7\u00e3o<\/p>\n

Antes de tudo, voc\u00ea vai precisar separar seu widget em tr\u00eas m\u00e9todos dentro de uma classe:<\/p>\n

Um m\u00e9todo para gerar e exibir o HTML que aparecer\u00e1 na lateral do seu blog\/site
\nUm m\u00e9todo que ser\u00e1 usado para gerar e exibir o HTML do formul\u00e1rio que aparecer\u00e1 no painel de controle do blog\/site
\nUm m\u00e9todo que ser\u00e1 usado para salvar os dados vindos desse formul\u00e1rio
\nSabendo disso.. vamos come\u00e7ar a nossa classe:<\/p>\n

01
\n< ?php\n02\n \n03\n\/**\n04\n * Widget de Sobre o Autor\n05\n *\n06\n * @author Thiago Belem
\n07
\n * @link http:\/\/blog.thiagobelem.net\/criando-seu-primeiro-widget-no-wordpress\/
\n08
\n *\/
\n09
\nclass SobreAutorWidget extends WP_Widget {
\n10<\/p>\n

11
\n}
\n12<\/p>\n

13
\n?>
\nLembrando que a sua classe DEVE estender a classe WP_Widget, do pr\u00f3prio WordPress.<\/p>\n

Agora vamos inserir quatro m\u00e9todos vazios para deixar a estrutura da classe pronta:<\/p>\n

11
\n\/**
\n12
\n * Construtor
\n13
\n *\/
\n14
\npublic function SobreAutorWidget() { parent::WP_Widget(false, $name = ‘Sobre o autor’); }
\n15<\/p>\n

16
\n\/**
\n17
\n * Exibi\u00e7\u00e3o final do Widget (j\u00e1 no sidebar)
\n18
\n *
\n19
\n * @param array $argumentos Argumentos passados para o widget
\n20
\n * @param array $instancia Inst\u00e2ncia do widget
\n21
\n *\/
\n22
\npublic function widget($argumentos, $instancia) {
\n23<\/p>\n

24
\n}
\n25<\/p>\n

26
\n\/**
\n27
\n * Salva os dados do widget no banco de dados
\n28
\n *
\n29
\n * @param array $nova_instancia Os novos dados do widget (a serem salvos)
\n30
\n * @param array $instancia_antiga Os dados antigos do widget
\n31
\n *\/
\n32
\npublic function update($nova_instancia, $instancia_antiga) {
\n33<\/p>\n

34
\n}
\n35<\/p>\n

36
\n\/**
\n37
\n * Formul\u00e1rio para os dados do widget (exibido no painel de controle)
\n38
\n *
\n39
\n * @param array $instancia Inst\u00e2ncia do widget
\n40
\n *\/
\n41
\npublic function form($instancia) {
\n42<\/p>\n

43
\n}
\nM\u00e9todo form()<\/p>\n

Agora vamos come\u00e7ar pelo m\u00e9todo form(), que exibe o formul\u00e1rio\u2026 Esse widget n\u00e3o precisaria de formul\u00e1rio e op\u00e7\u00f5es pois ele n\u00e3o tem nenhum tipo de configura\u00e7\u00e3o, mas vamos deixar uma coisa opcional como exibir o link do site do autor.<\/p>\n

O nosso m\u00e9todo form() ficar\u00e1 da seguinte forma:<\/p>\n

38
\n\/**
\n39
\n * Formul\u00e1rio para os dados do widget (exibido no painel de controle)
\n40
\n *
\n41
\n * @param array $instancia Inst\u00e2ncia do widget
\n42
\n *\/
\n43
\npublic function form($instancia) {
\n44
\n $widget[‘link_autor’] = (boolean)$instancia[‘link_autor’];
\n45
\n ?>
\n46<\/p>\n

47
\n < ?php \n48\n}\nEu sei que parece complicado, mas estamos apenas criando um par\u00e1grafo com um checkbox e um label\u2026 Para definir o ID e o name do input utilizamos recursos do pr\u00f3prio WordPress, assim n\u00e3o ca\u00edmos no problema de usar um name que j\u00e1 exista\u2026 O resultado \u00e9 um checkbox onde voc\u00ea pode decidir se exibe ou n\u00e3o o link do autor no widget.\n\nLogo no come\u00e7o do m\u00e9todo pegamos uma informa\u00e7\u00e3o da inst\u00e2ncia atual do widget, assim caso estejamos editando um widget, saberemos a op\u00e7\u00e3o salva no banco de dados.\n\nM\u00e9todo update()\n\nAgora vamos partir para o m\u00e9todo update(), que salva os dados e configura\u00e7\u00f5es do widget (nesse caso, apenas o checkbox) no banco de dados.\n\nEsse m\u00e9todo precisar\u00e1 retornar os dados a serem salvos no banco de dados, ficando assim:\n\n28\n\/**\n29\n * Salva os dados do widget no banco de dados\n30\n *\n31\n * @param array $nova_instancia Os novos dados do widget (a serem salvos)\n32\n * @param array $instancia_antiga Os dados antigos do widget\n33\n *\n34\n * @return array $instancia Dados atualizados a serem salvos no banco de dados\n35\n *\/\n36\npublic function update($nova_instancia, $instancia_antiga) {\n37\n $instancia = array_merge($instancia_antiga, $nova_instancia);\n38\n \n39\n return $instancia;\n40\n}\nMais uma vez, n\u00e3o tem mist\u00e9rio: sobrescrevemos os valores de $instancia_antiga (o que estava salvo no banco de dados) com os valores de $nova_instancia e retornamos esses dados \u201cmesclados\u201d para serem salvos no banco de dados.\n\nE pra finalizar, o m\u00e9todo mais importante\u2026\n\nM\u00e9todo widget()\n\nEsse m\u00e9todo ser\u00e1 respons\u00e1vel por mostrar os dados (HTML) do widget na lateral do seu blog\u2026 Vamos faz\u00ea-lo passo-a-passo:\n\nEsse widget ir\u00e1 funcionar apenas nas p\u00e1ginas de post\u2026 ent\u00e3o precisamos evitar que ele seja exibido nas outras p\u00e1ginas, dessa forma:\n\n24\npublic function widget($argumentos, $instancia) {\n25\n if (!is_single()) return;\n26\n}\nAgora vamos trazer alguns dados sobre o autor:\n\n27\n$autor = array(\n28\n 'nome' => get_the_author_meta(‘display_name’),
\n29
\n ’email’ => get_the_author_meta(‘user_email’),
\n30
\n ‘descricao’ => get_the_author_meta(‘description’),
\n31
\n ‘link’ => get_the_author_meta(‘user_url’)
\n32
\n);
\nFeito isso \u00e9 s\u00f3 come\u00e7ar a exibir o HTML do Widget:<\/p>\n

34
\n\/\/ Exibe o HTML do Widget
\n35
\necho $argumentos[‘before_widget’];
\n36
\necho $argumentos[‘before_title’] . $argumentos[‘widget_name’] . $argumentos[‘after_title’];
\n37
\necho get_avatar($autor[’email’], $size = ’59’);
\n38
\necho “<\/p>\n

{$autor[‘nome’]}<\/h4>\n

“;
\n39
\necho “<\/p>\n

{$autor[‘descricao’]}<\/p>\n

“;
\n40
\nif (isset($instancia[‘link_autor’]) && $instancia[‘link_autor’]) {
\n41
\n echo ‘<\/p>\n

Visite o site do autor<\/a><\/p>\n

‘;
\n42
\n}
\n43
\necho $argumentos[‘after_widget’];
\nE o nosso widget est\u00e1 pronto!<\/p>\n

Agora voc\u00ea precisa de apenas uma linha para habilit\u00e1-lo no seu painel de controle:<\/p>\n

1
\nadd_action(‘widgets_init’, create_function(”, ‘return register_widget(“SobreAutorWidget”);’));<\/p>\n

Widget em funcionamento<\/p>\n

Espero que tenham gostado! Agora \u00e9 s\u00f3 voc\u00ea editar o CSS do seu blog para deixar o widget bem apresent\u00e1vel. \ud83d\ude09<\/p>\n

Fa\u00e7a o download do c\u00f3digo-fonte completo do widget: http:\/\/blog.thiagobelem.net\/arquivos\/widget_sobre-autor.class.phps<\/p>\n

Gostou do artigo? Criou um widget pro seu blog? Comente como foi! Diga o que voc\u00ea conseguiu fazer! \ud83d\ude42<\/p>\n

Um grande abra\u00e7o e at\u00e9 a pr\u00f3xima!<\/p>\n","protected":false},"excerpt":{"rendered":"

Fala minha gente!! Trago at\u00e9 voc\u00eas mais um artigo sobre desenvolvimento, dessa sobre WordPress! (Atendendo o pedido do Phelipp de Avila, que me segue no Twitter) Segundo a documenta\u00e7\u00e3o oficial sobre widgets do WordPress voc\u00ea deve criar Widgets utilizando um modelo de classe definido por…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_angie_page":false,"page_builder":"","footnotes":""},"categories":[6],"tags":[],"class_list":["post-2793","post","type-post","status-publish","format-standard","hentry","category-php"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/posts\/2793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=2793"}],"version-history":[{"count":0,"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/posts\/2793\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=2793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/categories?post=2793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/tags?post=2793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}