Blog

Elevando o nível do WordPress com Widgets

Nesse post vamos conhecer mais uma ferramenta do WordPress que aliada a uma boa criatividade (ou necessidade) pode elevar o nível do seu WordPress significativamente.  Isso falando dos três tipos de usuários: o usuário final; o desenvolvedor e designers que se aventuram customizando temas.

Os widgets são elementos que podem ser usados na sidebar (e também outros lugares como veremos mais abaixo) do site para adicionar conteúdo e funcionalidades. Cada widget pode ter um papel diferente e ainda serem personalizados.

Os widgets nativos do WordPress são:

  • Arquivo (Archive) – Exibe uma lista para cada mês que possui posts;
  • Agenda (Calendar) – Exibe um calendário com o mês atual adicionando link nos dias que possuem posts;
  • Categorias (Categories) – Exibe uma lista com as categorias dos posts;
  • Links – Exibe os links cadastrados, separados por categorias;
  • Meta – Exibe links como Administração, Login/Logout, RSS, WordPress.org;
  • Páginas (Pages) – Exibe uma lista com link para cada página do seu site;
  • Comentários recentes (Recent comments) – Exibe uma lista dos comentários aprovados recentemente;
  • Tópicos recentes (Recent posts) – Exibe os posts publicados recentemente;
  • RSS – Exibe um feed;
  • Pesquisar (Search) – Exibe um campo para fazer pesquisa;
  • Nuvem de tags (Tag Cloud) – Exibe uma nuvem com as tags do seu site;
  • Texto (Text) -Esse widget é um dos mais usados. Ele pode receber apenas texto ou HTML. O que ajuda para embedar vídeos, fotos ou qualquer outro elemento.

Se estiver desenvolvendo um tema, lembre-se de reservar um tempo para aplicar CSS nesses widgets padrão.  Assim quando o cliente usar um widget que você nem pensava que ele usaria, vai ficar tudo alinhado com o design proposto. Existe um plugin que ajuda exatamente nessa tarefa,  é o Monster Widget (publicado pela própria Automattic) ele cria em seu site todos os widgets nativos, assim fica muito mais fácil você aplicar CSS em todos eles.

Em alguns casos é preciso remover alguns widgets da administração,  para que o usuário final não o use, por exemplo alguns que não contemplem o layout e proposta que criou. Para isso temos a função unregister_widget() que deve ser usada em seu functions.php

Um pouco da parte técnica

Os widgets são, tecnicamente falando, objetos PHP. Cada instância de objeto pode fazer determinada atividade ou ação.

Isso nos ajuda a entender sua lógica para então criarmos nossos próprios widgets futuramente. Por exemplo,  ao criarmos um widget para exibir produtos, dando a ele a possibilidade de customização como quantidade de posts, campo para excluir alguns posts por ID e link para sua loja. Com a criação disso apenas uma vez, podemos usar esse widget quantas vezes forem necessárias. E até mesmo explorando suas configurações de forma diferente em cada área que o aplicarmos.

Aos que gostam de se aventurar com os códigos, vamos criar um exemplo básico, apresentado no codex do WordPress. Aplique esses códigos no  arquivo functions.php do seu tema.

/**
 * Adiciona My_Widget.
 */
class My_Widget extends WP_Widget {
/**
 * Registrando o Widget com WordPress.
 */
 function __construct() {
 parent::__construct(
 'my_widget', // ID do seu Widget
 __('Meu Widget', 'text_domain'), // Nome
 array( 'description' => __( 'Um simples exemplo de widget', 'text_domain' ), ) // Argumentos
 );
 }
/**
 * Exibe o widget no front-end.
 *
 * @see WP_Widget::widget()
 *
 * @param array $args Widget arguments.
 * @param array $instance Saved values from database.
 */
 public function widget( $args, $instance ) {
 $title = apply_filters( 'widget_title', $instance['title'] );
 echo $args['before_widget'];
 if ( ! empty( $title ) ) {
 echo $args['before_title'] . $title . $args['after_title'];
 }
 echo __( 'Olá mundo! Esse é meu primeiro widget.', 'text_domain' );
 echo $args['after_widget'];
 }
 /**
 * Formulário do widget no back-end.
 *
 * @see WP_Widget::form()
 *
 * @param array $instance Previously saved values from database.
 */
 public function form( $instance ) {
 if ( isset( $instance[ 'title' ] ) ) {
 $title = $instance[ 'title' ];
 }
 else {
 $title = __( 'Novo título', 'text_domain' );
 }
 ?>
 <p>
 <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
 <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
 </p>
 <?php 
 }
/**
 * Tratamento do formulário e salva os dados do widget.
 *
 * @see WP_Widget::update()
 *
 * @param array $new_instance Values just sent to be saved.
 * @param array $old_instance Previously saved values from database.
 *
 * @return array Updated safe values to be saved.
 */
 public function update( $new_instance, $old_instance ) {
 $instance = array();
 $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
 return $instance;
 }
} // class My_Widget
// Registrando My_Widget
function register_my_widget() {
 register_widget( 'My_Widget' );
}
add_action( 'widgets_init', 'register_my_widget' );

Seu primeiro Widget

No código acime eu traduzi os comentários para facilitar o aprendizado. As etapas então são as seguintes:

  • Estendemos a classe WP_Widget;
  • Registramos nosso widget com a funcção __construct(), damos nome e seus possíveis argumentos;
  • Criamos sua apresentação para o front-end;
  • Criamos um formulário para o back-end;
  • Tratamos essas informações e salvamos os dados;
  • Por fim, fora da classe, adicionamos nosso widget na action widgets_init.

Esse exemplo apenas imprime a frase “Olá mundo! Esse é meu primeiro widget.” O único item de formulário que ele possui é o título. Mas você pode trabalhar com qualquer elemento de formulário, checkbox, select, text e etc. É aqui onde você aplicaria por exemplo um select com suas categorias, ou então outro select para selecionar qual post type exibir.

Pode parecer um código extenso e complicado, mas no começo você pode usar esse trecho como base e ir editando conforme sua necessidade as áreas que montam o front e back-end.

Novas áreas para widgets

Falamos até aqui sobre widgets na sidebar, e realmente é o mais comum. Mas como a API de widgets é muito poderosa, muitos desenvolvedores acabam por aplicar essa lógica em outras áreas do site. Um exemplo são os rodapés com inúmeras informações que encontramos por ai hoje em dia para facilitar a navegação. E então, esses rodapés podem muito bem serem administrados por widgets.

Para ativar novas áreas de widgets no seu site, é preciso adicionar um trecho de código no seu functions.php, veja:

/**
 * Registra sidebar e áreas de widget.
 *
 */
function my_widgets_init() {
 register_sidebar( array(
 'name' => 'Footer Widgets Área',
 'id' => 'footer_widgets_area',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'before_title' => '<h2 class="widget_title">',
 'after_title' => '</h2>',
 ) );
}
add_action( 'widgets_init', 'my_widgets_init' );

Agora no seu footer.php, aplique esse código:

<?php if ( is_active_sidebar( 'footer_widgets_area' ) ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
 <?php dynamic_sidebar( 'footer_widgets_area' ); ?>
</div><!-- #primary-sidebar -->
<?php endif; ?>

Agora é só aplicar CSS aos seus widgets e você tem um rodapé apto a receber widgets. Você pode aplicar essa lógica para outras áreas do site como o cabeçalho, ou mesmo dentro de uma página específica.

Alguns plugins de widgets

Existe uma infinidade de plugins que criam novos widgets em nosso WordPress, são exclusivos para isso.  Outros por sua vez criam apenas widgets relacionados a ele. Como é o caso do plugin Simple Social Icons, que cria um widget para você adicionar uma faixa com os ícones das redes sociais que você possui.

  • Add Link to Facebook – Esse plugin adiciona um widget (e funcionalidades) bem completo para interligação com o Facebook. Para funcionar perfeitamente é preciso configurá-lo com o App ID que o Facebook fornece;
  • Display Widgets – Com esse plugin você consegue controlar em quais páginas seu widget deve ou não aparecer;
  • Widgets on Pages – Esse plugin é a forma mas rápida e fácil de adicionar widgets em páginas e posts, usando para isso a API de shortcodes de você pode aplicar em qualquer parte do seu site;
  • Special Recent Posts – Um plugin que cria um widget com os posts recentes com um adicional de exibir o thumbnails desses posts;
  • Author Avatar List – Com esse plugin você pode exibir uma lista com o avatar dos autores do seu site via shortcode;
  • Widget Reloaded – Esse plugin aplica uma nova cara aos plugins nativos do WordPress. Com a proposta de melhorar a interface de administração;
  • Widget Customizer – Possibilita a visualização em tempo real do widget que você está adicionando. Sem precisar salvar e carregar a página para ver como está ficando seu widget;
  • Widget Alias – Duplica um widget existente. Util para sites que possuem muitas sidebars e que necessitam de widgets específicos em cada uma delas. Você pode duplicar o widget e alterar um item nele por exemplo;
  • Login Widget With Shortcode – Adiciona um formulário de login como widget. Na sua versão PRO é possível habilitar o login via Facebook, Twitter, Google+ e Linkedin;
  • Gabfire Widget Pack – Esse plugin adiciona mais de doze novos widgets ao seu WordPress, incluindo post tabs, tweets recentes, imagens do flickr, ícones de redes sociais e muito mais;
  • Rating-Widget: Star Rating System – Um dos mais populares widgets de ratings (aquelas estrelas para votação);
  • Youtube Channel Gallery – Adiciona uma galeria de vídeos do Youtube;
  • Opening Hours – Exibe as horas em que você está disponível. Muito útil para empresas que trabalham com atendimentos.

Conclusão

O WordPress é sem dúvidas uma ferramenta muito robusta. Suas várias APIs, como essa que conhecemos nesse post, nos criam um campo muito vasto de desenvolvimento e criação. Quase tudo que precisamos, alguém já precisou também e muitas vezes com plugins resolvemos isso. Aventure-se com os códigos acima, crie seus próprios widgets e nos conte sua experiência. Caso conheça outros plugins de widget, comente abaixo e nos diga sua impressões.

  1. Leco

    Caro Everaldo, muito bom seu post! incrível! cheguei aqui procurando um widget que exiba os posts recentes em uma página. Eu até encontrei, mas eles ficam muito feios.
    Parabéns pelo post

Deixe um comentário

Hospede seu projeto em WordPress com alto desempenho