Criando Widget para WordPress

Para desenvolver um widget, basicamente você precisará estender 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 uma classe de exemplo, como 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, estarei utilizando WordPress 2.8, e o tema twentytwelve, mas poderá ser utilizando em outras versões do WordPress, e outros temas.

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

Como criar Widget para WordPress
Como criar Widget para WordPress

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 da classe Pai do construtor ela, 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);
    }

Agora vamos definir 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'] : '';
    }

Agora vamos para 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 todo 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'];
        }
    }

}

Agora 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 terá o nosso widget que criamos.

Como criar Widget para WordPress
Como criar Widget para WordPress

Agora basta arrastar para o lado direito, para área do sidebar do tema.

Como criar Widget para WordPress
Como criar Widget para WordPress

Espero que tenha ajudado, e até a próxima.




Se o conteúdo foi relevante para você, e desejar, você pode incentivar fazendo uma doação.

Deixe uma resposta

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