Waitlist

Criando seus próprios widgets para WordPress

Já conhecemos o potencial e possibilidades que os widgets do WordPress nos oferecem. Vimos isso aqui no post Elevando o nível do WordPress com Widgets. E no post de hoje, vamos nos aprofundar e conhecer mais possibilidades com essa incrível ferramenta criando nossos próprios widgets.

print-widgets

Antes de começar, precisamos entender como funciona a lógica dos widgets. Para isso, vou descrevê-la em três partes.

Primeira parte – Frontend

No site, os widgets podem assumir uma infinita gama de possibilidades para personalizar e ajudar a deixar o seu projeto ainda mais modular.
O local mais tradicional onde os widgets aparecem é na sidebar (barra lateral) do site. Porém, os widgets não se limitam a isso: podemos colocar widgets em absolutamente qualquer parte do site.

Podemos colocar nesses locais, uma listagem de categorias, um vídeo do YouTube, um calendário de postagens e muitas outras possibilidades. Inclusive, quando você estiver desenvolvendo um projeto e criou, por exemplo, um CPT (Custom Post Type) de eventos, você pode deixar na administração um widget para isso também, que após configurado exibirá os próximos eventos, deixando para o administrador, uma ferramenta que servirá para melhorar a experiência de seus visitantes com isso.

Segunda parte – Administração (wp-admin)

Na administração, os widgets ficam organizados no menu /Aparência/Widgets. Nessa tela você terá a esquerda a listagem de widgets disponíveis no tema que está usando, e a direita as áreas em que pode aplicar esses widgets.
Um item interessante dos widgets é que, uma vez programado, podemos usar uma quantidade ilimitada dele no site. E dependendo das suas configurações, cada um desses pode funcionar de forma específica. Por exemplo, nosso widget de eventos, no blog do site pode exibir uma listagem de todos os próximos eventos. Já na página sobre eventos gratuitos, esse mesmo widget pode exibir apenas eventos que sejam gratuitos (definidos por uma taxonomia por exemplo). O que manda aqui é a necessidade e criatividade.

Terceira parte – A classe Widget (core)

O WordPress possui sua própria classe de widgets, veja sua documentação oficial aqui. E então tudo que faremos será “extendido” dessa classe nativa, assim:

class Custom_Widget extends WP_Widget {}

Muitos frameworks trabalham dessa mesma forma para outras coisas além dos widgets, como CPT, metabox e etc. Esse é o conceito de programação orientada a objetos. O que reduz a quantidade de trabalho, utilizando o recurso de reutilização de códigos.

Com isso, se precisarmos de muitos widgets em um mesmo projeto, podemos criar uma pasta “widgets” em /inc e incluir cada um deles via functions.php. Assim temos um projeto organizado e padronizado, que facilitará a manutenção e entendimento de seus códigos por qualquer pessoa que possa oferecer manutenção.
E nessa etapa a classe que estamos extendendo se divide em outras quatro etapas.

Construção

public function __construct()

Onde fazemos a declaração do widget, adicionando título e descrição Com isso iniciamos a classe Custom Widget  e o WordPress se encarrega de adicioná-lo em nossa administração.

Exibição no frontend

public function widget( $args, $instance )

Nessa etapa é onde definimos a estrutura html e os devidos php’s para o widget funcionar da forma esperada no site. Em nosso exemplo de eventos, vamos precisar criar um loop, com o query de eventos e formatar um html para exibi-lo, observando as opções que o widget disponibiliza.

Salvando os dados

public function update( $new_instance, $old_instance )

Com essa função, definimos o módulo para salvar os campos do widget. É aqui onde devemos fazer validação dos campos e então salvar os novos valores.

Formulário na Administração

public function form( $instance )

Nessa função dentro da nossa classe, é onde criamos o formulário com as opções que o seu widget disponibilizará para configuração e personalização do mesmo.
É aqui onde podemoa colocar campos como:

Quantos eventos exibir?
Qual taxonomia?
Adicionar classe CSS
Exibir botão para ver todos?

E então a cada widget utilizado, o administrador poderá personalizar de uma forma específica para cada área. Novamente o que manda aqui é sua criatividade e necessidade. Imagine que ainda é possível adicionar um campo para condicionar quando esse widget deve ser inserido. Por exempli, é muito comum sites que só possuem uma área para wídgtes em todas as páginas, e então com esse campo você pode determinar se ele deve aparecer em archives, singles ou determinadas categorias do blog.

Basicamente a classe que estamos extendendo precisa apenas dessas quatro funções para funcionar perfeitamente. Vale navegar um pouco pela documentação oficial e entender melhor o seu funcionamento. E no mesmo arquivo que estamos criando, fora da classe Custom_Widget, precisamos registrar o widget adicionando uma função no action ‘widgets_init’.

add_action( 'widgets_init', 'custom_register_widgets' );

Abaixo veja como ficou nosso exemplo de widget para exibição de eventos.

public function __construct() {
  $widget_ops = array(
   'classname' => 'Eventos_Widget',
   'description' => 'Widget para adicionar um calendário de Eventos'
  );

 

parent::__construct( ‘Eventos_Widget’,’Calendário de Eventos’, $widget_ops );
}

public function widget( $args, $instance ) {

$title = apply_filters( ‘widget_eventos_title’, empty( $instance[‘title’] ) ? ” : $instance[‘title’], $instance, $this->id_base );

$qtd_eventos = apply_filters( ‘widget_eventos_qtd’, empty( $instance[‘qtd_eventos’] ) ? ” : $instance[‘qtd_eventos’], $instance );

echo ‘

‘;
echo ‘‘. $title . ‘‘;
echo ‘

      ‘;

 

global $post;

/* Guarda a variável $post em $temp_post*/
$temp_posts = $post;

$eventos_posts = get_posts( array(
‘post_type’ => ‘eventos’,
‘posts_per_page’ => $qtd_eventos,
));

// Loop.
if( $eventos_posts ) :
foreach( $eventos_posts as $post ) : setup_postdata( $post );

$data = get_post_meta( $post_id, ‘eventos_data’);
$local = get_post_meta( $post_id, ‘eventos_local’);

echo ”

    • “;
      echo get_the_title();
      echo “

       

      “;

      echo ““;
      echo $local; }
      echo “      “;

      echo ““;
      echo $data;
      echo “      “;
      echo “

 

“;

endforeach;
wp_reset_postdata();

endif;
echo ‘Ver todos >>’;
echo ‘

‘;

/* Retorna o valor da variável $post como era antes do loop de Eventos */
$post = $temp_posts;
}

public function update( $new_instance, $old_instance ){
$instance = $old_instance;
$instance[‘title’] = $new_instance[‘title’];
$instance[‘qtd_eventos’] = $new_instance[‘qtd_eventos’];
return $instance;
}

public function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array( ‘link’ => ”, ‘text’ => ”, ‘class’ => ”, ‘title’ => ”, ‘text’ => ”, ‘image’ => ”) );
$title = strip_tags($instance[‘title’]);
$qtd_eventos = strip_tags($instance[‘qtd_eventos’]);
?>

}
}
function eventos_register_widgets() {
register_widget( ‘Eventos_Widget’ );
}

add_action( ‘widgets_init’, ‘eventos_register_widgets’ );

Novas áreas para widgets

Com nosso widget pronto, podemos agora adicionar novas áreas em nosso site para recebê-lo. Adicione essa função em seu functions.php:

function widgets_init_areas() {
 register_sidebar(
 array(
 'name' => 'Nova Sidebar',
 'id' => 'nova-sidebar',
 'description' => 'Exemplo de Nova Widget Área',
 'before_widget' => '

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
)
);
}

add_action( 'widgets_init', 'widgets_init_areas' );

Observe que dentro dessa mesma função (que também é adicionada no action ‘widgets_init’) podemos colocar inúmeras áreas, criando por exemplo áreas de widgets para o rodapé, exclusivo para home e etc.

Agora que criamos um widget que disponibiliza configurações para o administrador personalizar sua apresentação, vamos ver um exemplo rápido de um widget que só precisa ser ativado para funcionar. Por menos que possa parecer, isso também pode ser útil em diversos momentos.

Elevando o nível

Até aqui visualizamos todo o processo para criação de um widget, com configurações até certo ponto avançadas, o que permite criar widgets específicos para cada área. Vamos avançar um pouco mais e criar um widget com o slider que aprendemos aqui no blog (veja o post Crie seu próprio Slider para WordPress com carouFredSel).

Vamos utilizar tudo que aprendemos acima, alterando basicamente a parte que exibe o nosso widget, onde devemos colocar o loop responsável por imprimir os posts do slider.

 5,
  'orderby' => 'date',
  'order' => 'DESC',
  'post_type' => 'sliders',
 );
 $sliders_home = new WP_Query( $args );
?>

have_posts() ) : $sliders_home->the_post(); ?>

“>’; } ?>

Conclusão

Os widgets são ferramentas incríveis e que podem proporcionar grandes melhorias em seus projetos. Concordo que ele é um pouco complexo e pode parecer muito código para se aventurar, mas essa classe nativa nos ajuda muito e facilita significativamente o desenvolvimento.

Coloque sua criatividade para trabalhar e veja a quantidade de ideias que terá usando e criando seus próprios widgets. Compartilhe aqui sua experiência com essa ferramenta, também!

 

Deixe um comentário

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