Gå till innehållet

Hur man skapar en anpassad widget på Wordpress

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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 tillåter också utvecklare att skapa sina egna egna widgetar. Många teman och WordPress-plugins har sina egna anpassade widgetar som du kan lägga till i dina sidfä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.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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 optimera greppet på din blogg eller webbplats.

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. Genom att använda premium-Galaxy Funder WordPress-plugin kommer du att kunna hantera din egen crowdfunding-webbplats eller lägga till insamlingskampanjer i rubriken i din WooCommerce-webbutik.

Galaxy funder woocommerce crowdfunding system plugin wordpress

Du kan också använda valfri betalningsportalen stöds av WooCommerce. Observera att "Galaxy Funder" fungerar direkt på webbutikssidan, vilket underlättar användarbidragsprocessen.

Ladda ner | demowebbhotell

2. Klicka på WhatsApp Chat

Den premium WordPress-plugin Click to WhatsApp Chat tillåter WordPress kunder att enkelt ansluta till webbplatsägaren eller kundsupport med sitt 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

Detta premium WordPress-plugin gör att du enkelt kan lägga till vattenstämplar i 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

.  

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
10 aktier
del8
tweet1
Enregistrer1