Creeaza un custom WordPress Widget

Doriti sa creati propriile dvs. widget-uri personalizate in WordPress? Widgeturile va permit sa trageti si sa plasati elemente in orice bara laterala sau zona gata de widget a site-ului. In acest articol va vom arata cum sa creati cu usurinta un widget personalizat in WordPress.

Ce este un WordPress Widget?

Widgeturile WordPress contin bucati de cod pe care le puteti adauga la barele laterale ale site-ului dvs. sau la zonele widget pregatite. Ganditi-va la ele ca la module pe care le puteti utiliza pentru a adauga elemente diferite utilizand o interfata simpla de tragere si plasare.

Implicit, WordPress vine cu un set standard de widget-uri pe care le puteți utiliza cu orice temă WordPress.

WordPress permite dezvoltatorilor sa creeze propriile widget-uri personalizate. Multe teme si pluginuri WordPress vin cu propriile widget-uri personalizate pe care le puteti adauga la barele laterale. De exemplu, puteti adauga un formular de contact, un formular de conectare personalizat sau o galerie foto la o bara laterala fara a scrie niciun cod.

Acestea fiind spuse, sa vedem cum sa creati cu usurinta propriile dvs. widget-uri personalizate în WordPress.

Crearea unui widget personalizat in WordPress

Inainte de a începe, ar fi mai bine sa creati un plugin specific site-ului in care veti introduce codul widget din acest tutorial. De asemenea, puteti lipi codul in fisierul functions.php al temei. Acesta va fi disponibil numai atunci cand tema respectiva este activa.

// Inregistrare si creare widget

function wpb_load_widget() {
	register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

// Creare widget 
class wpb_widget extends WP_Widget {

function __construct() {
parent::__construct(

// ID widget
'wpb_widget', 

// Widget nume
__('WP New Widget', 'wpb_widget_domain'), 

// Widget descriere
array( 'description' => __( 'Sample widget', 'wpb_widget_domain' ), ) 
);
}

// widget front-end

public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );


echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];


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
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php 
}
	
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
}

Dupa adaugarea codului, trebuie sa va mergeti la pagina Aspect»Widgeturi. Veti observa noul widget in lista widgeturilor disponibile.

Trebuie sa trageti si sa plasati acest widget intr-o bara laterala.