Eigen widget maken
Gepost op 3 februari 2010 om 14:00u, door hiranthi | 1 reactie | reageren
loading...
Vanaf WordPress versie 2.8 is er een nieuwe #Developing_Widgets_on_2.8.2B">Widgets API die het maken van je eigen widget sterk vereenvoudigt. In deze tutorial ga ik laten zien hoe je gemakkelijk je eigen widget maakt met behulp van deze API.
Widget idee
Voor je een widget gaat maken moet je natuurlijk bedenken waar je een widget voor gaat maken. In deze tutorial gaan we een eigen zoekformulier maken die gebruikt kan worden in plaats van de standaard widget daarvoor.
De code
We beginnen met de standaard plugin code bovenin het bestand, dit omdat de widget als plugin wordt geinstalleerd en geactiveerd. Je kunt het eventueel ook in je theme-map gooien en het bestand includen in je functions.php maar dat doen we nu dus niet.
<?php /* Plugin Name: Zoekformulier Plugin URI: http://www.hiranthi.nl/cms/wordpress/eigen-widget-maken/1232.html Description: Custom zoekformulier widget Author: Hiranthi Molhoek-Herlaar (illutic WebDesign) Version: 1.0 Author URI: http://www.illutic.nl */ ?>
Daarna maken we de class aan voor onze widget:
<?php class Custom_Search_Widget extends WP_Widget { function Custom_Search_Widget() { // widget actual processes } function form($instance) { // outputs the options form on admin } function update($new_instance, $old_instance) { // processes widget options to be saved } function widget($args, $instance) { // outputs the content of the widget } } add_action('widgets_init', create_function('', 'return register_widget("Custom_Search_Widget");')); ?>
Hier onder gaan we per functie de code af.
Custom_Search_Widget()
In deze functie geef je de basis informatie van de widget op: titel en omschrijving.
<?php function Custom_Search_Widget() { $widget_ops = array('description' => 'Mijn eigen zoekformulier'); $this->WP_Widget('custom_search_widget', 'Zoekformulier', $widget_ops); } ?>
Dit ziet er zo uit in je Widget overzicht:
form()
Deze functie is voor het formulier waarmee je de instellingen van je widget kunt aanpassen.
<?php function form($instance) { $title = esc_attr($instance['title']); $label = esc_attr($instance['label']); $input = esc_attr($instance['input']); $submit = esc_attr($instance['submit']); ?> <label for="<?php echo $this->get_field_id('title'); ?>">Titel van het zoekformulier: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></label> <label for="<?php echo $this->get_field_id('label'); ?>">Label van het zoekformulier: <input class="widefat" id="<?php echo $this->get_field_id('label'); ?>" name="<?php echo $this->get_field_name('label'); ?>" type="text" value="<?php echo $label; ?>" /></label> <label for="<?php echo $this->get_field_id('input'); ?>">Standaard inhoud zoekveld: <input class="widefat" id="<?php echo $this->get_field_id('input'); ?>" name="<?php echo $this->get_field_name('input'); ?>" type="text" value="<?php echo $input; ?>" /></label> <label for="<?php echo $this->get_field_id('submit'); ?>">Verzend button: <input class="widefat" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" type="text" value="<?php echo $submit; ?>" /></label> <?php } ?>
Een visuele weergave van bovenstaande code:
update()
Waar de update() functie voor is zal geen verrassing zijn: het updaten van de Widget instellingen.
<?php function update($new_instance, $old_instance) { $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); $instance['label'] = strip_tags($new_instance['label']); $instance['input'] = strip_tags($new_instance['input']); $instance['submit'] = strip_tags($new_instance['submit']); return $instance; } ?>
widget()
De widget() functie zorgt voor de output van de widget in je sidebar.
<?php function widget($args, $instance) { extract($args); $title = ( $instance['title'] != '' ) ? $before_title . apply_filters('widget_title', esc_attr($instance['title'])) . $after_title : ''; // laat de title, en $before_title/$after_title, alleen zien als de widget title is ingevuld $label = ( $instance['label'] != '' ) ? esc_attr($instance['label']) : 'Zoeken:'; // is $label leeg? Dan krijgt het standaard de waarde 'Zoeken:' $input = esc_attr($instance['input']); $submit = ( $instance['submit'] != '' ) ? esc_attr($instance['submit']) : 'Zoeken'; // is $submit leeg? Dan krijgt het standaard de waarde 'Zoeken' // output title & $before_widget echo $title . $before_widget; // output widget inhoud ?> <form method="get" action="<?php bloginfo('siteurl'); ?>" class="searchform"> <label for="s"><span><?php echo $label; ?></span> <input type="text" name="s" value="<?php echo $input; ?>"<?php if ( $input != '' ) { ?> onblur="if(this.value=='') this.value='<?php echo $input; ?>'; return false;" onfocus="if(this.value!='') this.value=''; return false;"<?php } ?> /></label> <input type="submit" value="»" title="<?php echo $submit; ?>" class="submit" /> </form> <?php // output $after_widget echo $after_widget; } ?>
Zoals je misschien al is opgevallen in de bovenstaande code heb ik er een kleine 'handigheid' bij in gezet: als de instelling 'input' is opgegeven zal het veld automatisch leeggehaald worden als het veld is geselecteerd. Gaat de bezoeker met de muis ergens anders naartoe zonder de inhoud te veranderen, dan komt de inhoud van de instelling 'input' weer tevoorschijn.
De widget die in de 'Eigen widget maken' tutorial wordt gemaakt.
1 reactie op “Eigen widget maken”
Laat een reactie achter
Advertenties
Bedankt voor deze tutorial, heb hem gebruikt voor het maken van een widget
thx!
Bowe Frankema´s laatste blog ..BP-Links; a must have media aggregation tool for your community!