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]
<?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) {

}

}
[/php]

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]
<?php

/**
* Criamos a classe, estendendo WP_Widget
*/
class Most_Commented_Posts extends WP_Widget {
[/php]

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

[php]
/**
* 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);
}
[/php]

Agora vamos definir o método form, que responsável por exibir o formulário na parte administrativa do WordPress

[php]
/**
* 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>’;
}
[/php]

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

[php]
/**
* 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’] : ”;
}
[/php]

Agora vamos para o método widget, que será responsável por exibir widget no tema

[php]
/**
* 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’];
}
}
[/php]

Agora vamos ao código todo da classe Most_Commented_Posts

[php]
<?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’];
}
}

}

[/php]

Agora nessa pasta widget, vamos criar um arquivo chamado bootstrap.php, esse arquivo será responsável por registrar o widget que criamos

[php]
<?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’ );

[/php]

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

[php]
require_once "widget/bootstrap.php";
[/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.

Deixe uma resposta

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