Como Criar um Widget Personalizado no WordPress

porLuis Augusto Moretto

Como Criar um Widget Personalizado no WordPress

Você quer criar seu Componente visual Personalizado no WordPress? Ainda com o comportamento de Drag´Drop

Widget Plugin Blog Post Startup Morettic Dicas
WordPress - Componente Visual Drag and Drop

Introdução

Os widgets do WordPress contêm fragmentos de código que você pode adicionar às barras laterais do seu site. 

São módulos que você pode usar para adicionar galeria de imagens, formulários, etc. Para isso dispõem de uma simples interface de arrastar e soltar.

Neste artigo, mostraremos como criar um componente visual personalizado do WordPress.

1) Criando um plugin

Antes de construirmos nosso componente visual personalizado vamos criar um plugin.A razão é que nosso plugin pode ter todas as funcionalidades que desejamos. Isso sem contar que o plugin é independente do tema. Ou seja super fácil de customizar com o WordPress. Para isso você deve:

  • Crie uma nova pasta no diretório de plugins. Exemplo: / wp-content / plugins / youritename-plugin /
  • Abra um arquivo em branco e guarde-o como "youritename-plugin.php"
  • Coloque o seguinte código no arquivo:
php
/*
Plugin Name: Site Plugin for example.com
Description: Site specific code changes for example.com
*/
/* Start Adding Functions Below this Line */
 
 
/* Stop Adding Functions Below this Line */
?>

Pronto seu novo Plugin está implementado. Agora vamos mostrar como criar seu primeiro Componente Visual Drag Drop no WordPress.

COnstruindo seu componente visual

Sem o plugin personalizado, você pode criar o componente no arquivo functions.php do seu tema. No entanto, só estará disponível quando esse tema específico estiver ativo.

Neste tutorial, criaremos um componente simples que apenas cumprimenta os visitantes.

Dê uma olhada neste código e, em seguida, copie em seu plugin específico do site para vê-lo em ação e fazer suas customizações.

// Register and load the widget
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
 
// Creating the widget 
class wpb_widget extends WP_Widget {
 
function __construct() {
parent::__construct(
 
// Base ID of your widget
'wpb_widget', 
 
// Widget name will appear in UI
__('WPBeginner Widget', 'wpb_widget_domain'), 
 
// Widget description
array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), ) 
);
}
 
// Creating widget front-end
 
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
 
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
 
// This is where you run the code and display the output
echo __( 'Hello, World!', 'wpb_widget_domain' );
echo $args['after_widget'];
}
         
// Widget Backend 
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// Widget admin form
?>

testando o componente

Depois de adicionar o código, você precisa dirigir-se a Aparência »Página Widgets.

Você notará o novo componente visual na lista. Você precisa arrastar e soltar em uma barra lateral, rodapé ou cabeçalho do tema.

Feito isso basta visualizar as alterações na área específica de seu site!

Custom WIdget Wordpres how to
Posicionando o componente no tema do WordPress

Happy Coding! 😀