Hur man skapar en anpassad WordPress-widget

Vill du skapa dina egna egna widgetar i WordPress? Widgets tillåter dig att lägga till icke-innehållsdelar i en sidofält eller något widget-klara område på din webbplats.


Du kan använda widgetar för att lägga till banners, annonser, formulär för nyhetsbrev och andra element på din webbplats.

I den här artikeln visar vi dig hur du skapar en anpassad WordPress-widget, steg för steg.

Skapa en anpassad WordPress-widget

Notera: Denna handledning är för DIY WordPress-användare som lär sig WordPress utveckling och kodning.

Vad är en WordPress-widget?

WordPress-widgetar innehåller kodkoder som du kan lägga till i din webbplats sidfält eller widget-klara områden.

Tänk på dem som moduler som du kan använda för att lägga till olika element genom att använda ett enkelt dra och släpp-gränssnitt.

Som standard kommer WordPress med en standarduppsättning av widgets som du kan använda med vilket WordPress-tema som helst. Se vår nybörjarguide om hur du lägger till och använder widgets i WordPress.

Lägga till widgetar i WordPress

WordPress tillåter också utvecklare att skapa sina egna egna widgetar.

Många premium WordPress-teman och plugins har sina egna anpassade widgets som du kan lägga till i dina sidfält.

Du kan till exempel lägga till ett kontaktformulär, ett anpassat inloggningsformulär eller ett fotogalleri i en sidofält utan att skriva någon kod.

Efter att ha sagt det, låt oss se hur du enkelt kan skapa dina egna egna widgetar i WordPress.

Videohandledning

Prenumerera på WPBeginner

Om du föredrar skriftliga instruktioner, fortsätt läsa.

Skapa en anpassad widget i WordPress

Om du lär dig WordPress-kodning behöver du en lokal utvecklingsmiljö. Du kan installera WordPress på din dator (Mac eller Windows).

Det finns flera sätt att lägga till din anpassade widgetkod i WordPress.

Helst kan du skapa en platsspecifik plugin och klistra in din widgetkod där.

Du kan också klistra in koden i ditt temas funktioner.php-fil. Det kommer emellertid endast att finnas tillgängligt när det specifika temat är aktivt.

Ett annat verktyg som du kan använda är kodavsnittet plugin som gör att du enkelt kan lägga till anpassad kod till din WordPress-webbplats.

I denna handledning skapar vi en enkel widget som bara hälsar besökare. Målet här är att bekanta dig med WordPress-widgetklassen.

Låt oss börja.

Skapa en grundläggande WordPress-widget

WordPress kommer med en inbyggd WordPress Widget-klass. Varje ny WordPress-widget utvidgar WordPress-widget-klassen.

Det finns 18 metoder som nämns i WordPress-utvecklarens handbok som kan användas med WP Widget-klassen.

Men för denna tutorial kommer vi att fokusera på följande metoder.

  • __construct (): Det här är den del där vi skapar widget-ID, titel och beskrivning.
  • widget: Här definierar vi den utgång som genereras av widgeten.
  • form: Den här delen av koden är där vi skapar formuläret med widgetalternativ för backend.
  • uppdatering: Det här är den del där vi sparar widgetalternativ i databasen.

Låt oss studera följande kod där vi har använt dessa fyra metoder i klassen WP_Widget.

// Skapa widgeten
klass wpb_widget utökar WP_Widget {

// Konstruktionsdelen
funktion __construct () {

}

// Skapa widget front-end
widget för offentlig funktion ($ args, $ instans) {

}

// Skapa widget Backend
allmän funktionsformulär ($ instans) {

}

// Uppdatera widgeten som ersätter gamla instanser med en ny
offentlig funktionsuppdatering ($ new_instance, $ old_instance) {

}

// Klass wpb_widget slutar här
}

Den sista delen av koden är där vi faktiskt kommer att registrera widgeten och ladda den i WordPress.

funktion wpb_load_widget () {
register_widget (‘wpb_widget’);
}
add_action (‘widgets_init’, ‘wpb_load_widget’);

Låt oss nu sätta ihop allt detta för att skapa en grundläggande WordPress-widget.

Du kan kopiera och klistra in följande kod i din anpassade plugin eller temas features.php-fil.

// Skapa widgeten
klass wpb_widget utökar WP_Widget {

funktion __construct () {
förälder :: __ konstruktion (

// Bas-ID för din widget
‘Wpb_widget’,

// Widgetnamn kommer att visas i UI
__ (‘WPBeginner Widget’, ‘wpb_widget_domain’),

// Widgetbeskrivning
array (‘beskrivning’ => __ (‘Exempelwidget baserat på WPBeginner Tutorial’, ‘wpb_widget_domain’),)
);
}

// Skapa widget front-end

widget för offentlig funktion ($ args, $ instans) {
$ title = Apply_filters (‘widget_title’, $ instans [‘title’]);

// Argument före och efter widgetar definieras av teman
echo $ args [‘before_widget’];
if (! tom ($ title))
echo $ args [‘before_title’]. $ titel. $ args [ ‘after_title’];

// Det är här du kör koden och visar utdata
echo __ (‘Hej, världen!’, ‘wpb_widget_domain’);
echo $ args [‘after_widget’];
}

// Widget Backend
allmän funktionsformulär ($ instans) {
if (isset ($ instans [‘title’])) {
$ title = $ instans [‘title’];
}
annars {
$ title = __ (‘Ny titel’, ‘wpb_widget_domain’);
}
// Widgetformulär för widget
?>

<?php _e (‘Titel:’); ?>

<?php
}

// Uppdatera widgeten som ersätter gamla instanser med en ny
offentlig funktionsuppdatering ($ new_instance, $ old_instance) {
$ instans = matris ();
$ instans [‘title’] = (! tom ($ new_instance [‘title’]))? strip_tags ($ new_instance [‘title’]): ”;
returnera $ instans;
}

// Klass wpb_widget slutar här
}

// Registrera och ladda widgeten
funktion wpb_load_widget () {
register_widget (‘wpb_widget’);
}
add_action (‘widgets_init’, ‘wpb_load_widget’);

Efter att du har lagt till koden måste du gå till Utseende »Widgets sida. Du kommer att märka den nya WPBeginner-widgeten i listan över tillgängliga widgetar. Du måste dra och släppa den här widgeten till en sidofält.

Demo widget

Denna widget har bara ett formulärfält att fylla, du kan lägga till din text och klicka på Spara för att lagra dina ändringar.

Nu kan du besöka din webbplats för att se den i aktion.

Förhandsgranska din anpassade widget

Låt oss nu studera koden igen.

Först registrerade vi ‘wpb_widget’ och laddade vår anpassade widget. Efter det definierade vi vad den widgeten gör, och hur man visar widgetens back-end.

Slutligen definierade vi hur vi ska hantera ändringar som gjorts i widgeten.

Nu finns det några saker du kanske vill ställa. Till exempel, vad är syftet med wpb_text_domain?

WordPress använder gettext för att hantera översättning och lokalisering. Denna wpb_text_domain och __e berättar för gettext för att göra en sträng tillgänglig för översättning. Se hur du kan hitta WordPress-teman som är redo att översätta.

Om du skapar en anpassad widget för ditt tema kan du ersätta wpb_text_domain med ditt temas textdomän.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt skapar en anpassad WordPress-widget. Du kanske också vill se vår lista över de mest användbara WordPress-widgetarna för din webbplats.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map