Een aangepaste WordPress-widget maken

3 min


94

Laat, E.W.M. de (Erwin)

all rights reserved

DeLaatBUsiness

Een aangepaste WordPress-widget maken

Een aangepaste WordPress-widget maken

Wilt u uw eigen aangepaste widgets maken in WordPress? Met widgets kunt u elementen slepen en neerzetten in elk zijbalkgebied of widget gedeelte van uw website. In dit artikel laten we u zien hoe u eenvoudig een aangepaste WordPress-widget kunt maken.

Een aangepaste WordPress-widget maken

Wat is een WordPress Widget?

WordPress-widgets bevatten stukjes code die u kunt toevoegen aan de zijbalken van uw website of aan de kant van de widget. Zie ze 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 kunt gebruiken met elk WordPress-thema. Raadpleeg onze beginnershandleiding over het toevoegen en gebruiken van widgets in WordPress .

WordPress-widgets

WordPress biedt ontwikkelaars ook de mogelijkheid om hun eigen aangepaste widgets te maken. Veel 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 toevoegen aan een zijbalk zonder een code te schrijven.

Laten we echter zien hoe je eenvoudig je eigen aangepaste widgets kunt maken in WordPress.

Een aangepaste widget maken in WordPress

Voordat we aan de slag gaan, zou het het beste zijn als u een sitespecifieke plug-in maakt waarin u de widgetcode uit deze zelfstudie plakt.

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

// Register and load the widget

function wpb_load_widget() {

    register_widget( ‘wpb_widget’ );

}

add_action( ‘widgets_init’, ‘wpb_load_widget’ );

 

// 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 description

array( ‘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 themes

echo $args[‘before_widget’];

if ( ! empty( $title ) )

echo $args[‘before_title’] . $title . $args[‘after_title’];

 

// This is where you run the code and display the output

echo __( ‘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 new

public 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

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. U moet deze widget naar een zijbalk slepen en neerzetten.

Aangepaste WordPress-widget toegevoegd aan een zijbalk

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 registreerden we de ‘wpb_widget’ en laadden onze aangepaste widget. Daarna hebben we gedefinieerd wat die widget doet en hoe de back-end van de widget wordt weergegeven.

Ten slotte hebben we gedefinieerd hoe we omgaan met wijzigingen die in de widget zijn aangebracht.

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

WordPress gebruikt gettext voor vertaling en lokalisatie. Dit wpb_text_domainen __e vertelt gettext om een ​​reeks beschikbaar te maken voor vertaling. Ontdek hoe u vertaalbare WordPress-thema’s 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 geholpen om eenvoudig een aangepaste WordPress-widget te maken. U wilt misschien ook onze lijst met de nuttigste WordPress-widgets voor uw site bekijken .


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