Een aangepaste WordPress-widget maken - DeLaatbusiness

Een aangepaste WordPress-widget maken

3 min


94
6 gratis internet marketing ebooks, klik hier voor download

Wilt u uw eigen aangepaste widgets maken in WordPress? Met widgets kunt u elementen slepen en neerzetten in elk zijbalkgebied of widgetgereed 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 door een eenvoudige drag-and-drop interface te gebruiken.

Standaard wordt WordPress geleverd met een standaardset widgets die u kunt gebruiken met elk WordPress-thema. Zie 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.

Als je de video niet leuk vindt of meer instructies nodig hebt, ga dan door met lezen.

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.


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