Een aangepaste (Custom) WordPress-widget maken - DeLaatbusiness
leads chatbot

Een aangepaste (Custom) WordPress-widget maken

4 min


103
6 gratis internet marketing ebooks, klik hier voor download

Wil je je eigen aangepaste widgets maken in WordPress? Met widgets kunt u niet-inhoudselementen toevoegen aan een zijbalk of een widget-klaar gedeelte van uw website.

U kunt widgets gebruiken om banners, advertenties, aanmeldingsformulieren voor nieuwsbrieven en andere elementen aan uw website toe te voegen.

In dit artikel laten we u stap voor stap zien hoe u een aangepaste WordPress-widget maakt.

Een aangepaste WordPress-widget maken

Opmerking: deze tutorial is voor doe-het-zelf WordPress-gebruikers die de ontwikkeling en codering van WordPress leren.

Wat is een WordPress Widget?

WordPress-widgets bevatten stukjes code die u kunt toevoegen aan de zijbalken van uw website of widget-ready gebieden.

Beschouw ze als modules die u kunt gebruiken om verschillende elementen toe te voegen met behulp van een eenvoudige interface voor slepen en neerzetten.

Standaard wordt WordPress geleverd met een standaardset widgets die u met elk WordPress-thema kunt gebruiken. Zie onze beginnershandleiding voor het toevoegen en gebruiken van widgets in WordPress .

Widgets toevoegen in WordPress

Met WordPress kunnen ontwikkelaars ook hun eigen aangepaste widgets maken.

Veel premium WordPress-thema’s en plug-ins worden geleverd met hun eigen aangepaste widgets die u aan uw zijbalken kunt toevoegen.

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

Dat gezegd hebbende, laten we eens kijken hoe u eenvoudig uw eigen aangepaste widgets in WordPress kunt maken.

Een aangepaste widget maken in WordPress

Als u WordPress-codering leert, heeft u een lokale ontwikkelomgeving nodig. U kunt WordPress op uw computer (Mac of Windows) installeren .

Er zijn verschillende manieren om uw aangepaste widgetcode toe te voegen in WordPress.

In het ideale geval kunt u een sitespecifieke plug-in maken en uw widgetcode daar plakken.

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

Een andere tool die u kunt gebruiken, is de plug-in Code Snippets waarmee u eenvoudig aangepaste code aan uw WordPress-website kunt toevoegen .

In deze zelfstudie maken we een eenvoudige widget die alleen bezoekers begroet. Het doel hier is om vertrouwd te raken met de WordPress-widgetklasse.

Laten we beginnen.

Een eenvoudige WordPress-widget maken

WordPress wordt geleverd met een ingebouwde WordPress Widget-klasse. Elke nieuwe WordPress-widget breidt de klasse WordPress-widget uit.

Er worden 18 methoden genoemd in het handboek van de WordPress-ontwikkelaar die kunnen worden gebruikt met de WP Widget-klasse .

In het belang van deze tutorial zullen we ons echter concentreren op de volgende methoden.

  • __construct (): dit is het deel waar we de widget-ID, titel en beschrijving maken.
  • widget: hier definiëren we de uitvoer die door de widget wordt gegenereerd.
  • formulier: In dit deel van de code maken we het formulier met widgetopties voor backend.
  • update: dit is het deel waar we widget-opties in de database opslaan.

Laten we de volgende code bestuderen waar we deze vier methoden hebben gebruikt in de WP_Widget-klasse.

12345678910111213141516171819202122232425// Creating the widget class wpb_widget extends WP_Widget { // The construct part  function __construct() { } // Creating widget front-endpublic function widget( $args, $instance ) { } // Creating widget Backend public function form( $instance ) { } // Updating widget replacing old instances with newpublic function update( $new_instance, $old_instance ) { } // Class wpb_widget ends here}

Het laatste stuk van de code is waar we de widget daadwerkelijk zullen registreren en in WordPress laden.

1234function wpb_load_widget() {register_widget( 'wpb_widget' );}add_action( 'widgets_init', 'wpb_load_widget' );

Laten we dit allemaal samenvoegen om een ​​eenvoudige WordPress-widget te maken.

U kunt de volgende code kopiëren en plakken in uw aangepaste plug-in of het bestand functions.php van het thema.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465// 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', 'wpb_widget_domain'),  // Widget descriptionarray( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), ) );} // Creating widget front-end public function widget( $args, $instance ) {$title = apply_filters( 'widget_title', $instance['title'] ); // before and after widget arguments are defined by themesecho $args['before_widget'];if ( ! empty( $title ) )echo $args['before_title'] . $title . $args['after_title']; // This is where you run the code and display the outputecho __( 'Hello, World!', 'wpb_widget_domain' );echo $args['after_widget'];} // Widget Backend public function form( $instance ) {if ( isset( $instance[ 'title' ] ) ) {$title = $instance[ 'title' ];}else {$title = __( 'New title', 'wpb_widget_domain' );}// Widget admin form?><p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></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 newpublic 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 widgetfunction wpb_load_widget() {register_widget( 'wpb_widget' );}add_action( 'widgets_init', 'wpb_load_widget' );

Na het toevoegen van de code moet je naar de Appearance »Widgets-pagina gaan. U zult de nieuwe WPBeginner-widget opmerken in de lijst met beschikbare widgets. Je moet deze widget naar een zijbalk slepen en neerzetten.

Demo-widget

Deze widget heeft slechts één formulierveld om in te vullen, u kunt uw tekst toevoegen en op de knop Opslaan klikken om uw wijzigingen op te slaan.

Nu kunt u uw website bezoeken om deze in actie te zien.

Een voorbeeld van uw aangepaste widget bekijken

Laten we nu de code opnieuw bestuderen.

Eerst hebben we de ‘wpb_widget’ geregistreerd en onze aangepaste widget geladen. Daarna hebben we gedefinieerd wat die widget doet en hoe de widget-backend moet worden weergegeven.

Ten slotte hebben we gedefinieerd hoe om te gaan met wijzigingen in de widget.

Nu zijn er een paar dingen die je misschien wilt vragen. Wat is bijvoorbeeld het doel wpb_text_domain?

WordPress gebruikt gettext om vertaling en lokalisatie af te handelen. Dit wpb_text_domainen __e vertelt gettext om een string voor vertaling beschikbaar te maken. Bekijk hoe u WordPress-thema’s die klaar zijn voor vertaling kunt vinden .

Als u een aangepaste widget voor uw thema maakt, kunt u deze vervangen wpb_text_domaindoor het tekstdomein van uw thema.

We hopen dat dit artikel je heeft geleerd hoe je eenvoudig een aangepaste WordPress-widget kunt maken. Misschien wilt u ook onze lijst met de handigste WordPress-widgets voor uw site bekijken .


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format