En la clase anterior vimos cómo podíamos crear Bloques de Gutenberg con Advanced Custom Fields. Pero eso no es todo lo que este gran plugin nos ofrece… ¡También podemos crear widgets!

Crear un widget personalizado

Lo primero que haremos es crear un widget para nuestro proyecto, será un widget a medida que nos permitirá poner un mensaje de tipo banner para anunciar algo.

Importante destacar que el siguiente código es un ejemplo real de Trinchera WP y está creado en un plugin y no en el tema principal.

<?php
    /**
     * Widgets > Announcements
     *
     * This file registers the Announcements widget.
     *
     * @since 1.0.0
     */
    class Widget_Announcements extends WP_Widget {
    	
        /**
        * Initialize all the things
        *
        * @since 1.2.0
        */
        public function __construct() {
    
            parent::__construct(
                'acf_custom_widget', // Base ID.
                'TrincheraWP | Anuncios', // Name.
                array(
                    'description' => 'Widget para añadir anuncios',
                    'classname'   => 'widget-announcements',
                ) // Args.
            );
    
        }
    
        /**
        * Front-end display of widget.
        *
        * @see WP_Widget::widget()
        *
        * @param array $args     Widget arguments.
        * @param array $instance Saved values from database.
        */
        public function widget( $args, $instance ) {
        
            $style = get_field( 'widget_announcements_style', 'widget_' . $args['widget_id'] );
            $type = get_field( 'widget_announcements_type', 'widget_' . $args['widget_id'] );
            $url_mission = get_field( 'widget_announcements_mission_url', 'widget_' . $args['widget_id'] );
            $url_webinar = get_field( 'widget_announcements_webinar_url', 'widget_' . $args['widget_id'] );
    
            echo '<div class="announcement text-xs bg-gray-100 border border-gray-300 border-l-4 py-2 px-3 ' . esc_html( $type ) . '">';
    
            echo $args['before_widget'];
    
            echo '<p><span class="font-bold">' . apply_filters( 'widget_title', $instance['title'] ) . '</span>: ';
    
            // Check if the announcement is "mission" type.
            if ( 'mission' === $type ) {
          
                // If the user is not logged in, then advice to access.
                if ( ! is_user_logged_in() ) {
    
                    echo 'Las misiones están disponibles solo para los miembros de TrincheraWP <a class="btn btn-primary clearfix sm:inline-block md:ml-2" href="#" title="Únete de forma gratuita">Crea tu cuenta de forma gratuita</a> <a class="btn" href="#" title="Acceder a tu cuenta">Acceder</a></p>';
    
                } else {
    
                    echo esc_html( get_field( 'widget_announcements_content', 'widget_' . $args['widget_id'] ) ) . ' <a class="btn clearfix sm:inline-block md:ml-2" href="' . esc_html( $url_mission ) . '" title="Ver la misión">Saber más de la misión</a></p>';
    				
                }
            } elseif ( 'webinar' === $type ) {
    
                echo esc_html( get_field( 'widget_announcements_content', 'widget_' . $args['widget_id'] ) ) . ' <a class="btn clearfix sm:inline-block md:ml-2" href="' . esc_html( $url_webinar ) . '" title="Ver el webinar">Ver webinar</a></p>';
    
            } else {
                echo esc_html( get_field( 'widget_announcements_content', 'widget_' . $args['widget_id'] ) );
            }
    
            echo $args['after_widget'];
    
            echo '</div> <!-- .announcement-' . esc_html( $type ) . ' -->';
    
        }
    }
?>

Crear el Grupo de Campos

Una vez tenemos el widget listo, es hora de crear el Grupo de Campos en nuestro wp-admin. Ahora podremos escoger el widget como «lugar» donde mostrar estos campos.

Añadir formulario al widget

Si queremos poder añadirle un título al Widget y poder guardar los datos, tenemos que añadirle la funcionalidad de «formulario».

<?php
    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
    */
    public function form( $instance ) {
        if ( isset( $instance['title'] ) ) {
            $title = $instance['title'];
        }
        ?>
    
        <p>
            <label for="<?php echo esc_html( $this->get_field_id( 'title' ) ); ?>"><?php _e( 'Title' ); ?></label>
            <input class="widefat" id="<?php echo esc_html( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_html( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
    
        <?php
    }
    
    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? wp_strip_all_tags( $new_instance['title'] ) : '';
    
        return $instance;
      }
    
    } // class Widget_Announcements
?>

Registrar Widget

Una vez tenemos todo listo, es hora de registrar el Widget para que nos aparezca en la lista de widgets disponibles.

<?php
    // register ACF_Custom_Widget widget.
    add_action(
        'widgets_init',
        function() {
            register_widget( 'Widget_Announcements' );
        }
    );
?>