Widgets låter dig lägga till element som inte är innehåll i en sidofält eller något widget-redo område på din WordPress-webbplats. Du kan använda dem för att lägga till banderoller, annonser, formulär för nyhetsbrevsregistrering och andra element på din webbplats.
Du kan också skapa en anpassad widget för att bädda in unika funktioner med en personlig touch som sociala medieflöden, senaste inlägg eller HTML-taggar.
På WPBeginner använder vi anpassade widgets för att visa olika typer av innehåll i vår webbplats sidofält. Och i den här artikeln kommer vi att visa dig hur du skapar en anpassad WordPress-widget, steg för steg.
Notera: Den här handledningen är för gör-det-själv WordPress-användare som lär sig WordPress-utveckling och kodning.
Vad är en WordPress-widget?
WordPress-widgets innehåller kodavsnitt som du kan lägga till i din webbplats sidofält eller widget-redo områden.
Tänk på dem som moduler som du kan använda för att lägga till olika element och funktioner på din webbplats.
Som standard kommer WordPress med en standarduppsättning widgets som du kan använda med vilket WordPress-tema som helst. För mer information, se vår nybörjarguide om hur man lägger till och använder widgets i WordPress.
WordPress tillåter också utvecklare att skapa sina egna anpassade widgets.
Många premium WordPress-teman och plugins levereras med sina egna anpassade widgets som du kan lägga till i dina sidofält.
Du kan till exempel lägga till ett kontaktformulär, ett anpassat inloggningsformulär, ett fotogalleri, ett e-postlist-anmälningsformulär och mer till en sidofält utan att skriva någon kod.
Med det sagt, låt oss se hur du enkelt kan skapa dina egna anpassade widgetar i WordPress.
Innan du skapar en anpassad widget i WordPress
Om du lär dig WordPress-kodning, då behöver du en lokal utvecklingsmiljö. Detta ger dig friheten att lära dig och testa saker utan oro för att din webbplats ska vara live.
Du kan installera WordPress lokalt på Mac med MAMP eller Windows med WAMP.
Om du redan har en live-webbplats kan du flytta den till en lokal värd. För mer information, se vår guide om hur man flyttar en live WordPress-webbplats till en lokal server.
Därefter finns det flera sätt att lägga till din anpassade widgetkod i WordPress.
Helst kan du skapa ett webbplatsspecifikt plugin och klistra in din widgetkod där. Detta låter dig lägga till kod i WordPress som inte är beroende av ditt WordPress-tema.
Du kan också klistra in koden i ditt temas functions.php-fil. Den kommer dock bara att vara tillgänglig när det specifika temat är aktivt.
Ett annat verktyg du kan använda är pluginet WPCode som låter dig enkelt lägga till anpassad kod på din webbplats.
I den här handledningen skapar vi en enkel widget som bara hälsar besökare. Målet här är att bekanta dig med WordPress widget-klassen.
Redo? Låt oss börja.
Skapa en grundläggande WordPress-widget
WordPress levereras med en inbyggd WordPress Widget-klass. Varje ny WordPress-widget utökar WordPress widget-klassen.
Det finns 19 metoder som nämns i WordPress utvecklarhandbok som kan användas med WP Widget-klassen.
För den här handledningens skull kommer vi dock att fokusera på följande metoder.
- __construct() : Detta är delen där vi skapar widgetens ID, titel och beskrivning.
- widget: Detta är där vi definierar utdata som genereras av widgeten.
- formulär: Den här delen av koden är där vi skapar formuläret med widget-alternativ för backend.
- uppdatering: Detta är delen där vi sparar widgetalternativ i databasen.
För att skapa en anpassad widget kan du kopiera och klistra in följande kodavsnitt i din functions.php-fil eller i WPCode (rekommenderas):
<?php
// Creating the widget
class wpb_widget extends WP_Widget {
function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget',
// Widget name will appear in UI
__( 'WPBeginner Widget', 'textdomain' ),
// Widget description
[
'description' => __( 'Sample widget based on WPBeginner Tutorial', 'textdomain' ),
]
);
}
// Creating widget front-end
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
// This is where you run the code and display the output
echo __( 'Hello, World!', 'textdomain' );
echo $args['after_widget'];
}
// Widget Settings Form
public function form( $instance ) {
if ( isset( $instance['title'] ) ) {
$title = $instance['title'];
} else {
$title = __( 'New title', 'textdomain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>">
<?php _e( 'Title:', 'textdomain' ); ?>
</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;
}
// Class wpb_widget ends here
}
// Register and load the widget
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
Det enklaste sättet att lägga till anpassad kod på din WordPress-webbplats är att använda WPCode. Det är det bästa pluginet för kodavsnitt som hjälper till att hantera och infoga kodavsnitt på din webbplats utan att riskera att bryta något.
Först måste du installera och aktivera pluginet WPCode på din webbplats. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.
Efter aktivering kan du gå till Kodavsnitt » + Lägg till avsnitt från WordPress adminpanel. Härifrån väljer du alternativet 'Lägg till din anpassade kod (nytt avsnitt)'.
Därefter kan du klistra in den anpassade widgetkoden i området Kodförhandsgranskning.
Du måste också klicka på rullgardinsmenyn 'Kodtyp' och välja alternativet 'PHP-snutt'.
Därefter kan du skrolla ner och välja Infogningsmetod för din kod.
WPCode låter dig välja var koden ska köras. För den här handledningen kan du använda standardalternativen och köra den överallt.
När det är gjort kan du scrolla tillbaka till toppen för att spara kodavsnittet.
För att aktivera kodavsnittet, klicka helt enkelt på växlingsknappen till 'Aktiv'.
För att lära dig mer, se vår guide om hur man lägger till anpassad kod på din WordPress-webbplats.
Efter att ha lagt till koden i WordPress måste du gå till sidan Utseende » Widgetar i din WordPress-administrationspanel.
Klicka sedan på ikonen 'Plus' för att lägga till ett block, sök efter 'WPBeginner Widget' och välj den nya widgeten.
Den här widgeten har bara ett formulärfält att fylla i.
Du kan lägga till din text och klicka på knappen 'Uppdatera' för att spara dina ändringar.
Nu kan du besöka din WordPress-webbplats för att se den anpassade widgeten i aktion.
Här är ett exempel på hur det ser ut på vår demosida.
Lägga till en anpassad widget i WordPress klassiska redigerare
Om du använder klassiska widgetredigeraren för att lägga till nya widgets på din webbplats, då kommer processen att vara liknande.
Det kommer att finnas en ny widget som heter 'WPBeginner Widget' i listan över tillgängliga widgets. Du behöver dra och släppa denna widget i din sidofält.
Ange sedan en titel och klicka på ‘Spara’ för att spara dina widgetinställningar.
Din nya anpassade widget kommer nu att vara live på din webbplats.
Nu ska vi studera koden igen.
Först registrerade vi ‘wpb_widget’ och laddade vår anpassade widget. Därefter definierade vi vad widgeten gör och hur widgetens backend ska visas.
Slutligen definierade vi hur vi ska hantera ändringar som gjorts i widgeten.
Nu finns det några saker du kanske vill fråga. Till exempel, vad är syftet med textdomain?
WordPress använder 'gettext' för att hantera översättning och lokalisering. Denna textdomain och _e talar om för 'gettext' att göra en sträng tillgänglig för översättning. För att lära dig mer, se vår guide om hur du kan hitta översättningsklara WordPress-teman.
Om du skapar en anpassad widget för ditt tema kan du ersätta textdomain med ditt temas textdomän.
Alternativt kan du använda ett WordPress-översättningsplugin för att enkelt översätta WordPress och skapa en flerspråkig WordPress-webbplats.
Bonus: Lägg till anpassade stilar till dina WordPress-widgets
När du väl har skapat en WordPress-widget kan du även lägga till anpassade stilar till den. Detta kan förbättra din webbplats utseende, upprätthålla konsekvens och dra uppmärksamhet till viktig information.
För att göra detta, besök sidan Utseende » Widgets och lägg till widgeten du vill anpassa. Du kommer nu att se några alternativ för att ändra dess färger och typografi i blockpanelen till höger.
Om widgeten dock inte visar det alternativet kan du anpassa den genom att lägga till CSS-klasser efter att ha expanderat fliken 'Avancerat'.
Nu kan du lägga till anpassad CSS till ditt WordPress-tema som riktar sig mot den specifika CSS-klassen.
För det, gå till sidan Utseende » Anpassa och byt till fliken Ytterligare CSS. Här ser du en förhandsgranskning av din webbplats med en ruta för att lägga till dina CSS-regler.
Du kan nu använda anpassad CSS för att anpassa din widgets utseende. För detaljer, se vår handledning om hur du lägger till anpassade stilar till dina WordPress-widgets.
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 guide om hur man inaktiverar widgetblock i WordPress och vår handledning om hur man tar bort inaktiva widgets i WordPress.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Dan
Strängen 'wpb_text_domain' hittas inte i exempelkoden. Jag gissar att exempelkoden uppdaterades och texten i artikeln inte gjorde det?
För att bekräfta, är ‘wpb_text_domain’ faktiskt ‘web_widget_domain’ från exempelkoden?
Tack på förhand för all feedback.
WPBeginner Support
Tack för att du påpekade detta, vi kommer att uppdatera den här artikeln och förtydliga detta bättre.
Admin
marwan
hej,
kan jag lägga koden som en separat class.php och inte i functions.php
Karel Hanton
Tack för en utmärkt handledning. Jag lade till koden i mitt testplugin och det fungerar perfekt som beskrivet – jag ser widgeten i listan Utseende » Widgets och jag kan lägga till den i sidofältet.
Men jag ser inte den nya widgeten i listan för sidredigeraren. Saknar jag något, behövs en annan registrering eller inställningar?
Tack igen för hjälpen.
Aldo
Detta visas nu som en "Legacy Widget" i Wordpress. Finns det ett nytt sätt att skapa widgets?
JP
detta är jättebra, enkelt klipp och klistra-exempel var precis vad jag letade efter. Tack!
WPBeginner Support
You’re welcome
Admin
Banu
Jag har skapat ett CRUD-plugin och jag behöver använda det på en sida, kan du guida mig hur jag använder det pluginet på sidan?
WPBeginner Support
Det skulle bero på hur du ställde in pluginet, för att ha det på en sida kan du antingen leta efter att använda en kortkod för visning på framsidan eller titta i alternativ-API:et om du ville visa det på administratörssidan av en webbplats.
Admin
Kishan
Hur kan jag skapa fler än 1 anpassad widget?
Och hur kan jag ställa in andra fält som radio, kryssruta, rullgardinsmeny, text i widgeten?
WPBeginner Support
Du skulle behöva ersätta wpb_widget med vad du vill att din nya widget ska kallas och sedan skulle koden bero på vad du specifikt vill lägga till. Om du tittar i WordPress codex kan du se de olika tillgängliga koderna.
Admin
Carmen
Hej!
För närvarande utvecklar jag ett plugin och jag behöver skapa en widget som låter användaren lägga till en specifik funktionalitet på sin webbplats.
Jag kopierade koden för din widget till en fil och sparade filen i min plugins katalog. Jag använde add_action och do_action i min plugins huvudfil för att ladda den men det fungerar fortfarande inte. Kan du hjälpa mig, tack?
Tack!
WPBeginner Support
Tyvärr skulle det bero mycket på hur din plugin är konfigurerad, du kanske vill se till att båda delarna av denna kod laddas för att widgeten ska kunna läggas till och visas.
Admin
Maximilian K.
En kort fråga, vad händer om jag vill skapa widgets där jag också kan placera andra widgets? Som tomma bootstrap-kolumner 6-3-3 t.ex. och i varje kolumn kan jag sedan placera widgets som bild, text, senaste inlägg etc.
Finns det ett kommando / nyckelord för att signalera att det finns plats för andra widgets i denna widget...
eftersom jag är lite förvirrad över mitt eget skapade tema och hur WP fungerar... du förstår att jag är nybörjare ^^
Jag har redan lagt in allmän information som sidtitel, gjort widgetområden i min sidfot så att jag kan placera menyer, relaterade länkar etc. där. Det fungerade.
Men nu är jag förvirrad över hur jag kan realisera mitt innehåll i WordPress som jag designade det tidigare. Kanske några nyckelord är hjälpsamma för att läsa mer om dem.
WPBeginner Support
Det skulle kräva mer anpassning än vad vi går igenom i den här artikeln, du kan behöva undersöka hur man skapar ett sidofält för kod som du kan använda: https://www.wpbeginner.com/wp-themes/how-to-add-dynamic-widget-ready-sidebars-in-wordpress/
Admin
Lars
Bra handledning! Fungerade perfekt.
WPBeginner Support
Glad our tutorial could help
Admin
Watson Anikwai
Hur får man ett anpassat inläggstypfält från wp-databasen och använder en widget för att visa det på startsidan?
vicky
jag kan inte lägga till två anpassade widgets .. den andra widgeten visas inte ....
vad ska jag göra ??? .. snälla hjälp
Ahad Bhatti
Verkligen begripligt och hjälpsamt. Tack.
Belitza Gomez
Hej, jag skulle vilja veta var jag kan hitta "anpassad meny" bland tillgängliga widgets. Den visas inte och jag har inte kunnat lägga till en sida i sidfoten via den här widgeten.
tack för din hjälp!!!!
Samdoxer
Hej, hur skulle jag visa en logotyp istället för text. Skulle det räcka att ersätta logotypens URL med texten.
Tack på förhand.
WPBeginner Support
Se dina temainställningar eller besök sidan Utseende » Anpassa i adminområdet. Där hittar du ett alternativ för att ladda upp din logotypbild.
Admin
Gary Foster
Vilken kom först, widgeten eller appen?
Måste en widget registreras? Om så är fallet, hur?
Hur skyddar du bäst din idé om en widget eller app?
Tack alla
shelley
Dessa instruktioner fungerade utmärkt för att skapa min anpassade widget. Jag kan dock inte lista ut hur jag ändrar teckenstorleken till 60px. Jag lyckades lägga till CSS i Divi-temainställningarna som centrerade texten och lade till en linjebård. Men hur ändrar jag stilen på teckensnittet, snälla? Att lägga till "font-size:60px" fungerar inte. Jag vill att teckensnittet ska vara stort, som en slagord som löper över sidan. Tack.
Ahmad Farhan
Very helpfull. tankyou
Eyad
Tack så mycket för dina handledningar
Luigi Briganti
Hej! Jag hoppas att du kan hjälpa mig.
Jag har skapat en anpassad inläggstyp som visar tidtabellen för en butik. Självklart kan du skapa så många tidtabeller du vill, men min nödvändighet är att visa en given tidtabell i webbplatsens sidofält.
För detta ändamål skapade jag en widget som loopar tidtabellsinläggen och visar endast 1 (nämligen det första, eftersom jag sorterade i ASC-ordning). Detta är en tillfällig lösning, bara för att se om widgeten fungerar och det gör den faktiskt.
Vad jag verkligen vill göra är att visa i backend en rullgardinslista över alla inlägg som tillhör inläggstypen "timetable" så att jag kan välja den jag behöver när jag behöver den och visa den i frontend. Hur kan jag göra detta?
Tack om du kan/vill hjälpa till.
Anees Ijaz
Tack mannen för att du räddade min tid ..
Kevin
Jag älskar det här inlägget, har hjälpt mig mycket! Tack!