Vill du skapa dina egna widgets på WordPress?

Med widgets kan du dra och släppa objekt till valfritt sidofält eller widgetområde på din webbplats. I den här artikeln kommer vi därför att visa dig hur du enkelt skapar en anpassad WordPress-widget.

Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

Tillbaka till varför vi är här.

Skapa en anpassad widget på wordpress

Vad är en WordPress-widget?

WordPress-widgets innehåller bitar av kod som du kan lägga till på din webbplats sidofält eller widgetvänliga områden. Tänk på det som moduler som du kan använda för att lägga till olika element med ett enkelt "Dra och släpp" -gränssnitt.

Som standard levereras WordPress med en standard uppsättning widgets som du kan använda med vilket WordPress-tema som helst. 

Upptäck också våra bästa premium WordPress-teman.

Wordpress instrumentpanel widget

WordPress låter också utvecklare skapa sina egna anpassade widgets. Många teman och Wordpress plugins kommer med sina egna anpassade widgets som du kan lägga till i dina sidofält.

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

Som sagt, låt oss se hur du enkelt kan skapa dina egna egna widgetar på WordPress.

Hur man skapar en anpassad widget på Wordpress

Denna handledning är för personer som har kunskap om webbutveckling.

Innan du börjar är det bättre att skapa ett specifikt plugin på webbplatsen där du klistrar in widgetkoden för den här självstudien.

Du kan också klistra in koden i filen "features.php" i ditt WordPress-tema. Men det kommer bara att vara tillgängligt när det specifika WordPress-temat är aktivt.

I denna handledning skapar vi en enkel widget som helt enkelt hälsar besökare. Titta på den här koden och klistra sedan in den i din specifika plugin för att se den i handling.

// Registrera och ladda widgetfunktionen wpb_load_widget () {register_widget ('wpb_widget'); } add_action ('widgets_init', 'wpb_load_widget'); // Skapa widgetklassen wpb_widget utökar WP_Widget {funktion __construct () {parent :: __ construct (// Base ID of your widget 'wpb_widget', // Widget name will appear in UI __ ('BPC Widget', 'wpb_widget_domain') , // Widget description array ('description' => __ ('Simple WordPress Widget', 'wpb_widget_domain'),)); } // Skapa offentlig widget för widgetfunktion ($ args, $ instans) {$ title = apply_filters ('widget_title', $ instance ['title']); // före och efter widgetargument definieras av teman echo $ args ['before_widget']; om (! tom ($ title)) echo $ args ['before_title']. $ title. $ args ['after_title']; // Det är här du kör koden och visar utgångsekot __ ('Simple Widget', 'wpb_widget_domain'); echo $ args ['after_widget']; } // Widget Backend public function form ($ instance) {if (isset ($ instance ['title'])) {$ title = $ instance ['title']; } annat {$ title = __ ('Ny titel', 'wpb_widget_domän'); } // Admin-formulärwidget?> get_field_id( 'title' ); ?>" name="get_field_name( 'title' ); ?>" type="text" value="" />

När du har lagt till koden måste du gå till " Utseende> Widgets ". Du kommer att märka den nya widgeten " PCB widget I listan över tillgängliga widgetar. Du måste dra och släppa den här widgeten i en sidofält.

Wordpress anpassad widget

Genom att besöka din blogg ser du en widget på sidfältet där du lägger till widgeten i fråga.

Låt oss nu titta på den här koden.

Först spelade vi in ​​“ wpb_widget Och laddade vår anpassade widget. Därefter definierade vi vad den här widgeten gör och hur den ska visas på instrumentpanelen.

Slutligen definierade vi hur man ska hantera ändringarna i widgeten.

Nu är det några saker du kanske vill veta. Vad är till exempel målet " wpb_text_domain "?

WordPress använder "gettext" för att hantera översättning och lokalisering. Så " wpb_text_domain "och __e berättar gettext hur man hämtar en översättningssträng om den finns.

Om du skapar en anpassad widget för ditt WordPress-tema kan du ersätta "wpb_text_domain" med texten för domänen för ditt tema.

Upptäck också några premium WordPress-plugins  

Du kan använda andra Wordpress plugins för att ge ett modernt utseende och för att optimera hanteringen av din blogg eller hemsida.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. Galaxy Funder

Galaxy Funder är ett funktionspackat crowdfunding-system som är utformat för alla WooCommerce-webbplatser. Använda Wordpress plugin premium Galaxy Funder kommer du att kunna hantera din egen crowdfunding-webbplats eller lägga till insamlingskampanjer i rubriken på din WooCommerce onlinebutik.

Galaxy funder woocommerce crowdfunding system wordpress plugin

Du kan också använda valfri betalningsportalen stöds av WooCommerce. Observera att "Galaxy Funder" fungerar direkt på onlinebutikssidan, vilket gör det lättare för användarbidraget.

Ladda ner | Demo | webbhotell

2. Klicka på WhatsApp Chat

Le Wordpress plugin premium Click to WhatsApp Chat gör det enkelt för WordPress-kunder att ansluta till webbplatsägaren eller kundsupport med hjälp av deras WhatsApp-konto. 

Klicka för att whatsapp chatt för wordpress plugin

Klicka bara på WhatsApp-kontot så kommer det att dirigeras direkt till det mobila WhatsApp-kontot med ett standardmeddelande. Och om klienten är på stationär eller bärbar dator kommer han att omdirigeras till WhatsApp Web.

Detta plugin kräver WhatsApp-nummer och tid och dag, som webbplatsägaren eller supportteamet kommer att använda för att diskutera. Chat-knappen kan läggas till på WooCommerce-produktsidan, som är direkt relaterad till denna produkt.

Ladda ner | demo | webbhotell

3. Ladda ner bildvattenmärke

Cette WordPress plugin premium låter dig enkelt lägga till vattenstämplar till dina bilder Lätt digitala nedladdningar.lätt digital-file-download-bild vattenstämpel

Ces vattenmärken kan vara en copyright-symbolbild, a företagslogotyp, eller en del av varumärket som en transparent PNG-bild.

Ladda ner | demo | webbhotell

Andra rekommenderade resurser

Vi inbjuder dig också att konsultera resurserna nedan för att gå vidare i greppet och kontrollen av din webbplats och blogg.

Slutsats

Voila! Det här är allt för den här tutorialen, jag hoppas att det kommer att låta dig skapa egna widgetar på din WordPress-blogg. Om du har commentaires eller förslag, tveka inte att meddela oss i det reserverade avsnittet.

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk

.