Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Como criar um plug-in de widget para WordPress

Você está em:

Como criar um plug-in de widget para WordPress

O WordPress é um incrível sistema de gerenciamento de conteúdo com muitos recursos excelentes, como widgets. Neste tutorial, vou explicar como criar seus próprios widgets dentro de um pequeno plugin. Este post abordará alguns pontos extras que você precisa entender antes de criar o widget em si. Aqui vamos nós!

Etapa 1: crie seu plug-in de widget

Recentemente criei um plugin chamado “Freelancer Widgets Bundle”, e algumas pessoas me perguntaram como criar tal plugin, então decidi escrever este post. O primeiro passo é a criação do plugin. E como você verá, não é a parte mais difícil. Um plugin é um código extra adicionado ao WordPress assim que você o ativa. O WordPress cria um loop em uma pasta para recuperar todos os plugins disponíveis e listá-los no back office. Para criar seu plug-in, você precisará de um editor como Coda (Mac) ou Dreamweaver (PC e Mac). Eu recomendo que você crie seu plugin em uma instalação local do WordPress, fazê-lo em um servidor ativo pode causar alguns problemas se você cometer um erro. Então, por favor, espere para testar nosso plugin antes de colocar nele sua hospedagem.

Abra agora a pasta wp-content/plugins. É aqui que você vai adicionar seu plugin. Crie um novo diretório e chame-o de “widget-plugin” (na verdade, esse nome pode ser o que você quiser). Mesmo que nosso plugin tenha apenas um único arquivo, é sempre melhor usar uma pasta para cada plugin. Em seu diretório, crie um novo arquivo chamado “widget-plugin.php” (este nome também pode ser alterado) e abra-o. Agora estamos prestes a adicionar nossas primeiras linhas de código. A definição de um plugin no WordPress segue algumas regras que você pode ler aqui no codex . Aqui está como o WordPress define um plugin:

<?php

/*

Plugin Name: Name Of The Plugin

Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates

Description: A brief description of the Plugin.

Version: The Plugin’s Version Number, e.g.: 1.0

Author: Name Of The Plugin Author

Author URI: http://URI_Of_The_Plugin_Author

License: A “Slug” license name e.g. GPL2

*/

Então, temos que modificar este código para adequá-lo às nossas necessidades:

<?php

/*

Plugin Name: My Widget Plugin

Plugin URI: http://www.wpexplorer.com/create-widget-plugin-wordpress/

Description: This plugin adds a custom widget.

Version: 1.0

Author: AJ Clarke

Author URI: http://www.wpexplorer.com/create-widget-plugin-wordpress/

License: GPL2

*/

Salve seu arquivo. Ao adicionar apenas código ao nosso arquivo widget-plugin.php, criamos um plugin! Bem, por enquanto o plugin não faz nada, mas o WordPress o reconhece. Para ter certeza de que é o caso, vá para sua administração e vá no menu “Plugins”. Se o seu plug-in aparecer na lista de plug-ins, você está bem, caso contrário, certifique-se de seguir minhas instruções e tente novamente. Agora você pode ativar o plugin.

Etapa 2: criar o widget

Agora vamos criar o widget em si. Este widget será uma classe PHP estendendo a classe principal do WordPress WP_Widget . Basicamente, nosso widget será definido desta forma:

// The widget class

class My_Custom_Widget extends WP_Widget {

// Main constructor

public function __construct() {

/* … */

}

// The widget form (for the backend )

public function form( $instance ) {

/* … */

}

// Update widget settings

public function update( $new_instance, $old_instance ) {

/* … */

}

// Display the widget

public function widget( $args, $instance ) {

/* … */

}

}

// Register the widget

function my_register_custom_widget() {

register_widget( ‘My_Custom_Widget’ );

}

add_action( ‘widgets_init’, ‘my_register_custom_widget’ );

Este código fornece ao WordPress todas as informações que o sistema precisa para poder usar o widget:

  1. O construtor , para iniciar o widget
  2. A  função form()  para criar o formulário do widget na administração
  3. A função update() , para salvar os dados do widget durante a edição
  4. E a  função widget()  para exibir o conteúdo do widget no front-end

1 – O construtor

O construtor é a parte do código que define o nome do widget e os argumentos principais, abaixo está um exemplo de como pode ser.

// Main constructor

public function __construct() {

parent::__construct(

‘my_custom_widget’,

__( ‘My Custom Widget’, ‘text_domain’ ),

array(

‘customize_selective_refresh’ => true,

)

);

}

Por favor, não use __() em torno do nome do widget, esta função é usada pelo WordPress para tradução. Eu realmente recomendo que você sempre use essas funções , para tornar seu tema totalmente traduzível. E o uso do parâmetro ‘customize_selective_refresh’ permite que o widget seja atualizado em Aparência > Personalizar ao editar o widget para que, em vez de atualizar a página inteira, apenas o widget seja atualizado ao fazer alterações.

2 – A função form()

Esta função é a que cria as configurações do formulário do widget na área de administração do WordPress (em Aparência > Widgets ou Aparência > Personalizar > Widgets). É aqui que você insere seus dados para serem exibidos no site. Então, vou explicar como você pode adicionar campos de texto, áreas de texto, caixas de seleção e caixas de seleção às configurações do formulário do widget.

// The widget form (for the backend )

public function form( $instance ) {

// Set widget defaults

$defaults = array(

‘title’    => ”,

‘text’     => ”,

‘textarea’ => ”,

‘checkbox’ => ”,

‘select’   => ”,

);

// Parse current settings with defaults

extract( wp_parse_args( ( array ) $instance, $defaults ) ); ?>

<?php // Widget Title ?>

<p>

<label for=”<?php echo esc_attr( $this->get_field_id( ‘title’ ) ); ?>”><?php _e( ‘Widget Title’, ‘text_domain’ ); ?></label>

<input class=”widefat” id=”<?php echo esc_attr( $this->get_field_id( ‘title’ ) ); ?>” name=”<?php echo esc_attr( $this->get_field_name( ‘title’ ) ); ?>” type=”text” value=”<?php echo esc_attr( $title ); ?>” />

</p>

<?php // Text Field ?>

<p>

<label for=”<?php echo esc_attr( $this->get_field_id( ‘text’ ) ); ?>”><?php _e( ‘Text:’, ‘text_domain’ ); ?></label>

<input class=”widefat” id=”<?php echo esc_attr( $this->get_field_id( ‘text’ ) ); ?>” name=”<?php echo esc_attr( $this->get_field_name( ‘text’ ) ); ?>” type=”text” value=”<?php echo esc_attr( $text ); ?>” />

</p>

<?php // Textarea Field ?>

<p>

<label for=”<?php echo esc_attr( $this->get_field_id( ‘textarea’ ) ); ?>”><?php _e( ‘Textarea:’, ‘text_domain’ ); ?></label>

<textarea class=”widefat” id=”<?php echo esc_attr( $this->get_field_id( ‘textarea’ ) ); ?>” name=”<?php echo esc_attr( $this->get_field_name( ‘textarea’ ) ); ?>”><?php echo wp_kses_post( $textarea ); ?></textarea>

</p>

<?php // Checkbox ?>

<p>

<input id=”<?php echo esc_attr( $this->get_field_id( ‘checkbox’ ) ); ?>” name=”<?php echo esc_attr( $this->get_field_name( ‘checkbox’ ) ); ?>” type=”checkbox” value=”1″ <?php checked( ‘1’, $checkbox ); ?> />

<label for=”<?php echo esc_attr( $this->get_field_id( ‘checkbox’ ) ); ?>”><?php _e( ‘Checkbox’, ‘text_domain’ ); ?></label>

</p>

<?php // Dropdown ?>

<p>

<label for=”<?php echo $this->get_field_id( ‘select’ ); ?>”><?php _e( ‘Select’, ‘text_domain’ ); ?></label>

<select name=”<?php echo $this->get_field_name( ‘select’ ); ?>” id=”<?php echo $this->get_field_id( ‘select’ ); ?>” class=”widefat”>

<?php

// Your options array

$options = array(

”        => __( ‘Select’, ‘text_domain’ ),

‘option_1’ => __( ‘Option 1’, ‘text_domain’ ),

‘option_2’ => __( ‘Option 2’, ‘text_domain’ ),

‘option_3’ => __( ‘Option 3’, ‘text_domain’ ),

);

// Loop through options and add each one to the select dropdown

foreach ( $options as $key => $name ) {

echo ‘<option value=”‘ . esc_attr( $key ) . ‘” id=”‘ . esc_attr( $key ) . ‘” ‘. selected( $select, $key, false ) . ‘>’. $name . ‘</option>’;

} ?>

</select>

</p>

<?php }

Este código é simplesmente adicionar 5 campos ao widget (Título, texto, área de texto, seleção e caixa de seleção). Então, primeiro você define os padrões para seu widget, então a próxima função analisa as configurações atuais definidas/salvas para seu widget com os padrões (assim, qualquer configuração que não existe seria revertida para o padrão, como quando você adiciona um widget ao sua barra lateral). E por último está o html para cada campo. Observe o uso de esc_attr() ao adicionar os campos do formulário, isso é feito por motivos de segurança. Sempre que você ecoar uma variável definida pelo usuário em seu site, verifique primeiro se ela foi higienizada.

3 – A função atualizar()

A função update() é muito simples. Como os desenvolvedores do núcleo do WordPress adicionaram uma API de widgets realmente poderosa, só precisamos adicionar este código para atualizar cada campo:

// Update widget settings

public function update( $new_instance, $old_instance ) {

$instance = $old_instance;

$instance[‘title’]    = isset( $new_instance[‘title’] ) ? wp_strip_all_tags( $new_instance[‘title’] ) : ”;

$instance[‘text’]     = isset( $new_instance[‘text’] ) ? wp_strip_all_tags( $new_instance[‘text’] ) : ”;

$instance[‘textarea’] = isset( $new_instance[‘textarea’] ) ? wp_kses_post( $new_instance[‘textarea’] ) : ”;

$instance[‘checkbox’] = isset( $new_instance[‘checkbox’] ) ? 1 : false;

$instance[‘select’]   = isset( $new_instance[‘select’] ) ? wp_strip_all_tags( $new_instance[‘select’] ) : ”;

return $instance;

}

Como você pode ver, tudo o que precisamos fazer é verificar cada configuração e, se não estiver vazia, salve-a no banco de dados. Observe o uso das funções wp_strip_all_tags() e wp_kses_post(), elas são usadas para limpar os dados antes de serem adicionados ao banco de dados. Sempre que você estiver inserindo QUALQUER conteúdo enviado pelo usuário em um banco de dados, verifique se ele não possui nenhum código malicioso. A primeira função wp_strip_all_tags remove tudo exceto o texto básico para que você possa usá-lo para qualquer campo onde o valor final seja uma string e a segunda função wp_kses_post() é a mesma função usada para o conteúdo do post e remove todas as tags além do html básico como links , spans, divs, imagens, etc.

4 – A função widget()

A função widget() é a que irá gerar o conteúdo do site. É o que seus visitantes verão. Essa função pode ser personalizada para incluir classes CSS e tags específicas para combinar perfeitamente com a exibição do seu tema. Aqui está o código (por favor, não que este código possa ser modificado facilmente para atender às suas necessidades):

// Display the widget

public function widget( $args, $instance ) {

extract( $args );

// Check the widget options

$title    = isset( $instance[‘title’] ) ? apply_filters( ‘widget_title’, $instance[‘title’] ) : ”;

$text     = isset( $instance[‘text’] ) ? $instance[‘text’] : ”;

$textarea = isset( $instance[‘textarea’] ) ?$instance[‘textarea’] : ”;

$select   = isset( $instance[‘select’] ) ? $instance[‘select’] : ”;

$checkbox = ! empty( $instance[‘checkbox’] ) ? $instance[‘checkbox’] : false;

// WordPress core before_widget hook (always include )

echo $before_widget;

  // Display the widget

   echo ‘<div class=”widget-text wp_widget_plugin_box”>’;

// Display widget title if defined

if ( $title ) {

echo $before_title . $title . $after_title;

}

// Display text field

if ( $text ) {

echo ‘<p>’ . $text . ‘</p>’;

}

// Display textarea field

if ( $textarea ) {

echo ‘<p>’ . $textarea . ‘</p>’;

}

// Display select field

if ( $select ) {

echo ‘<p>’ . $select . ‘</p>’;

}

// Display something if checkbox is true

if ( $checkbox ) {

echo ‘<p>Something awesome</p>’;

}

echo ‘</div>’;

// WordPress core after_widget hook (always include )

echo $after_widget;

}

Este código não é complexo, tudo o que você precisa lembrar é verificar se uma variável está definida, se não estiver e se quiser imprimi-la, receberá uma mensagem de erro.

O código completo do plug-in do widget

Agora, se você estiver seguindo corretamente, seu plugin deve estar totalmente funcional e você pode personalizá-lo para atender às suas necessidades. Se você não estiver seguindo o guia ou quiser verificar o código, visite a página do Github para ver o código completo.

VER CÓDIGO COMPLETO NO GITHUB

Conclusão

Vimos que criar um widget dentro de um plugin é muito interessante, agora você deve saber como criar um plugin simples contendo um widget com diferentes tipos de campos e aprendeu a ir um pouco mais além usando técnicas avançadas para customizar o widget. Parabéns, você fez um trabalho incrível!

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.