WordPress 2 för iPhone

Det här inlägget gjordes via applikationen ”WordPress 2” på iPhone. Det är en helt ny applikation, av någon underlig anledning har man valt att inte bara uppgradera den befintliga WordPress-appen. Många nyheter, de viktigaste är det nya gränssnittet, som är mycket trevligare än det gamla, samt det nya kommentarsgränssnittet med gravatarer.

Här kommer en omotiverad bild, som test 🙂

Jonas tipsar – 2009-10-26

Jonas tipsar – 2009-10-22

Jonas tipsar – 2009-10-20

Jonas tipsar – 2009-10-14

Skapa enkel widget i WordPress

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: https://jonasnordstrom.se/yo-status-widget 
Description: Display your yo.se status in sidebar
Version: 0.2
Author: Jonas Nordstrom
Author URI: https://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

Jonas tipsar – 2009-10-08

Bildhantering i WordPress 2.9

Matt Mullenweg har vid ett flertal tillfällen antytt att det kommer att läggas mycket jobb på mediehanteringen i WordPress. Ett stort steg är den nya möjligheten att redigera bilder, en nyhet som kommer med WordPress 2.9. Tidigare har man, hjälpligt, kunnat ändra storlek på bilderna och inte så mycket mer. Men i och med den nya versionen av WordPress (som inte är släppt än, ska jag kanske säga), så ska det gå att göra enklare bildredigering, det går att beskära bilder, rotera, vända och skala upp och ner.

Så här ser det ut i den senaste officiella WordPress-versionen (2.8.4) när man vill redigera bilder:
redigera media, i WordPress 2.8.4

I den senaste utvecklar-versionen (från WordPress svn) ser det helt annorlunda ut:

Bildredigering i WordPress 2.9
Bildredigering i WordPress 2.9

Notera de nya valen för att grafiskt markera ett område och beskära, fungerar riktigt bra!

Läs mer om nyheterna i WordPress 2.9.

Jonas tipsar – 2009-10-01