Udvikling af brugerdefinerede widgets til WooCommerce

WooCommerce er et af de mest populære e-handelsplatforme til WordPress. Det giver brugerne mulighed for at oprette et onlinebutikswebsted. Med WooCommerce kan du nemt tilføje widgets til dit websted, så dine kunder har nemmere adgang til informationer, produkter og andre funktioner.

I denne artikel vil vi se på, hvordan du udvikler og tilføjer brugerdefinerede widgets til WooCommerce. Vi vil se på nogle kodeeksempler, som du kan bruge til at skabe din egen widget.

Trin 1: Opret din widget-kode

Først skal du oprette den kode, som din widget bruger. Denne kode skal placeres i en fil med filtypenavnet “.php”. For at gøre dette skal du oprette en ny mappe i din WordPress-rodmappe, og kalde den “wp-content / themes / [tema-navn] / widgets”.

Når mappen er oprettet, skal du oprette en ny fil i den mappe og kalde den “custom-widget.php”. Tilføj derefter følgende kode til filen:

<?php
/**
 * Custom WooCommerce widget
 **/
class Custom_WooCommerce_Widget extends WP_Widget {
 
    /**
     * Register widget with WordPress.
     */
    public function __construct() {
        parent::__construct(
            'custom_woocommerce_widget', // Base ID
            'Custom WooCommerce Widget', // Name
            array( 'description' => __( 'A Custom WooCommerce Widget', 'text_domain' ), ) // 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 ) {
        extract( $args );
        $title = apply_filters( 'widget_title', $instance['title'] );
 
        echo $before_widget;
        if ( ! empty( $title ) )
            echo $before_title . $title . $after_title;
 
        // Display your widget
        echo 'Hello World!';
 
        echo $after_widget;
    }
 
    /**
     * 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'] = strip_tags( $new_instance['title'] );
 
        return $instance;
    }
 
    /**
     * 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' ];
        }
        else {
            $title = __( 'New title', 'text_domain' );
        }
        ?>
        

        <label for="get_field_name( 'title' ); ?>"> 
        <input class="widefat" id="get_field_id( 'title' ); ?>" name="get_field_name( 'title' ); ?>" type="text" value="" />
        
        <?php 
    }
 
} // class Custom_WooCommerce_Widget
 
// register Custom_WooCommerce_Widget widget
function register_custom_woocommerce_widget() {
    register_widget( 'Custom_WooCommerce_Widget' );
}
add_action( 'widgets_init', 'register_custom_woocommerce_widget' );
?>

Denne kode udfører følgende handlinger:

• Opretter en ny widget-klasse kaldet “Custom_WooCommerce_Widget”
• Definerer widgetens display i front-end ved hjælp af funktionen widget()
• Beskytter widgetens data ved hjælp af funktionen update()
• Opretter widgetens grænseflade ved hjælp af funktionen form()
• Registrerer widgeten ved hjælp af funktionen register_widget()

Når du har tilføjet denne kode, kan du begynde at tilpasse den til dine behov.

Trin 2: Tilpas din widget

Når du har tilføjet koden til din widget-fil, skal du tilpasse den til dine behov. Du kan ændre titlen, ikonet, farven og andre detaljer ved hjælp af følgende kode:

// Tilpas titlen
$title = apply_filters( 'widget_title', $instance['title'] );

// Tilpas ikonet
$icon_url = apply_filters( 'widget_icon_url', $instance['icon_url'] );

// Tilpas baggrundsfarve
$background_color = apply_filters( 'widget_background_color', $instance['background_color'] );

Du kan også tilføje HTML-kode til din widget ved hjælp af funktionen widget():

// Display your widget
echo '<div style="background-color: '.$background_color.';">';
echo '<img src="'.$icon_url.'" alt="Widget Icon" />';
echo 'Hello World!';
echo '</div>';

Når du har tilføjet alle de nødvendige ændringer, skal du gemme dine ændringer og lukke filen.

Trin 3: Aktiver din widget

Når din widget er oprettet og tilpasset, skal du aktivere den. For at gøre dette skal du gå til din WordPress-dashboard og navigere til “Udseende” og derefter “Widgets”. Find derefter din widget i listen over tilgængelige widgets og træk den til den ønskede widget-zone.

Når du har trukket din widget til widget-zonen, skal du klikke på den for at åbne indstillingerne. Her kan du tilpasse titlen og andre indstillinger for din widget. Når du er færdig, skal du klikke på knappen “Gem” for at gemme dine ændringer.

Konklusion

Ved hjælp af denne artikel har du lært, hvordan du udvikler og tilføjer brugerdefinerede widgets til WooCommerce. Du har lært, hvordan du opretter din widget-kode, tilpasser den og aktiverer den. Med dette kan du hurtigt lave brugerdefinerede widgets, der passer til dine behov.