Marcelo Mesquita

Apenas mais um desenvolvedor WordPress

Opções de Widgets

Após criar um widget o próximo passo é adicionar algumas opções a ele, tornando-o mais flexível para o usuário final. Utilizando como exemplo o plugin de posts mais quentes, digamos que você tenha definido a quantidade de cinco posts para serem apresentados mas um usuário queira mostrar apenas três. Para essas situações utilizamos a seguinte função:

register_widget_control('Nome do Widget', 'sua_funcao_de_configuracao', 'largura', 'altura')
Formulário de configuração do Widget

Formulário de configuração do Widget

Essa função permite configurar as opções de seu widget onde ‘Nome do Widget’ é o nome do widget que deseja configurar (o mesmo que informou em ‘register_sidebar_widget’), ‘sua_funcao_de_configuracao’ é a função que deve ser chamada para configurar o plugin e ‘largura’ e ‘altura’ são opcionais e se referem ao tamanho do formulário de configuração.

A sua função de configuração deve possuir um formulário com os campos de configuração e uma rotina para salvar esses dados no banco. O seu formulário não deve conter as tags ‘form’ nem ‘submit’, pois eles são acrescentados automáticamente pelo WordPress de forma a englobar todos os widgets.

Vamos ver uma forma fácil de implementar essa configuração:

function configurar_posts_mais_quentes()
{
  // Inicializa as variáveis necessárias
  $options = array();

  // Salvando as opções
  if($_POST['salvar_posts_mais_quentes'])
  {
    $opcoes['quantidade'] = (int) $_POST['quantidade_de_posts_mais_quentes'];

    // Valor padrão, caso nada tenha sido informado
    if(empty($opcoes['quantidade'])) $opcoes['quantidade'] = 5;

    update_option('posts_mais_quentes', $opcoes);
  }

  // Carregar as opções desse widget
  $opcoes = get_option('posts_mais_quentes');

  // Formulário
  ?>
    <input type="hidden" name="salvar_posts_mais_quentes" value="1" />

    <p>
      <label for="quantidade_de_posts_mais_quentes">Quantidade:</label>
      <input type="text" name="quantidade_de_posts_mais_quentes" maxlength="2" value="<?php print $opcoes['quantidade']; ?>" class="widefat" />
    </p>
  <?php
}

Explicando… começando na linha 18 ($opcoes = get_option(‘posts_mais_quentes’)) carrega as opções desse widget do banco. Notem que usei a tabela ‘options’ do banco do WordPress para salvar as opções do plugins, como foi explicado no post plugins e banco de dados.

Agora vamos para o início do formulário na linha 22, onde adiciono um campo oculto (<input type=”hidden” name=”salvar_posts_mais_quentes” value=”1″ />) apenas para ter controle quando o formulário for enviado. Também adicionei um campo de texto na linha 26 (<input type=”text” name=”quantidade_de_posts_mais_quentes” maxlength=”2″ value=”<?php print $opcoes[‘quantidade’]; ?>” class=”widefat” />) para que o usuário possa informar a quantidade de posts que devem aparecer em seu widget.

Voltando para a linha 7, analizo se o formulário foi enviado, checando se o campo oculto foi informado, então valido o dado recebido do formulário ($opcoes[‘quantidade’] = (int) $_POST[‘quantidade_de_posts_mais_quentes’]) e, finalmente, salvo as informações no banco (update_option(‘posts_mais_quentes’, $opcoes)). Notem também que as informações desse widget foram salvas como array, assim é possível armazenar todas as configurações em um único local, poupando quantidade de acesso ao banco e organizando os dados.

Tentei montar esse formulário da forma mais simples possível, além disso coloquei alguns comentários para facilitar o entendimento.

Mas não é só isso, depois de salvar as configurações desse widget ainda falta carregá-las na hora de montar o widget:

function posts_mais_quentes($args)
{
  global $wpdb;

  // Carregar as opções desse widget
  <span style="color: #990000;">$opcoes = get_option('posts_mais_quentes');</span>

  // 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 <span style="color: #990000;">{$opcoes['quantidade']}</span>");

  // 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'];
}

Essa função é a mesma do post anterior com duas pequenas alterações. Uma na linha 6, onde carrego as configurações salvas e na linha 9 onde uso a quantidade de posts informadas pelo usuário para limitar a consulta (LIMIT {$opcoes[‘quantidade’]}).

É isso… crie novas possibilidades para seus widgets, os usuários finais possuem sempre gostos diversos, simplifique a vida deles. Abaixo coloco o código completo desse estudo com uma opção a mais para a escolha do título do widget.

&lt;?php
/*
Plugin Name: Posts mais quentes
Description: Lista posts mais comentados
Version: 0.2
Author: Marcelo Mesquita
Author URI: http://www.marcelomesquita.com/
*/

// Posts Mais Quentes
function posts_mais_quentes($args)
{
  global $wpdb;

  // Carregar as opções desse widget
  $opcoes = get_option('posts_mais_quentes');

  // Valor padrão, caso nada tenha sido informado
  if(empty($opcoes['quantidade'])) $opcoes['quantidade'] = "5";

  // 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 {$opcoes['quantidade']}");

  // Usando o modelo de widgets do tema
  print $args['before_widget'];
  print $args['before_title'] . $opcoes['titulo'] . $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'];
}

// Configurações dos Posts Mais Quentes
function configurar_posts_mais_quentes()
{
  // Inicializa as variáveis necessárias
  $opcoes = array();

  // Salvando as opções
  if($_POST['salvar_posts_mais_quentes'])
  {
    $opcoes['titulo'] = $_POST['titulo_dos_posts_mais_quentes'];
    $opcoes['quantidade'] = (int) $_POST['quantidade_de_posts_mais_quentes'];

    // Valor padrão, caso nada tenha sido informado
    if(empty($opcoes['quantidade'])) $opcoes['quantidade'] = "5";

    update_option('posts_mais_quentes', $opcoes);
  }

  // Carregar as opções desse widget
  $opcoes = get_option('posts_mais_quentes');

  // Formulário
  ?&gt;
    &lt;input type="hidden" name="salvar_posts_mais_quentes" value="1" /&gt;

    &lt;p&gt;
      &lt;label for="titulo_dos_posts_mais_quentes"&gt;Título:&lt;/label&gt;
      &lt;input type="text" name="titulo_dos_posts_mais_quentes" maxlength="26" value="&lt;?php print $opcoes['titulo']; ?&gt;" class="widefat" /&gt;
      &lt;label for="quantidade_de_posts_mais_quentes"&gt;Quantidade:&lt;/label&gt;
      &lt;input type="text" name="quantidade_de_posts_mais_quentes" maxlength="2" value="&lt;?php print $opcoes['quantidade']; ?&gt;" class="widefat" /&gt;
    &lt;/p&gt;
  &lt;?php
}

// Ativar o widget
function posts_mais_quentes_widgets()
{
  // Adicionar o widget
  register_sidebar_widget('Posts Mais Quentes', 'posts_mais_quentes');

  // Adicionar o controle ao widget
  register_widget_control('Posts Mais Quentes', 'configurar_posts_mais_quentes');
}

// Carregar o widget
add_action('widgets_init', 'posts_mais_quentes_widgets');
?&gt;

Boa sorte!

13 Comments

  • responder

    George Campos

    9 anos atrás

    marcelo,

    Você está fazendo um trabalho fantástico com esse tutorial de criação de um plugin/widget.

    PArabéns.

    George

  • responder

    Criando Widgets para o WordPress 2.8 » Marcelo Mesquita

    8 anos atrás

    […] Não pretendo explicar novamente a lógica de criação de um widget, portanto vou simplesmente refazer o widget ‘Posts Mais Quentes’ nesse novo modelo e caso tenham dúvidas, consultem o post Opções de Widgets. […]

  • responder

    Criando Widgets para o WordPress 2.8 « Xemelê

    8 anos atrás

    […] Não pretendo explicar novamente a lógica de criação de um widget, portanto vou simplesmente refazer o widget ‘Posts Mais Quentes’ nesse novo modelo e caso tenham dúvidas, consultem o post Opções de Widgets. […]

  • responder

    diego

    8 anos atrás

    onde crio o widget, no dreamweaver?

  • responder

    Paulo Caldera

    8 anos atrás

    Muito bom seu tutorial. Mas estou com um problema.
    Usei o mesmo codigo acima para criar um widget e funcionou perfeitamente mas qdo vou criar outro baseado no mesmo ele ativa, mas a pagina admin do wordpress fica toda distorcida. Qual deve ser a causa?
    Obrigado!!!

  • responder

    Raphael Figa

    7 anos atrás

    Marcelo

    Primeiramente parabéns pelo artigo, apenas com ele criei um widget, e falta uma coisa para ficar redondo.
    Gostaria de poder utilizar o widget criado varias vezes com diferentes configurações cada. Igual o widget nativo “texto” que voce insere quantos precisar. Pode dar a dica de como fazer? Vlw

    Obrigado

    Grandes abraço.

    Até mais

  • responder

    Fernando Peixoto

    6 anos atrás

    Olá Marcelo, bacana este post. Eu tenho um blog na qual o widgets não funciona e gostaria de colocar mais widgets, tento ir na opção de tela do widgets para ativá-la, mas não consigo. Pode me esclarecer melhor sobre este assunto? Desde já agradeço.

  • responder

    stallefish

    6 anos atrás

    Oi Fernando,
    os widgets são caixa que você coloca em locais determinados do template (sidebar), por isso o tema precisa estar preparado para recebe-los, mas nem todos estão.

    No WordPress basta utiliza a função register_sidebar (http://codex.wordpress.org/Function_Reference/register_sidebar) que o menu ‘Aparencia > Widgets’ fica ativo na área administrativa, a partir daí é só arrastar o widget que você quer para o sidebar.

    Não sei se era bem isso o que você queria… qualquer coisa é só avisar.

    Abraço.

  • responder

    Fernando Peixoto

    6 anos atrás

    Olá Marcelo, entendi mais ou menos, mas fico com medo de mexer para não dá pane ou problema o meu tema permite widgets. Se você for observar http://www.rendawebvirtual.com embaixo da coluna, quero colocar caixa de subscrição e também anúncios e outros widgets. Dê uma olhada no link acima e tire suas conclusões, qualquer coisa eu peço pra você modificar pra mim, ok! Fico no aguardo! Se quiser pode enviar a resposta pelo email que eu cadastrei no seu blog.

    • responder

      Marcelo Mesquita

      6 anos atrás

      Oi Fernando, você não tem um local pra testar seu tema? Acho que o maior problema é o site ficar desconfigurado mas você só precisaria remover os widgets para normalizar.

      Abraço.

      • responder

        Fernando Peixoto

        6 anos atrás

        Olá Marcelo,muito obrigado por esta informação eu já troquei o tema e pra melhor, valeu!

Deixe uma resposta

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