Widget – Infos und Tutorial

Seit Version 2.2 bietet WordPress sog. Widgets.

Damit lassen sich Sidebars dynamisch bestücken. Dies hat den vor Vorteil, dass man Themes einfach wechseln kann und die Sidebar trotzdem erhalten bleibt. Bisher habe ich halt die sidebar.php des Themes angepasst.

Es gibt zwar viele gute Widget-Plugins wie

Aber die große Frage bleibt natürlich, wie legt man ein eigenes, einfaches Theme an?
Dazu sind die Infos im Netz eher etwas Mau, daher hier eine kleine Einführun. Es wird ein kleines Widget erstellt, welches die del.icio.us-TagCloud anzeigt.

Als erstes legt man ein „normales“ Plugin an:

< ?php
/*
Plugin Name: del.icio.us Tag cloud Widget
Plugin URI: <a href="http://www.zeeman.de/computer/widget-infos-und-tutorial" class="linkification-ext" title="Linkification: http://www.zeeman.de/computer/widget-infos-und-tutorial">http://www.zeeman.de/computer/widget-infos-und-tutorial</a>
Description: Ein Plugin zum Anzeigen der Del.icio.us Tagcloud
Author: Sebastian Just
Version: 1.0
Author URI: <a href="http://www.zeeman.de" class="linkification-ext" title="Linkification: http://www.zeeman.de">http://www.zeeman.de</a>
*/

Soweit, nichts besonderes. Damit dieses Plugin zu einem Widget wird, sind ein paar spezielle Methoden nötig:

    //Main function for sidebar output
function widget_delicious($args) {
// Prepare vars like $before_widget and so on
extract($args);
//Get options from the database
$options = get_option('widget_delicious');
$username = htmlspecialchars( $options['username'] , ENT_QUOTES);
$title = htmlspecialchars( $options['title'] , ENT_QUOTES);

//Print the widget to the sidebar
echo $before_widget;
echo $before_title  . $after_title; ?>


< ?php
echo $after_widget;
}

Diese Funktion sucht sich alle Optionen aus der Datenbank zusammen und gibt sie in der Sidebar aus.

Um das Widget konfigurierbar zu machen ist eine zusätzliche Funktion nötig:

//Main function for configuration
function widget_delicious_control() {

// Get options from database
$options = get_option('widget_delicious');

// Handle form submission.
if ( $_POST['widget_delicious-submit'] ) {
// Clean up control form submission options
$newoptions['username'] = strip_tags(stripslashes($_POST['widget_delicious-username']));
$newoptions['title'] = strip_tags(stripslashes($_POST['widget_delicious-title']));
}

// Check if update is nessassaryr
if ( $options != $newoptions ) {
$options = $newoptions;
update_option('widget_delicious', $newoptions );
}

// Format output
$username = htmlspecialchars( $options['username'] , ENT_QUOTES);
$title =  htmlspecialchars( $options['title'] , ENT_QUOTES);´
?>
<!-- Form for configuration -->

<label for="widget_delicious-title" style="line-height: 35px">Widget title:
</label>
<label for="widget_delicious-username" style="line-height: 35px">Del.icio.us user:
</label> 

< ?php
} 

Zum Schluss müssen die Funktionen registriert werden:

//Register all functions
register_sidebar_widget('del.icio.us Tag Cloud', 'widget_delicious');
register_widget_control('del.icio.us Tag Cloud', 'widget_delicious_control'); 

Insgesamt sieht das ganze dann so aus:

  /*
Plugin Name: del.icio.us Tag cloud Widget
Plugin URI: <a href="http://www.zeeman.de/" class="linkification-ext" title="Linkification: http://www.zeeman.de/">http://www.zeeman.de/</a>
Description: Ein Plugin zum Anzeigen der Del.icio.us Tagcloud
Author: Sebastian Just
Version: 1.0
Author URI: <a href="http://www.zeeman.de" class="linkification-ext" title="Linkification: http://www.zeeman.de">http://www.zeeman.de</a>
*/

function widget_delicious_init() {
//Check if widgets are availible
if ( !function_exists('register_sidebar_widget') )
return;
//Main function for sidebar output
function widget_delicious($args) {
[...]
}
//Main function for configuration
function widget_delicious_control() {
[...]
}
//Register all functions
register_sidebar_widget('del.icio.us Tag Cloud', 'widget_delicious');
register_widget_control('del.icio.us Tag Cloud', 'widget_delicious_control');
}
add_action('plugins_loaded', 'widget_delicious_init');
?>

Ja, dieses „Funktion in der Funktion“ist richtig. Die Namen der Funktionen müssen nciht so heißen wie die Plugin-Datei. Es sollte nur eindeutig im WordPress-System sein.
Download: del.icio.us Tag cloud Widget

Jetzt muss das Plugin nur aktiviert werden und ist dann unter Theme > Widgets verfügbar und kann in der Sidebar positioniert werden.

So habe ich nun alle Elemente in der Sidebar auf Widgets umgestellt und auch gleich ein neues Theme installiert 😉

Und wie bei fast jedem Theme wird mal wieder bei jedem Eintrag der komplette Beitrag angezegit. Um dies etwas einzukürzen ist es nötig das Template etwas anzupassen:

 [...]
< ?php the_content('Read the rest of this entry »'); ?>
[...]

muss in
 [...]
< ?php the_excerpt('Read the rest of this entry »'); ?>
[...]
geändert werden.

Jetzt freue ich mich auf WordPress 2.3, welches endlich ein Tag-System bietet. Daher will ich jetzt auch kein Plugin mehr installieren, welches in wenigen Tagen (nämlich am 24. September 2007) obsolet ist.

Schreibe einen Kommentar