Buenas Wecindario, Si eres usuario de WordPress igual te has dado cuenta de que hay ocasiones que necesitas un widget personalizado para tu footer o sidebar. Si es el caso, sigue leyendo, esta es tu guía ideal 👇
Qué es el Widget del WordPress
El Widget es un pequeño código que nos deja extender funciones de la web. Dejándonoslo aplicar en el header y el sidebar
Recuerda que muchos Widgets son los mismos elementos usados como bloques en el Gutenberg. De ser así, podremos aplicarlos dentro de nuestras páginas y posts.
¿ Qué hay que saber para hacer Widgets en WordPress?
Para ello podremos hacer uso de la clase del WordPress , WP_Widget. Y ahora veremos como hacerlo
¿Qué es la clase WP_Widget?
Es un elemento de la Programación Orientada a Objetos (POO). Y este lo podremos “clonar”. Y esta nos permitirá crear un nuevo objeto, un Widget.
Básicamente es la API que nos deja crear un Widget personalizado en nuestro WordPress. Y hay que extender esta clase y usar, unos 4 métodos que lleva. (Tranqui, lo veremos mas adelante)
Los métodos de la clase WP_Widget
Para poder crear el Widget a medida usaremos los 4 primeros métodos del listado. del resto por ahora no hablaremos
- __construct: Aquí declararemos el identificador, el nombre y descripción del Widget
- widget: Aquí pondremos el código del front end de la web
- form: este formulario aparecerá en la web, exactamente en el frontal
- update: Con este, actualizaremos variables con el input visible en el panel de control
Ya sabemos un poco más, lo básico para poder empezar y en este caso haremos el Widget para contar visitas en la web. esta será sencilla, se guardará en nuestra base de datos , exactamente en options y se irá sumando en 1 cada vez que carguen una página.
¿ Cómo crear el código en el Widget contador de visitas que vamos a hacer?
Aqui os hago cada paso necesario para crear vuestro Widget contador de visitas mediante una clase y funciones,
1. Creamos la clase que tendrá los detalles del Widget
Y entonces, extendremos el WP_Widget como veis :
<?php
class widget_webheroe extends WP_Widget {
//Función que construye la clase WP_Widget y declaramos el identificador, el nombre y descripción
function __construct() {
parent::__construct(
);
}
public function widget( $args, $instance ) {
//Aquí aplicamos el código del Widget
}
public function form( $instance ) {
//Aquí pondremos el codifgo del formulario
}
public function update( $new_instance, $old_instance ) {
//Aquí registramos las variables que estan en backend
}
}2. Crearemos el método Constructor
Aquí podremos añadir el identificador del Widget, Mostrando el nombre y descripción del Widget
Usaremosparent::__construct, por ejemplo parent::WP_Widget(), $this->WP_Widget() o WP_Widget::WP_Widget()
<?php
//Función constructora WP_Widget y declaramos el identificador, el nombre y descripción
function __construct() {
parent::__construct(
//Id
'widget_webheroe',
//Nombre
'Contador Webheroe',
//Descripción
array( 'description' => 'Contador de WebVisitas' )
);
}3. Creamos la función Widget
Los valores que se le pasan a $args[]se usan para poner código antes o después de nuestro widget. Además, se usará el filtro widget_title ,Cómo veis he comentado todo el código lo más claramente posible para que se entienda fácilmente, aun así si tenéis dudas ya me contactáis
<?php
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
//Si el título si existe
if (!empty($title)){
echo $args['before_title'] . $title . $args['after_title'];
}
/*El código de tu Widget comienza aquí*/
$option = get_option($this->option_name);//Obtenemos el array con las opciones de este Widget
$counter = $option[$this->number]['counter'];//Obtenemos el valor que nos interesa
//Comprobamos si es una página o un post
if(is_page() || is_single()){
$sum_counter = intval($counter) + 1;//Sumamos uno al valor
$option[$this->number]['counter'] = $sum_counter;//Sobreescribimos el valor de la variable
//Creamos un bucle y se repite hasta que comprobamos el valor , y vemos si se ha actualizado o no
$updated = false;
while($updated === false){
$updated = update_option($this->option_name, $option);
}
}else{
//Si no es página ni post, el valor no se incrementará
$sum_counter = $counter;
}
//Enseñaos el Widget en el front end
?>
<p style="color:#fff">Ha recibido <span style="font-size:50px;font-weight:800;color:#ada"><?php echo $sum_counter; ?></span> visitas</p>
<?php
/*Aquí acaba el código de tu Widget*/
echo $args['after_widget'];
}
4. Crearemos el método Form
Aquí veremos el código del Back End. En la página de edicion de Widgets
<?php
public function form( $instance ) {
//revisar si hemos puesto un título al Widget. Si no, se pondrá el título por defecto
if(isset($instance[ 'title' ])){
$title = $instance[ 'title' ];
}else{
$title = 'Widget Contador de Visitas';
}
//Creamos el formulario que aparece poder cambiar el título
?>
<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
}5. Finalizamos con Update
Crearemos el título y ponemos el contador a 0.
<?php
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['counter'] = '0';
return $instance;
}6. Registramos el Widget
Ahora usaremos el hook register_widget. Y este es el gancho que nos permite registrar la clase anterior y se encarga de que funcione y además que aparezca en el listado de Widgets. Usaremos este hook sólo cuando terminemos de crear la clase, si no tendremos un error fatal:
<?php
add_action( 'widgets_init', function(){
//Registro de la clase que hace funcionar el Widget
register_widget( 'widget_webheroe' );
});Y ya podemos visitar la sección de Widgets en el panel de administración Apariencia/Widgets. Y lo encontraremos dentro del grupo «Widgets».
Y esto es todo Wecindario ! Hasta la próxima, recuerda que el Widget que hemos creado cómo ejemplo, sirve para entender un poco mejor como va la clase WP_Widget y crear nuestros Widgets propios.
Espero que os haya gustado y os haya sido útiles! Hasta la próxima