Blog do MX Cursos

WordPress – Criando Widgets personalizados

WordPress – Criando Widgets personalizados

A utilização de widgets se torna um diferencial em nossos temas pela facilidade de utilizar, implementar e explorar novos recursos.

Para desenvolver um widget, você precisará basicamente entender a classe WP_Widget e implementar alguns métodos, que seriam:  __construct, widget, form, e update.

Veremos neste artigo como criar widget para WordPress de forma simples e prática.

Abaixo temos uma classe de exemplo com os métodos comentados:

<?php
 
class Exemplo_Widget extends WP_Widget {
 
 /**
 * Registrar o Widget no WordPress
 *
 */
 public function __construct() {
 /**
 * Chamando a classe __construct pai
 * $id_base => Define Identificação
 * $name => Define o Nome que será exibido
 * $widget_options => Configurações extras
 */
 parent::__construct($id_base, $name, $widget_options);
 }
 
 /**
 * O que será mostrado na parte administrativa
 * do WordPress
 */
 public function form($instance) {
 
 }
 
 /**
 * O que salvará os dados do widget no banco de dados
 */
 public function update($new_instance, $old_instance) {
 
 }
 
 /**
 * O que será exibido no Tema
 */
 public function widget($args, $instance) {
 
 }
 
}

Agora vamos criar algo prático.

No nosso site, precisamos criar um widget que exiba os posts mais comentados, informando o titulo do post, o link e quantidade de comentários.

Obs: Para nosso tutorial, utilizarei a versão 4.5.2 do WordPress e o tema twentytwelve, mas você poderá utilizar outras versões do WordPress e outros temas também.

Criaremos uma pasta chamada widget e dentro dela será criado um arquivo chamado : most_commented_posts.php
criando_widget_01

Nossos cursos indicados

Colocarei por partes pra facilitar o entendimento.

O código estará com comentários.

Criamos a classe Most_Commented_Posts e estendemos a classe WP_Widget.

<?php
 
/**
 * Criamos a classe, estendendo WP_Widget
 */
class Most_Commented_Posts extends WP_Widget {

Agora vamos definir o construtor e chamar classe Pai do construtor pra definir as configurações do Widget.

/**
 * Vamos registrar o Widget no WordPress
 */
public function __construct() {
    //Identificador do widget
    $id_base = 'most_commented_posts';
    //Nome do Widget que será exibido
    $name = 'Posts Mais Comentados';
    //Adicionado Descrição do widget
    $widget_options = array('description' => 'Exibir os posts mais comentados');
    parent::__construct($id_base, $name, $widget_options);
}

Definiremos agora o método form, que é responsável por exibir o formulário na parte administrativa do WordPress

/**
  * O formulário que será exibido
  * no painel administrativo no WordPress
  */
 public function form($instance) {
     //Verifica se existe um titulo, senão ficará em branco
     $title = isset($instance['title']) ? $instance['title'] : '';
     //Verficia se existe o valor que será exibido, senão terá o valor de 5
     $number = isset($instance['number']) ? $instance['number'] : 5;
 
     /**
      * Aqui criamos label, e input para ser inserido e exibido o valor do título
      */
    /**
      * Aqui criamos label, e input para ser inserido e exibido o valor do título
      */
     echo '<p>
                 <label for="' . $this->get_field_id('title') . '">Título</label>
                 <input class="widefat" id="' . $this->get_field_id('title') . '" name="' . $this->get_field_name('title') . '" value="' . esc_attr($title) . '">
          </p>';
     /**
      * Aqui criamos label, e input para ser inserido
      * e exibido a quantidade de post que será exibido
      */
     echo '<p>
                 <label for="' . $this->get_field_id('number') . '">Quantidade a ser Exibido</label>
                 <input class="widefat" id="' . $this->get_field_id('number') . '" name="' . $this->get_field_name('number') . '" value="' . esc_attr($number) . '">
             </p>';
 }

Agora vamos para o método update, que será responsável por salvar as novas informações.

/**
   * Vamos salvar as informações
   * $new_instance => valores que serão salvos
   * $old_instance => valores que estão no banco de dados
   */
  public function update($new_instance, $old_instance) {
      $instance = array();
      $instance['title'] = (!empty($new_instance['title']) ) ? strip_tags($new_instance['title']) : '';
      $instance['number'] = (!empty($new_instance['number']) ) ? (int) $new_instance['number'] : '';
  }

Abaixo temos o método widget, que será responsável por exibir widget no tema

/**
   * O que será exibido no tema (FronteEnd)
   */
  public function widget($args, $instance) {
      //Aplica o título,  criado por nós, atribuido ao widget
      $title = apply_filters('widget_title', $instance['title']);
      $number = $instance['number'] ? (int) $instance['number'] : 5;
 
      /**
       * Instancia a classe WP_Query:
       * Ordernar poelo total comentarios, em forma descrecente
       * exibindo o valor determinado: $number
       */
      $wp = new WP_Query(array('orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => $number));
 
      //Verifica se tem post
      if ($wp->have_posts()) {
 
          //Elemento a ser inserido antes de todo widget.
          echo $args['before_widget'];
          //Verifica se não tiver vazio o $title
          if (!empty($title)) {
              /**
               * $args['before_title']: Texto a ser inserido antes de todo título.
               * $title : Titulo definido no wiget
               * $args['after_title'] :Texto a ser inserido depois de todo título.
               */
              echo $args['before_title'] . $title . $args['after_title'];
          }
 
          //
          echo '<ul class="most_commented_posts">';
          //Listar os posts
          while ($wp->have_posts()) {
              $wp->the_post();
              /**
               * Exibi O título com link, e total de comentários
               */
              echo '<li>';
              echo '<h3><a href="' . get_permalink() . '">' . get_the_title() . ' (' . get_comments_number(get_the_ID()) . ')</a></h3>';
              echo '<li>';
          }
          echo '</ul>';
          //Elemento a ser inserido depois de todo widget.
          echo $args['before_widget'];
      }
  }

Agora vamos ao código da classe Most_Commented_Posts

<?php
 
/**
 * Criamos a classe, estendendo WP_Widget
 */
class Most_Commented_Posts extends WP_Widget {
 
    /**
     * Vamos registrar o Widget no WordPress
     */
    public function __construct() {
        //Identificador do widget
        $id_base = 'most_commented_posts';
        //Nome do Widget que será exibido
        $name = 'Posts Mais Comentados';
        //Adicionado Descrição do widget
        $widget_options = array('description' => 'Exibir os posts mais comentados');
        parent::__construct($id_base, $name, $widget_options);
    }
 
    /**
     * O formulário que será exibido
     * no painel administrativo no WordPress
     */
    public function form($instance) {
        //Verifica se existe um titulo, senão ficará em branco
        $title = isset($instance['title']) ? $instance['title'] : '';
        //Verficia se existe o valor que será exibido, senão terá o valor de 5
        $number = isset($instance['number']) ? $instance['number'] : 5;
 
         /**
         * Aqui criamos label, e input para ser inserido e exibido o valor do título
         */
        echo '<p>
                    <label for="' . $this->get_field_id('title') . '">Título</label>
                    <input class="widefat" id="' . $this->get_field_id('title') . '" name="' . $this->get_field_name('title') . '" value="' . esc_attr($title) . '">
             </p>';
        /**
         * Aqui criamos label, e input para ser inserido
         * e exibido a quantidade de post que será exibido
         */
        echo '<p>
                    <label for="' . $this->get_field_id('number') . '">Quantidade a ser Exibido</label>
                    <input class="widefat" id="' . $this->get_field_id('number') . '" name="' . $this->get_field_name('number') . '" value="' . esc_attr($number) . '">
                </p>';
    }
 
    /**
     * Vamos salvar as informações
     * $new_instance => valores que serão salvos
     * $old_instance => valores que estão no banco de dados
     */
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title']) ) ? strip_tags($new_instance['title']) : '';
        $instance['number'] = (!empty($new_instance['number']) ) ? (int) $new_instance['number'] : '';
    }
 
    /**
     * O que será exibido no tema (FronteEnd)
     */
    public function widget($args, $instance) {
        //Aplica o título,  criado por nós, atribuido ao widget
        $title = apply_filters('widget_title', $instance['title']);
        $number = $instance['number'] ? (int) $instance['number'] : 5;
 
        /**
         * Instancia a classe WP_Query:
         * Ordernar poelo total comentarios, em forma descrecente
         * exibindo o valor determinado: $number
         */
        $wp = new WP_Query(array('orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => $number));
 
        //Verifica se tem post
        if ($wp->have_posts()) {
 
            //Elemento a ser inserido antes de todo widget.
            echo $args['before_widget'];
            //Verifica se não tiver vazio o $title
            if (!empty($title)) {
                /**
                 * $args['before_title']: Texto a ser inserido antes de todo título.
                 * $title : Titulo definido no wiget
                 * $args['after_title'] :Texto a ser inserido depois de todo título.
                 */
                echo $args['before_title'] . $title . $args['after_title'];
            }
 
            //
            echo '<ul class="most_commented_posts">';
            //Listar os posts
            while ($wp->have_posts()) {
                $wp->the_post();
                /**
                 * Exibi O título com link, e total de comentários
                 */
                echo '<li>';
                echo '<h3><a href="' . get_permalink() . '">' . get_the_title() . ' (' . get_comments_number(get_the_ID()) . ')</a></h3>';
                echo '<li>';
            }
            echo '</ul>';
            //Elemento a ser inserido depois de todo widget.
            echo $args['before_widget'];
        }
    }
 
}

Nessa pasta widget, vamos criar um arquivo chamado bootstrap.php. Esse arquivo será responsável por registrar o widget que criamos:

<?php
 
//Inclui o arquivo : most_commented_posts.php
require_once "most_commented_posts.php";
 
//Função para registar o widget
function register_most_commented_widget(){
    //Registra o widget que criamos
     register_widget( 'Most_Commented_Posts' );
}
 
//Com função add_action, atribuimos uma função, usando o gancho widgets_init
add_action( 'widgets_init', 'register_most_commented_widget' );

Agora no arquivo functions.php, incluiremos o arquivo boostrap.php

require_once "widget/bootstrap.php";

Agora acesse Aparência > Widgets. Do lado esquerdo é possível observar o novo widget que criamos.

Leia também  WordPress - Select dinâmico no Contact Form 7
criando_widget_03

Agora basta arrastar para a área da sidebar do tema.

criando_widget_02
Pronto! Seu Widget customizado está criado.

Gostou do artigo? Compartilhe e deixe seu comentário.

Um abraço e até a próxima.