Widgets

Os widgets são pequenas aplicações que podem ser adicionadas a um sistema. Em um site, os widgets são comumente usados para exibir funcionalidades que não são produzidas pelo próprio site, como clima/tempo, índices financeiros, entre outros, ou para exibir atalhos para áreas ou temas importantes do site, como lista de categorias, nuvens de tags, últimos comentários, entre outros.

Voltando a nossa conversa de desenvolvedor, como podemos construir um widget para o nosso custom post? O processo é muito simples.

A classe WP_Widget

Para criar-mos um widget, basta criar uma classe qualquer que extenda a classe WP_Widget e implementar o construtor e três simples métodos:

• construtor: O construtor da nossa classe irá instanciar o construtor da super-classe, passando os parâmetros de configuração do nosso plugin.
• widget(): é o método que irá exibir o conteúdo do seu widget no site. É o único método, além do construtor, cuja a implementação é obrigatória.
• form(): é o método que exibirá um formulário de edição na administração do WordPress, onde nós colocaremos as configurações do widget que podem ser alteradas pelo adminstrador do blog. Caso o seu widget não possua nenhuma configuração a ser feita, este método não precisa ser implementado.
• update(): é o método que tratará as opções inseridas no método form(). Se não houver opções a serem configuradas ou os dados inseridos não precisem ser formatados, este método não precisa ser implementado.

Vamos então a implementação do nosso widget.

O Código

Vou criar uma classe chamada Widget_Demonstracao, que extenderá a classe WP_Widget, e implementar cada um dos três métodos, além de implementar o construtor para o nosso plugin. Nesse caso, eu segui o tutorial do wordpress. O código ficou assim.

class Widget_Demonstracao extends WP_Widget {

 function __construct() {
  $widget_ops = array( 'classname' => 'widget_demostracao', 'description' => __( "Últimos posts de demostração" ) );
  parent::__construct('demostracao', __('Demostração'), $widget_ops);
 }

 function widget( $args, $instance ) {
  extract( $args );

  $titulo = apply_filters('widget_title', $instance['titulo'], $instance, $this->id_base);
  $qtd = !empty( $instance['qtd'] ) ? $instance['qtd'] : '10';

  echo $before_widget;
  if ( $titulo )
   echo $before_title . $titulo . $after_title;

  $args = array(
   'showposts' => $qtd
  );
  $query = new WP_Query_Demonstracao($args);
  if($query->have_posts()){
   ?>
   <ul>
    <?php
    while ($query->have_posts()){
     $query->the_post();
     ?>
     <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
     <?php
    }
    ?>
   </ul>
   <?php
  }
  // restaurar a consulta original do WP
  wp_reset_query();
  echo $after_widget;
 }

 function update( $new_instance, $old_instance ) {
  $instance = $old_instance;
  $instance['titulo'] = strip_tags($new_instance['titulo']);
  $instance['qtd'] = strip_tags($new_instance['qtd']);

  return $instance;
 }

 function form( $instance ) {
  //Defaults
  $instance = wp_parse_args( (array) $instance, array( 'titulo' => 'Últimas demonstrações') );
  $titulo = esc_attr( $instance['titulo'] );
  $qtd = isset($instance['qtd']) ? (int) $instance['qtd'] : 10;
  ?>
  <p><label for="<?php echo $this->get_field_id('titulo'); ?>">Titulo</label>
  <input class="widefat" id="<?php echo $this->get_field_id('titulo'); ?>" name="<?php echo $this->get_field_name('titulo'); ?>" type="text" value="<?php echo $titulo; ?>" /></p>
  <p><label for="<?php echo $this->get_field_id('qtd'); ?>">Quantidade de posts para exibir</label>
  <input class="widefat" id="<?php echo $this->get_field_id('qtd'); ?>" name="<?php echo $this->get_field_name('qtd'); ?>" type="text" value="<?php echo $qtd; ?>" /></p>
  <?php
 }

}

Ok, eu sei que o código ficou complicado. Mas ele está disponível para download. Vamos a explicação dos métodos.

__construct()

É o construtor do nosso widget. Para os menos desavisados, ou que ainda não estão familiarizados com a sintaxe do PHP5, __construct() é um método genérico de construtor de classes, que substitui o método com a mesma assinatura da classe. Se o seu servidor ou ambiente local roda o PHP4, esse método não será chamado e seu widget não funcionará. Optei por mostrar esse método, visto que as versões mais recentes do WordPress exigem, no mínimo, o PHP 5.2.4, e eu só uso o WordPress atualizado. Se você ainda assim tiver dúvidas de como fazer funcionar no PHP4 e/ou ainda roda uma versão anterior a 3.2 do WordPress, escreva-me e eu terei o prazer em ajudar.

widget()

É o método que faz a saída do widget no seu tema. Ele recebe dois parâmetros, a primeira com as configurações feitas pelo tema e a segunda com os dados da configuração da instância feita pelo administrador do site.

form()

É o método que tem o formulário com as opções de configuração do widget. Nela você pode deixar com que o administrador altere o titulo do widget, ou quais as taxonomias que serão exibidas, quantidade de posts, ou quaisquer configurações pertinentes ao seu widget. Ele recebe um parâmetro com as configurações atuais do seu widget.

update()

É o método que trata as opções digitadas no formulário do método form(), antes de salva-las. O salvamento será feito pela classe WP_Widget, e você não precisa se preocupar com isso. Ele recebe dois parâmetros, um com os dados digitados pelo administrador do site e um com os dados anteriores a alteração.

Feito isso, só falta inicializar-mos nosso widget, para que o wordpress possa exibir-lo na área de widgets. Para isso, faremos do mesmo modo que fizemos com o nosso plugin, só que usaremos a action widgets_init.

add_action( 'widgets_init', 'registerWidgetDemostracao' );
function registerWidgetDemostracao(){ register_widget("Widget_Demonstracao"); }

Observem que o parâmetro da função register_widget é o nome da nossa classe. Isso é obrigatório.

Feito isso, basta ativar o plugin (se ainda não estiver ativo), ir em Aparência > Widgets e arrastar seu widget para sua sidebar. Pronto, seu widget estará ativo no seu site.

Sem mais, por enquanto.

Se você já teve a curiosidade de olhar a página de configuração de links permanentes do wordpress, já deve ter percebido um link para a documentação que ensina como customizar a url do seu blog/site. Normalmente, os blogs em wordpress usam a estrutura /ANO/MES/DIA/POST, mas essa estrutura é customizável. Não seria interessante usar isso em nosso plugin? Eventualmente é, e por algum motivo desconhecido, as tags de URL padrões do wordpress só funcionam para os posts nativos, não funcionando para os custom posts criados pelos desenvolvedores. Mas isso é facilmente contornável, com apenas um filtro e um método no nosso plugin. Vejamos como:

No método init() do nosso plugin, vamos colocar um filtro para que, toda vez que a url for gerada, ela passe por um método nosso, onde faremos o tratamento necessário.

add_filter('post_type_link', array(&$this, 'demonstracao_post_type_link'));

Feito isso, vamos criar o método demonstracao_post_type_link():

function demonstracao_post_type_link($post_link, $id = 0, $leavename = false){
	if (strpos('%author%', $post_link) < 0){
		return $post_link;
	}
	$post = get_post($id);
	if (!is_object($post) || $post->post_type != 'demonstracao'){
		return $post_link;
	}
	$author = get_the_author_meta('user_nicename', $post->post_author);
	return str_replace('%author%', $author, $post_link);
}

Observe que eu estou fazendo um tratamento para trocar a tag %author%, que é uma tag nativa. Você poderia usar qualquer tag, e não precisa usar %% como marcador. Pra finalizar, é preciso alterar a estrutura do rewrite do nosso custom post para refletir a nossa estrutura dinâmica. No plugin anterior, altere a linha onde tem

'rewrite' => array(
	'slug' => 'demonstracao',
	'with_front' => false,
	'feeds' => true,
	'pages' => true,
),

por

'rewrite' => array(
	'slug' => 'demonstracao/%author%',
	'with_front' => false,
	'feeds' => true,
	'pages' => true,
),

Feito isso, a URL do nosso plugin terá o slug do autor do post dentro da sua estrutura de link permanente.

Hoje, no twitter, surgiu uma dúvida do blog do Walmart Games em como consertar um erro que existia em um post deles: o vídeo do youtube estava estourando o layout do blog. Essa solução é muito simples e envolve 2 passos básicos na configuração do tema/sistema. Vou explicar como resolver.

Jetpack

O primeiro passo é instalar o Jetpack. É um plugin feito pela equipe que desenvolve o WordPress.com e inclui diversas funcionalidades, como estatísticas, widget do twitter, links encurtados do wp.me, entre outros. Mas vou focar numa funcionalidade específica: incluir vídeos e áudios.

Configurando o tema

Pra configurar o tema, é preciso uma edição muito simples no arquivo functions.php do tema. Abra o arquivo, e em qualquer lugar dele (costuma-se colocar no inicio), insira o seguinte código:

if ( ! isset( $content_width ) )
	$content_width = 640; // tamanho da área de conteúdo

Pronto. Seu tema está apto a receber vídeos sem estragar o seu layout.

Inserindo Vídeo

Pra completar a dica, vou ensinar a inserir vídeos no post de uma maneira super fácil. Depois de instalado o plugin e feita a configuração, o Jetpack dá várias maneiras de colocar vídeos. A que ele ensina é usando shortcodes. Basicamente você vai inserir um pequeno código no seu post e o sistema irá trocar esse código pelo vídeo. Segue um exemplo:

[ youtube http://www.youtube.com/watch?v=VvaZA5NwMTI ] (sem espaços no inicio e fim)

resultaria em:

Mas acho que todos concordam que isso não é tão fácil, né? Pra vídeos do Youtube ou do Vimeo (não testei de outros canais de vídeos, mas acho que funciona), basta colar a url do vídeo em uma linha (sem nada de formatação antes nem depois) e o Jetpack se encarrega de fazer o ‘trabalho sujo’. Ou seja, basta isso:

http://www.youtube.com/watch?v=VvaZA5NwMTI

pra ter isso:

Vale uma dica interessante. Qualquer outra informação na URL que não seja o endereço do vídeo (youtube.com/watch?v=iddovideo) pode impedir que o vídeo seja exibido. Se isso acontecer, é só fazer a correção da URL que tudo fica certo.

Inserindo Áudio

Infelizmente não tem como inserir automaticamente o player de áudio como fizemos com o de vídeo. Pra inserir áudio no site teremos que fazer o upload do arquivo para o banco de mídia e usar o shortcode [ audio urldamp3 ] (sem espaços no inicio e fim) e o sistema irá colocar o player abaixo.

Se você gostou da música, ela se chama Os Três Ponteiros, de uma banda de Recife chamada Habagaceira (que mudou de nome para Outro Sim). Mais músicas deles podem ser encontradas no Myspace da banda.

Sem mais, por enquanto.

• Corporativo – Tengu Propaganda, dos meus amigos publicitários;
• Moda – Eva Miranda, parceira de trabalho;
• Opinião – Ora BoLas!, do multifunção Leo Arcoverde;
• Profissional – Biscutar, da grande artista e companheira de trabalho Larissa Lima.

Votem e mim e votem neles

Colunas extras

Para colocar colunas extras na listagem de posts, vamos precisar usar um filtro e uma ação. São eles:

• Filtro manage_edit-${post_type}_columns, que irá colocar as colunas no inicio e no fim da tabela da listagem;
• Ação manage_${post_type}_posts_custom_column, que irá preencher os valores customizados nas linhas (se existir);

Os filtros e ações devem estar no método init() em quaisquer casos. Vamos ao código:

add_filter("manage_edit-demonstracao_columns", array(&$this, "edit_columns"));
add_action("manage_demonstracao_posts_custom_column", array(&$this, "custom_columns"));

Observer que existe um código “estranho” nas linhas. O array(&$this, ‘nome_da_funcao’) serve apenas para referenciar que estamos chamando um método dentro da própria classe. Vamos criar os métodos edit_columns e custom_columns.

Método edit_columns

function edit_columns($columns){
	// posição onde será inserida as colunas. no caso, após o título.
	$posicao = 2;
	// separando o array, para inserir no meio.
	$antes = array_reverse(array_splice(array_reverse($columns), count($columns)-$posicao));
	$depois = array_splice($columns, $posicao);
	// nome_da_coluna => label_da_coluna
	$novascolunas = array(
		"demonstracao_categorias" => "Categorias",
	);
	$columns = array_merge($antes, $novascolunas, $depois);
	return $columns;
}

Método custom_columns

function custom_columns($column){
  // Customizar a saída das colunas
  global $post;
  switch ($column){
    case "demonstracao_categorias":
      $taxonomy = "categorias";
      $tipos = get_the_terms(0, $taxonomy);
      $tipos_html = array();
      if (is_array($tipos)){
        foreach ($tipos as $tipo)
          array_push($tipos_html, $tipo->name);
        echo implode($tipos_html, ", ");
      }
    break;
  }
}

Feito isso, temos a coluna ‘Categorias’ após a coluna ‘Titulo’.

Campos extras

Para criar campos extras, vamos precisar das wp_insert_post e admin_init. Eu costumo criar um array de elementos como atributo da classe, pra facilitar a inserção dos campos extras. Esses campos são chamados de postmetas ou custom fields. Para essa demonstração, vou criar dois campos extras, ambos campos texto. Assim criamos um array, dentro da nossa classe:

var $meta_fields = array('umcampoextra','outrocampoextra');

Após isso, adicionamos os métodos as ações.

add_action("wp_insert_post", array(&$this, "wp_insert_post"), 10, 2);
add_action("admin_init", array(&$this, "admin_init"));

Agora só falta criar os métodos ‘wp_insert_post’ e ‘admin_init’

function wp_insert_post($post_id, $post = null){
  if ($post->post_type == "demonstracao"){
    // Loop nos dados do POST
    foreach ($this->meta_fields as $key){
      $value = @$_POST[$key];
      if (empty($value)){
        delete_post_meta($post_id, $key);
        continue;
      }
      // Se o valor é uma string, ele deve ser único
      if (!is_array($value)){
        // Atualizar meta
        if (!update_post_meta($post_id, $key, $value)){
          // Ou inserir meta
          add_post_meta($post_id, $key, $value);
     	}
      }else{
        // Se o valor passado for um array, devemos remover todos os dados anteriores
        delete_post_meta($post_id, $key);
        // Loop no array adicionando os valores ao post meta como entradas diferentes com o mesmo nome
        foreach ($value as $entry)
          add_post_meta($post_id, $key, $entry);
      }
    }
  }
}

function admin_init(){
  // Adicionando box de mais informações - http://codex.wordpress.org/Function_Reference/add_meta_box
  add_meta_box("info", "Mais Informações", array(&$this, "info_options"), "demonstracao", "normal", "high");
}

// Administrar conteúdo do post meta
function info_options(){
  global $post;
  $custom = get_post_custom($post->ID);
  $umcampoextra = $custom["umcampoextra"][0];
  $outrocampoextra = $custom["outrocampoextra"][0];
  ?>
  <label for="umcampoextra">Um campo extra:</label>
  <br />
  <input type="text" id="umcampoextra" name="umcampoextra" value="<?php echo $umcampoextra; ?>" style="width:100%;" />
  <br />
  <label for="outrocampoextra">Outro campo extra:</label>
  <br />
  <input type="text" id="outrocampoextra" name="outrocampoextra" value="<?php echo $outrocampoextra; ?>" style="width:100%;" />
  <br />
  <?php
}

Feito isso, temos o nosso plugin pronto. Agora é só preparar o seu tema (ou do seu cliente) e publicar o site. Para baixar o plugin de demonstração, clique aqui.

Galeria de Fotos

Se você tem alguma sugestão de tema ou alguma dúvida de WordPress, escreva pra mim que eu terei o maior prazer em responder. Quem sabe a sua dúvida não vira um artigo aqui.

• Saber programar em PHP;
• Conhecer um pouco do funcionamento do WordPress;
• Ler o artigo de como escrever um plugin;
• Conhecer o funcionamento de ações e filtros no WordPress;

Vamos ao trabalho.

Cabeçalho do plugin

Todo plugin deve ter um cabeçalho. Ele é padrão. Ao colocar seu plugin na pasta específica do sistema, ele lerá esse cabeçalho e exibirá as informações na lista de plugins. O nosso plugin terá o seguinte cabeçalho:

/*
Plugin Name: Demonstração
Plugin URI: http://www.gmmcal.com.br
Description: Plugin de Demonstração
Author: Gustavo Cunha
Version: 1.0
Author URI: http://www.gmmcal.com.br
*/

Observe que temos os seguintes campos: Nome do plugin, url do plugin (onde ele poderá ser baixado), descrição, autor, versão e url do autor. Sem esses dados, o WordPress não reconhece seu plugin, e fatalmente você não vai conseguir ativar ele.

A base do plugin

Nosso plugin será uma classe chamada Demonstração. Ou seja, nosso plugin começa assim:

class Demonstracao {
	function Demonstracao(){
	}
	function init(){
		// algum código aqui
	}
}

No método init() iremos colocar o nosso código de criação do plugin. Mas para que o método init() seja executado, precisamos dizer ao WordPress que ele existe. Para isso, vamos adicionar uma função a ação ‘init’. Fazemos isso assim:

add_action("init", "demonstracaoInit");
function demonstracaoInit() {
	$d = new Demonstracao();
	$d->init();
}

Pronto. Nosso método será executado ao instalar-mos o plugin.

Registrando o Custom Post Type

Como eu falei no inicio desse post, nós vamos usar apenas funções nativas do WordPress. O primeiro trunfo chama-se Custom Post Type. Com ele, pode-se criar toda uma estrutura de CRUD com apenas uma linha. Mais simples que isso, acho que é impossível. Para registrar um novo custom post type, usamos a função register_post_type. A chamada dessa função será colocada dentro do método init() da nossa classe.

$labels = array(
	'name' => 'Demonstração',
	'singular_name' => 'Demonstração',
	'add_new' => 'Adicionar novo',
	'add_new_item' => 'Adicionar nova demonstração',
	'edit_item' => 'Editar Demonstração',
	'new_item' => 'Nova Demonstração',
	'all_items' => 'Todas as Demonstrações',
	'view_item' => 'Ver Demonstração',
	'search_items' => 'Pesquisar Demonstração',
	'not_found' =>  'Nenhuma demonstração encontrada',
	'not_found_in_trash' => 'Nenhuma demonstração encontrada no lixo',
	'parent_item_colon' => 'Demonstração pai',
	'menu_name' => 'Demonstração'
);
$args = array(
	'labels' => $labels,
	'description' => '',
	'public' => true,
	'publicly_queryable' => true,
	'exclude_from_search' => false,
	'show_ui' => true,
	'show_in_menu' => true,
	'menu_position' => 25,
	'menu_icon' => NULL,
	'hierarchical' => false,
	'supports' => array(
		'title',
		'editor',
		'thumbnail',
		'excerpt',
	),
	'has_archive' => true,
	'rewrite' => array(
		'slug' => 'demonstracao',
		'with_front' => false,
		'feeds' => true,
		'pages' => true,
	),
	'query_var' => 'demonstracao',
	'can_export' => true,
	'show_in_nav_menus' => false,
	'capability_type' => 'post',
);
register_post_type('demonstracao',$args);

Não vou detalhar o funcionamento dessa função, pois a mesma já é muito bem detalhada na documentação (ver link). Após essa linha, já temos a listagem, edição, deleção ou quaisquer recursos que o post do WordPress possa nos dar. Mas um post puro não é algo muito comum. Normalmente os posts são categorizados,  a fim de agrupar conteúdos semelhantes. Vamos fazer isso então.

Registrando Custom Taxonomies

Para o WordPress, a categorização de posts é chamada de taxonomia. Para criar uma Custom Taxonomy é tão fácil quanto registrar um custom post. Basta usar a função register_taxonomy. Ela também irá no método init().

register_taxonomy(
	"categorias",
	array("demonstracao"),
	array(
		"public" => true,
		"show_in_nav_menus" => true,
		"show_ui" => true,
		"show_tagcloud" => false,
		"hierarchical" => true,
		"label" => "Categorias",
		"singular_label" => "Categoria",
		"query_var" => "categorias",
		"rewrite" => array(
			"slug" => "categorias",
			"with_front" => true,
			"hierarchical" => true
		)
	)
);

Pronto. Observe que ela foi anexada ao custom post “demonstracao”. Para maiores detalhes, olha a descrição da função na documentação do WordPress.

Pronto. Nosso plugin está pronto. Basta você ativar ele na administração do seu site e ser feliz! No próximo post, vou mostrar como colocar colunas extras na listagem do nosso custom post e como inserir campos extras no post (como uma data, ou preço de um produto, etc).

Galeria de fotos