Hur man skapar en dynamisk widget i WordPress

WordPress-widgets kan hjälpa dig att göra din webbplats dynamisk och effektivt interagera med besökare. Det finns många WordPress-widgets tillgängliga för användning. Men att skapa en anpassad WordPress-widget hjälper dig att lägga till valfri kod till din WordPress-webbplats.

Mestadels alla webbplatser använder den dynamiska widgeten för att förbättra användarupplevelsen och för vissa andra ändamål. Du kan skapa kontaktformulär, inloggningsformulär, prenumerationskort, livespårning och så många andra funktioner på din webbplats med WordPress-widgets.

Det är enkelt att skapa en widget och det här inlägget kommer att göra det enklare för dig. Så utan att slösa någon tid låt oss börja skapa dynamiska widgets i WordPress.

 

Hur man skapar en dynamisk widget i WordPress

I det här inlägget kommer vi att täcka detta ämne i tre huvuddelar.

 

DEL 1: Förstå några saker innan du börjar

Innan du lär dig hur du skapar en dynamisk WordPress-widget måste du veta några saker.

Dessa saker är relaterade till grunderna i widgetarna och hur dynamiska widgets är sammansatta av WordPress. Försök inte att försumma, ignorera eller hoppa över den här delen, för det kommer att hjälpa dig mycket.

Se den här delen som byggstenen. Men om du är bekant med WordPress-widgets, kodning, plugins, funktioner etc. Då kan du hoppa över det.

 

Vad är en WordPress-widget?

En WordPress-widget är ett litet block och detta block placeras någonstans på din WordPress-webbsida.

Widgeten kan användas för att ge dina besökare ett unikt innehåll och funktionalitet utan att koda någonting. Lite WordPress-kodning räcker för att skapa en widget.

Popup-fönster för prenumerationsruta, meddelanden, popup-fönster för kontaktformulär, Live-datauppdateringar, etc. är några vanliga widgets som används av WordPress-webbansvariga.

 

Statisk widget

En statisk widget har ingen interaktion med användarna eftersom endast envägskommunikation finns där. Den används för att tillhandahålla oföränderlig information eller samla in information från användare på ett enkelt sätt.

 

Dynamisk widget

Dynamiska widgets interagerar effektivt med användare och de tillhandahåller data som uppdateras med olika API:er. Dessa widgets samlar också in information och använder den dynamiskt. En komplett automationsfunktion finns i den dynamiska widgeten.

 

Kombination

De flesta webbplatser använder idag en kombination av statiska och dynamiska widgets. I dessa widgets tillhandahåller de statisk information tillsammans med dynamisk funktionalitet. 

 

Saker du måste veta

Nu är du bekant med WordPress-widgeten och dess typer. WordPress tillhandahåller många inbyggda widgets till sina användare. Men om du vill skapa en anpassad WordPress-widget för din webbplats kan du behöva följande saker. 

 

Grundläggande kodning

Du måste vara bekant med den grundläggande OOP (objektorienterad programmering) i PHP. 

 

Backup originalkod

Tänk på att du ska spela med din WordPress-kod. För att undvika problem måste du säkerhetskopiera din ursprungliga WordPress-kod.

 

Placering av kod

WordPress-widgets kommer att utvecklas med koder men var ska dessa koder placeras? Du kan placera en widgetkod i WordPress-temans functions.php fil. Dessa widgetar kommer att vara aktiva när du har temat aktivt.

 

Grunderna i WordPress-widgeten

WordPress tillhandahåller  WP_Widget  klass för att skapa dynamiska widgets. Vi måste utöka denna klass genom att lägga till fler funktioner enligt vårt krav för att skapa en dynamisk WordPress-widget. Följande är de fyra grundläggande funktionerna vi kan lägga till   WP_Widget   klass.

• Konstruktörsfunktion.
• För att visa widgetinnehållet skapar vi  widget funktion.
• För att uppdatera inställningarna för en widget använder vi  Uppdatering funktion.
• För att samla in information från användare använder vi  Form funktion.

I en dynamisk widget kommer vi att använda några av dessa fyra widgetfunktioner. Efter det kommer vi att registrera vår widget med hjälp av  register_widget. 

 

DEL 2: Låt oss skapa en dynamisk widget för WordPress

Att skapa en dynamisk widget för WordPress är en lång process. Kanske kommer det att kännas som en komplex sak om du gör det för första gången, men vi har gjort det enkelt för dig.

Vi har delat upp hela processen i fyra enkla steg. Följ dessa fyra enkla steg för att skapa en dynamisk widget för WordPress.

 

STEG 1: Skapa en tom plugin

Det första steget är att skapa ett tomt plugin för vår WordPress-widget, detta steg är enkelt och enkelt. Du kanske har sett detta förut om du någonsin har skapat plugins eller widgets.

Vi skapar ett plugin eftersom vi kommer att lägga till en widget i detta plugin och sedan lägga till det pluginet på vår WordPress-webbplats.

För att göra detta måste du gå till  /wp-content/plugins/. När du skapar plugin-programmet för din WordPress-webbplats måste du lägga till en ny katalog och sedan namnge den därefter.

Du kan namnge det vad du vill. I din katalog måste du skapa   index.php.   Denna indexfil kommer att ha följande exempelkod.

Alla ovan nämnda detaljer i det tomma pluginet kommer att användas av WordPress för att visa dig detaljerna om ditt plugin i adminpanelen. Efter att ha lagt till denna kod för att skapa en tom plugin. Du kommer att se det i din WordPress adminpanel. Nu måste du aktivera detta plugin.

 

STEG 2: Skapa ett exempel på widgetkod

Det andra steget är att skapa ett exempel på en widgetkod. Vi kommer att använda de fyra grundläggande funktionerna för att utöka användbarheten av  WP_Widget  klass.

class Exempel_Widget utökar WP_Widget { public function __construct() { } public function widget( $args, $instance ) { // Skapa exempelwidgeten } } // Registrera widgetfunktionen register_sample_widget() { register_widget( 'My_Custom_Widget' ); } add_action( 'widgets_init', 'register_sample_widget' );

I kodavsnittet ovan kan du se det  WP_Widget utökas med användning av konstruktionsfunktionen. Och i den sista delen av blocket kan du se hur vi har registrerat vår provwidget med  register_widget. 

Efter att ha skapat och registrerat exempelwidgeten måste vi lägga till dynamiska funktioner till den. Vi kan använda  widget,  bilda, och  Uppdatering fungerar enligt våra krav.

BONUS TIPS: För att lägga till stylingdetaljer kan du använda CSS  Klass.   Det kan läggas till i HTML DOM och det kommer att stilisera visningen av hela widgeten. 

 

STEG 3: Lägg till widget på sidan

När du är klar med kodningsdelen. Du kan lägga till widgeten på din sida. Kom ihåg att vi ännu inte har lagt till någon dynamisk information eller datakälla i vår widget.

För att göra det dynamiskt måste vi lägga till en dynamisk informationskälla. Vi kommer att göra det i nästa steg. För tillfället kommer vi att lägga till den här nyskapade anpassade widgeten till WordPress-webbsidan.

För att lägga till den på sidan måste du gå tillbaka till WordPress adminpanel. Där måste du gå till Utseende alternativ i sidofältet. Gå till Utseende > Widgets.

Här kan du lägga till din widget var som helst på sidan som sidhuvud, sidfot, sidofält, etc.

 

STEG 4: Lägg till dynamisk data i widgeten

Nu är mer än hälften av processen avslutad. Det är dags att lägga till dynamisk data till din widget. Du kan få dynamisk data från vilken källa som helst.

Om du till exempel gör en widget för att visa aktuella COVID-19-fall av världen, måste du hämta data från en webbplats som WHO eller en mediasajt.

Hämta webbadressen till informationen och lägg till  API-nyckel till det. Använder nu widget funktion tillsammans med "GET"-instruktionen kan du få livedetaljerna om COVID-19 (enligt exemplet).  

API-nyckel tillsammans med "GET"-begäran tar och visar data eller information i din widget. Få hjälp med JSON-strängarna och variablerna för att få informationen uppdaterad i din widget.

 

STEG 5: Ladda upp plugin

Du kan förhandsgranska din widget när du har lagt till alla koder som krävs.

Nu är det sista steget att ladda upp plugin-programmet till din WordPress-adminpanel. För detta måste du packa in plugin-programmet i en zip-fil. Gå nu till Plugins> Lägg till nytt> Ladda upp plugin och ladda upp din plugin.

 

DEL 3: Få element, plugins, widgets på ett ställe

Det verkar svårt att skapa och lägga till plugins, widgets och element? Oroa dig inte, den goda nyheten är att du inte behöver göra något manuellt nuförtiden.

Det finns många WordPress-teman, plugins och widgets tillgängliga. De flesta av dina krav kan uppfyllas med dessa färdiga cum anpassningsbara widgets. Följande är det bästa tillgängliga alternativet.

 

Deep Wordpress Theme

Smakämnen Deep WordPress tema tillhandahållet av The Webnus är ett av de bästa alternativen för att få premium WordPress-teman, element, plugins, etc. Du kan använda alla dessa saker för att placera vilken dynamisk widget som helst på din WordPress-webbplats. Följande är några av de bästa funktionerna som du bara får med deep WordPress-tema av Webnus.

 

Speed ​​Booster

Extra koder på dina sidor påverkar din sidladdningshastighet. Men det finns inga extra koder som ska laddas med detta tema. Vilket gör att dina sidor laddas snabbare. CSS- och JS-element läses in i sidans källkod. Så det gör det smidigare att ladda med mindre kod.

 

Super respons

Du kommer att få en förbättrad användarupplevelse på dina webbsidor. Förbättrad UX hjälper dig att ge en supersvarsfunktion till dina webbplatsbesökare.

 

Lätt att använda

Deep temaimportören är mycket enkel och snabb att använda. Vilket hjälper dig att arbeta på ett mycket bekvämt och bekvämt sätt medan du importerar teman till din WordPress-webbplats.

 

Äkta prissättning

Du kommer att spara mycket när du använder deep WordPress-tema av Webnus. Alla teman, plugins är tillgängliga till ett äkta pris.

 

Låt oss sammanfatta!

I det här inlägget har vi lärt oss vad en dynamisk WordPress-widget är och hur man skapar den.

Från att lägga till data till att skapa den grundläggande widgeten, vi har täckt alla aspekter av hela processen. Du kan enkelt skapa en dynamisk WordPress-widget om du följer stegen som nämns i det här inlägget.

Vi har också lärt oss att du kan få färdiga plugins, widgets, element etc. av Webnus. Du kommer att spara både tid och pengar när du använder deep WordPress-tema av Webnus.