Jonas Nordström» jonasnordstrom.se http://jonasnordstrom.se Teknik och media Wed, 08 Sep 2010 04:55:08 +0000 en hourly 1 http://wordpress.org/?v=abc Skapa enkel widget i WordPresshttp://jonasnordstrom.se/skapa-enkel-widget-i-wordpress/ http://jonasnordstrom.se/skapa-enkel-widget-i-wordpress/#comments Mon, 12 Oct 2009 22:27:17 +0000 jonas http://jonasnordstrom.se/?p=195 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”.

Widgets i WordPress dashboard

Widgets i WordPress dashboard

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:

<div class="yo-widget" id="_yo_windyjonas">
  <h1><a href="http://windyjonas.yo.se/" title="Jonas Nordström">Windyjonas</a></h1>
  <script src="http://yo.se/widget/1/w.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    _yo.username = "windyjonas";
    _yo.hostname = "http://yo.se";
    _yo.style = "http://yo.se/widget/1/w.css";
    _yo.init();
  </script>
</div>

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']) ? '&nbsp;' :
          apply_filters('widget_alias', $instance['alias']);
   ?>
    <div class="yo-widget" id="_yo_<?php echo $alias ?>">
		  <h1><a href="http://<?php echo $alias ?>.yo.se/">
                 <?php echo $alias ?></a></h1>
		  <script src="http://yo.se/widget/1/w.js" 
                     type="text/javascript" charset="utf-8"></script>
		  <script type="text/javascript" charset="utf-8">
		    _yo.username = "<?php echo $alias ?>";
		    _yo.hostname = "http://yo.se";
		    _yo.style = "http://yo.se/widget/1/w.css";
		    _yo.init();
		  </script>
		</div>
		<?php
	echo $after_widget;
}

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']);
?>
		<p>
			<label for="<?php echo $this->get_field_id('alias'); ?>">Alias på yo.se: 
				<input class="widefat" id="<?php echo $this->get_field_id('alias'); ?>" 
					name="<?php echo $this->get_field_name('alias'); ?>" type="text" 
					value="<?php echo attribute_escape($alias); ?>" />
			</label>
		</p>
<?php
	}

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.

<?php 
/* 
Plugin Name: Yo Status
Plugin URI: http://jonasnordstrom.se/yo-status-widget 
Description: Display your yo.se status in sidebar
Version: 0.2
Author: Jonas Nordstrom
Author URI: http://jonasnordstrom.se
*/
 
add_action( 'widgets_init', 'yo_status_load_widgets' );
 
function yo_status_load_widgets() {
	register_widget( 'Yo_Status_Widget' );
}
class Yo_Status_Widget extends WP_Widget {
	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);
	}
 
	function yo_status($alias) {
		?>
		<div class="yo-widget" id="_yo_<?php echo $alias ?>">
		  <h1><a href="http://<?php echo $alias ?>.yo.se/"><?php echo $alias ?></a></h1>
		  <script src="http://yo.se/widget/1/w.js" type="text/javascript" charset="utf-8"></script>
		  <script type="text/javascript" charset="utf-8">
		    _yo.username = "<?php echo $alias ?>";
		    _yo.hostname = "http://yo.se";
		    _yo.style = "http://yo.se/widget/1/w.css";
		    _yo.init();
		  </script>
		</div>
		<?php
	}
 
	function widget($args, $instance) {
		extract($args, EXTR_SKIP);
 
		echo $before_widget;
		$alias = empty($instance['alias']) ? '&nbsp;' : apply_filters('widget_alias', $instance['alias']); 
        $this->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']);
?>
			<p><label for="<?php echo $this->get_field_id('alias'); ?>">Alias på yo.se: <input class="widefat" id="<?php echo $this->get_field_id('alias'); ?>" name="<?php echo $this->get_field_name('alias'); ?>" type="text" value="<?php echo attribute_escape($alias); ?>" /></label></p>
<?php
	}
}
?>

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:

Exempel på hur Yo Status kan se ut

Exempel på hur Yo Status kan se ut

]]> http://jonasnordstrom.se/skapa-enkel-widget-i-wordpress/feed/ 2