Det är enkelt att göra en widget i WordPress. Man kan givetvis göra den hur avancerad som helst, men själva grunden är enkel och jag ska visa hur det går till.

Du vet säkert att en widget är en plugin-liknande funktion som man kan placera någonstans på sin WordPress-sajt, ofta hamnar den i sidomenyn. Vanliga exempel är ”Arkiv”, ”Taggmoln” eller ”Senaste flickr-bilderna”.

Det fungerar så att man i ett tema har definierat ett antal utrymmen där man kan placera widgets, dessa utrymmen kallas för ”sidebars”. Sidebars kan man placera i sidomenyn, footern eller egentligen var som helst i temat. I varje ”sidebar” kan sen sajt-administratören dra in en eller flera widgets.
Hos mig ser det ut så här, under ”Utseende” -> ”Widgets”.

Från och med WordPress 2.8 har det blivit lättare att skapa egna widgets. Man utgår från basklassen WP_Widget och implementerar en del av metoderna.
De här metoderna måste man implementera:

class My_Widget extends WP_Widget {
	function My_Widget() {
		// widget actual processes
	}

	function widget($args, $instance) {
		// outputs the content of the widget
	}

	function update($new_instance, $old_instance) {
		// processes widget options to be saved
	}

	function form($instance) {
		// outputs the options form on admin
	}
}
register_widget('My_Widget');

Jag tänkte bygga en widget som visar min senaste status-uppdatering från sajten Yo!. Genom att logga in på yo.se och gå till URL:en http://yo.se/widget/, får man en HTML-snutt som egentligen gör hela jobbet åt oss när det gäller att visa senaste status. den ser ut så här:

  
Windyjonas
  
  

Det allra enklaste hade förstås varit att klippa in den här koden i en text-widget, men då hade det här inte blivit ett exempel på hur man skapar en WordPress-widget, så vi struntar i det och går vidare 🙂

Jag kallar widgeten för ”Yo Status”, så min widgetklass ska få namnet ”Yo_Status_Widget” och de metoder jag ska implementera blir följaktligen:

• Yo_Status_Widget() – konstruktor
• widget() – funktionen som ska skicka ut widget-koden till webbläsaren
• update() – Det ska gå att konfigurera widgeten. update() ser till så att man kan ändra aliasnamn (yo-användare)
• form() – Skapar formuläret för att ändra aliasnamn

Yo_Status_Widget()

Skapa ett WP_Widget-objekt med rätt metainfo och options. ”classname” nedan är alltså css-klassen i det omslutande HTML-elementet.

function Yo_Status_Widget() {
	$widget_ops = array('classname' => 'widget_yo_status', 
            'description' => 'Display status from Yo! (http://yo.se)' );
	$this->WP_Widget('yo-status', __('Yo Status'), $widget_ops);
}

widget()

function widget($args, $instance) {
	extract($args, EXTR_SKIP);

	echo $before_widget;
	$alias = empty($instance['alias']) ? ' ' :
          apply_filters('widget_alias', $instance['alias']);
   ?>
    

		  

                 
		  
		  
		
		
update()
Den här funktionen anropas efter att användaren matat in ett yo-alias och klickat på "Spara"
function update($new_instance, $old_instance) {
	$instance = $old_instance;
	$instance['alias'] = strip_tags($new_instance['alias']);

	return $instance;
}

Formuläret som möjliggör ändring av yo-användare.
form()
	function form($instance) {
		$instance = wp_parse_args( (array) $instance, array( 'alias' => '') );
		$alias = strip_tags($instance['alias']);
?>
		

			Alias på yo.se: 
				
			
		

Resultat
Till slut bakar jag ihop alltihop till en ny plugin. Det hade i och för sig gått att deklarera hela widgeten i functions.php, men jag föredrar att inte röra temafilerna så mycket.

 Jag gjorde en plugin av alltihop genom att skapa filen /wp-contents/plugins/yo-status/yo-status.php. En del av outputen i widget()-metoden är här utbruten i en egen metod.
 'widget_yo_status', 'description' => 'Display status from Yo! (http://yo.se)' );
		$this->WP_Widget('yo-status', __('Yo Status'), $widget_ops);
	}
 
	function yo_status($alias) {
		?>
		

		  

		  
		  
		
		yo_status($alias);
		echo $after_widget;
	}
 
	function update($new_instance, $old_instance) {
		$instance = $old_instance;
		$instance['alias'] = strip_tags($new_instance['alias']);

		return $instance;
	}
 
	function form($instance) {
		$instance = wp_parse_args( (array) $instance, array( 'alias' => '') );
		$alias = strip_tags($instance['alias']);
?>
			
Alias på yo.se: 


Resultatet syns längst ner i högersplaten, eller om jag ändrat något, så såg det en gång ut så här: