Wil je je eigen aangepaste widgets maken op WordPress?

Met widgets kunt u items slepen en neerzetten in een kant-en-klare zijbalk of widgetgebied op uw website. In dit artikel laten we u daarom zien hoe u eenvoudig een aangepaste WordPress-widget kunt maken.

Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog 

Ga dan terug naar waarom we hier zijn.

Maak een aangepaste widget op WordPress

Wat is een WordPress-widget?

WordPress-widgets bevatten stukjes code die u kunt toevoegen aan de zijbalken van uw website of widgetvriendelijke gebieden. Zie het als modules die u kunt gebruiken om verschillende elementen toe te voegen met behulp van een eenvoudige "Drag and Drop" -interface.

WordPress wordt standaard geleverd met een standaardset widgets die u met elk WordPress-thema kunt gebruiken. 

Ontdek ook onze beste premium WordPress-thema's.

Wordpress dashboard-widget

Met WordPress kunnen ontwikkelaars ook hun eigen aangepaste widgets maken. Veel thema's en WordPress plugins komen met hun eigen aangepaste widgets die u aan uw zijbalken kunt toevoegen.

U kunt bijvoorbeeld toevoegen een contactformulier, een inlogformulier aangepast of een fotogalerij in een zijbalk zonder code te schrijven.

Dat gezegd hebbende, laten we eens kijken hoe je eenvoudig je eigen aangepaste widgets op WordPress kunt maken.

Hoe maak je een aangepaste widget op WordPress

Deze tutorial is voor mensen die kennis hebben van webontwikkeling.

Voordat u begint, is het beter om een ​​specifieke plug-in op de website te maken waar u de widgetcode voor deze zelfstudie plakt.

U kunt de code ook in het "functions.php" -bestand van uw WordPress-thema plakken. Het is echter alleen beschikbaar als dat specifieke WordPress-thema actief is.

In deze zelfstudie maken we een eenvoudige widget die bezoekers eenvoudig begroet. Bekijk deze code en plak deze in uw specifieke plug-in om deze in actie te zien.

// Registreer en laad de widget-functie wpb_load_widget () {register_widget ('wpb_widget'); } add_action ('widgets_init', 'wpb_load_widget'); // Het maken van de widgetklasse wpb_widget breidt WP_Widget {function __construct () {parent :: __ construct (// Basis-ID van uw widget 'wpb_widget', // Widgetnaam zal verschijnen in UI __ ('BPC Widget', 'wpb_widget_domain') , // Widget description array ('description' => __ ('Simple WordPress Widget', 'wpb_widget_domain'),)); } // Aanmaken van een openbare front-end widget functie widget ($ args, $ instance) {$ title = apply_filters ('widget_title', $ instance ['title']); // voor en na widget-argumenten worden gedefinieerd door thema's echo $ args ['before_widget']; if (! empty ($ title)) echo $ args ['before_title']. $ titel. $ args ['after_title']; // Hier voert u de code uit en geeft u de output-echo weer __ ('Simple Widget', 'wpb_widget_domain'); echo $ args ['after_widget']; } // Widget Backend openbaar functieformulier ($ instance) {if (isset ($ instance ['title'])) {$ title = $ instance ['title']; } else {$ title = __ ('Nieuwe titel', 'wpb_widget_domain'); } // Admin-formulierwidget?> get_field_id( 'title' ); ?>" name="get_field_name( 'title' ); ?>" type="text" value="" />

Na het toevoegen van de code moet u naar " Uiterlijk> Widgets ". U zult de nieuwe widget opmerken " BPC Widget In de lijst met beschikbare widgets. U moet deze widget in een zijbalk slepen en neerzetten.

Wordpress aangepaste widget

Als u nu uw blog bezoekt, ziet u een widget in de zijbalk waar u de betreffende widget hebt toegevoegd.

Laten we nu eens kijken naar deze code.

Eerst hebben we ' wpb_widget En onze aangepaste widget geladen. Vervolgens hebben we gedefinieerd wat deze widget doet en hoe deze op het dashboard moet worden weergegeven.

Ten slotte hebben we gedefinieerd hoe de wijzigingen in de widget moeten worden verwerkt.

Nu zijn er een paar dingen die u misschien wilt weten. Wat is bijvoorbeeld het doel " wpb_text_domain »?

WordPress gebruikt "gettext" om vertaling en lokalisatie te beheren. Dus " wpb_text_domain "en __e vertelt gettext hoe een vertaalreeks kan worden opgehaald als deze bestaat.

Als u een aangepaste widget voor uw WordPress-thema maakt, kunt u "wpb_text_domain" vervangen door de tekst van het domein van uw thema.

Ontdek ook enkele premium WordPress-plug-ins  

U kunt andere gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. Galaxy Funder

Galaxy Funder is een crowdfundingsysteem boordevol functies dat is ontworpen voor elke WooCommerce-website. Gebruik van de WordPress Plugin premium Galaxy Funder kunt u uw eigen crowdfunding-website beheren of fondsenwervingscampagnes toevoegen aan de kop van uw WooCommerce online winkel.

Galaxy funder woocommerce crowdfunding systeem plugin wordpress

U kunt ook elke betalingsgateway ondersteund door WooCommerce. Houd er rekening mee dat "Galaxy Funder" rechtstreeks op de online winkelpagina werkt, waardoor het proces van gebruikersbijdragen eenvoudiger wordt.

Downloaden | Demo | web hosting

2. Klik voor WhatsApp Chat

Le WordPress Plugin premium Click to WhatsApp Chat maakt het gemakkelijk voor WordPress-klanten om verbinding te maken met de website-eigenaar of klantenondersteuning via hun WhatsApp-account. 

Klik om te whatsapp-chat voor WordPress-plug-in

Klik gewoon op het WhatsApp-account en het wordt direct naar het mobiele WhatsApp-account geleid met een standaardbericht. En als de client op desktop of laptop is, wordt hij doorgestuurd naar WhatsApp Web.

Deze plug-in vereist het WhatsApp-nummer en de tijd en dag, die de website-eigenaar of het ondersteuningsteam zal gebruiken om te bespreken. Chatknop kan worden toegevoegd aan WooCommerce-productdetailpagina, die direct gerelateerd is aan dit product.

Downloaden | demonstratie | web hosting

3. Download afbeelding watermerk

deze WordPress-plug-in premium laat je eenvoudig watermerken aan je afbeeldingen toevoegen Gemakkelijke digitale downloads.easy-digitaal-file-download-image watermerk

Ces watermerken kan een afbeelding van een auteursrechtsymbool zijn, a bedrijfslogo, of een deel van de branding als een transparante PNG-afbeelding.

Downloaden | demonstratie | web hosting

Andere aanbevolen bronnen

We nodigen u ook uit om de onderstaande bronnen te raadplegen om verder te gaan in de greep en controle van uw website en blog.

Conclusie

Alstublieft ! Dat is alles voor deze tutorial, ik hoop dat je hiermee aangepaste widgets kunt maken op je WordPress-blog. Als je dat hebt gedaan commentaires of suggesties, aarzel niet om ons te laten weten in de gereserveerde sectie.

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken

...