Criando Widgets

  • No WordPress o sistema de widgets permite que usuários comuns ativem funcionalidades no site sem precisar, necessáriamente, entender HTML, CSS, PHP, etc. Mas para isso, esses usuários precisam que desenvolvedores se dediquem um pouco mais para tornar seus produtos (plugins, temas, etc) aptos a trabalhar dessa forma.

    Para adicionar um widget, basta criar uma uma função e informar para o WP que aquela função deve ser tratada como um widget. Isso é feito da seguinte forma:

    register_sidebar_widget('Nome do Widget', 'sua_funcao', 'sua_classe');

    É tão simples quanto parece, o ‘Nome do Widget’ é o identificador do widget, ‘sua_funcao’ é a função que deve ser chamada quando esse widget estiver ativo e ‘sua_classe’ é opcional e se refere ao nome da classe css que deve ser inserida nesse widget.

    Para que o seu widget se adeque ao tema é importante lembrar sempre de usar o modelo de widget definido no próprio tema para conter o conteúdo de sua função. Esse modelo é sempre embutido em forma de argumento na sua função, você só precisa usá-lo. Um exemplo vale mais do que mil palavras, então vejamos como ficaria:

    sua_funcao(<span style="color: #880000;">$args</span>)
    {
      print <span style="color: #880000;">$args['before_widget']</span>;
      print <span style="color: #880000;">$args['before_title']</span> . "Nome do Widget" . <span style="color: #880000;">$args['after_title']</span>;
      print "conteúdo de seu widget";
      print <span style="color: #880000;">$args['after_widget']</span>;
    }

    Agora que você sabe que é fácil, não tem desculpa para não utiliza-lá em seus plugins. Assim, os usuário não precisarão fazer edições no template, para usufruir dos benefícios de seus plugins, além de tornar mais simples o seu controle.

    Juntando o que você aprendeu até agora sobre criar um plugin mas o que você acabou de aprender sobre criação de widget e um pouco de criatividade, já é possível fazer algumas coisas interessantes. Que tal um plugin que mostre no sidebar os posts mais quentes:

    &lt;?php
    /*
    Plugin Name: Posts mais quentes
    Description: Lista posts mais comentados
    Version: 0.1
    Author: Marcelo Mesquita
    Author URI: http://www.marcelomesquita.com/
    */
    
    // Posts Mais Quentes
    function posts_mais_quentes($args)
    {
      global $wpdb;
    
      // Recuperando os posts
      $hot_posts = $wpdb-&gt;get_results("SELECT ID, post_title, comment_count FROM {$wpdb-&gt;posts} ORDER BY comment_count DESC LIMIT 5");
    
      // Usando o modelo de widgets do tema
      print $args['before_widget'];
      print $args['before_title'] . "Mais Quentes" . $args['after_title'];
    
      print "&lt;ul&gt;";
    
      // Listando os posts mais quentes
      foreach($hot_posts as $hot_post)
        print "&lt;li&gt;&lt;a href='" . get_permalink($hot_post-&gt;ID) . "'&gt;{$hot_post-&gt;post_title} ({$hot_post-&gt;comment_count})&lt;/a&gt;&lt;/li&gt;";
    
      print "&lt;/ul&gt;";
    
      print $args['after_widget'];
    }
    
    // Ativa o sidebar
    function posts_mais_quentes_widgets() {
      register_sidebar_widget('Posts Mais Quentes', 'posts_mais_quentes');
    }
    
    // Carregar o widget
    add_action('widgets_init', 'posts_mais_quentes_widgets');
    
    ?&gt;

    Agora é só ativar o plugin e adicionar o widget ao sidebar para ve-lo funcionando. Colher de chá!

    Agradecimentos

    Obrigado ao Rômulo por corrigir o código do plugin acima.

15 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Romulo

    March 8, 2009

    Muito bom Marcelo =)
    ja to comecando a me animar pra fazer um plugin

  • Kaleb Martins

    March 11, 2009

    Muito legal..Agora já da para criar produtos e oferecer serviços para os clientes de uma forma melhor.

    Abraços e parabens pelo grande trabalho ;-)

  • romulo

    March 14, 2009

    Tudo bom marcelo?
    Eu tava seguindo o seu tutorial, mas na hora de ativar o plugin sempre tava dando erro.
    eu consegui faze-lo funcionar da seguite forma:
    criei um funcao

    function posts_mais_quentes_widgets() {
    register_sidebar_widget(‘Posts Mais Quentes’, ‘posts_mais_quentes’);
    }

    e depois coloquei uma action

    add_action(‘plugins_loaded’, ‘posts_mais_quentes_widgets’);

    ai ele funcionou tranquilo, mas queria saber se essa forma que eu utilizei e certa (ou uma gambiarra)

    de qualquer forma seus tutoriais estao me ajudando muito.
    abracos

    • Marcelo Mesquita

      March 14, 2009

      Tem razão Rômulo, falha minha… isso que dá publicar um código sem testar. =P

      Obrigado por compartilhar essa informação.

  • Opções de Widgets » Marcelo Mesquita

    March 14, 2009

    [...] Criando Widgets [...]

  • Tiago Marques

    April 16, 2009

    Eu criei uma radio no site Cotonete e queria criar um widget da minha radio, mas não sei se é possivel fazer nem sei como fazer, porque queria esse widget para postar num forum. Sera que pode ajudar?

    • Marcelo Mesquita

      April 16, 2009

      Oi Tiago,
      esse post é sobre como criar widgets para wordpress, acho que deixei o título um pouco vago. Mas acredito que o Cotonete deva fornecer um embed da sua rádio, assim você pode adicioná-la em qualquer site.

      Mas se ainda pretende criar um widget para a sua rádio, a primeira coisa que deve avaliar é como recuperar os dados do site do Cotonete. Normalmente isso pode ser feito com XML ou uma API fornecida pelo próprio site, mas o Cotonete parece não fornecer estes.

  • BRaNaTi

    April 19, 2009

    Mto bom!!

  • Rômulo

    May 1, 2009

    Tudo bom marcelo ?
    continuando com as minhas esperiencias com plugins pra WordPress, resolvi colocar o tinymce e funcionou legal, mas depois fiquei pensando…
    Como e que eu utilizaria o tinymce que vem com o WordPress?
    Vc tem alguma dica pra isso ?

    • Marcelo Mesquita

      May 1, 2009

      Oi Rômulo,
      eu já vi um plugin que fazia isso, vou procurar aqui para tentar descobrir.

      Abraço.

  • Leonardo

    November 17, 2009

    post legal, valeu mesmo cara!!!!

  • athynir

    January 3, 2010

    Muito importante o artigo que me orientou a criar um widget

    Athynir (sites de divulgação)

  • Denis Forigo

    March 20, 2010

    Oi Marcelo, tudo bem? Obrigado pelo tutorial. Estou crindo um plugin e caiu como uma luva. Agora uma questão: e se eu quiser que o widget seja multi-instâncias? Tem alguma maneira fácil?

    []s

  • Denis Forigo

    March 22, 2010

    Ops, não tinha visto,desculpe-me. Valeu! :)