WordPress 2.5 Plugin Style Guide

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 16 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

Das WordPress in der neuen Version 2.5 mit einem neuen Admin-Design kommt, ist sicher mittlerweile bekannt. Die Spatzen (Blogger) zwitschern es von den Dächern.

Allerdings hat sich nicht nur das Design geändert, auch das Markup ist neu und anders. Dies ist besonders für Plugin-Autoren nachteilig, denn nun gilt es, die Plugins an das neue Markup anzupassen; nur so können sie vom neuen Design oder anderen Admin-Design verstanden und richtig dargestellt werden.

Derzeit gibt es keine Dokumentation zum neuen Markup und die Arbeit an eigenen Plugins hat mich veranlasst, die wichtigsten Punkte zu speichern, man benötigt sie immer wieder. Im folgenden ein einfaches Beispiel mit grundlegenden Markup-Beispielen und den jeweiligen Screenshot im Standard-Admin-Design.

Plugin Seite

WP 2.5 Plugin Design


<div class="wrap" id="top">

	<h2><?php _e('Plugin Name (h2)', 'styleguide') ?></h2>
	<h3><?php _e('Ãberschrift (h3)', 'styleguide') ?></h3>
	<p><?php _e('Beispiel Text', 'styleguide'); ?></p>

	<table summary="submit" class="form-table">
		<tr valign="top">
			<th><?php _e('Name', 'styleguide'); ?></th>
			<td><?php _e('Erg&auml;nzung', 'styleguide'); ?></td>
		</tr>
		<tr valign="top">
			<th><?php _e('Name', 'styleguide'); ?></th>
			<td><?php _e('Erg&auml;nzung', 'styleguide'); ?></td>
		</tr>
	</table>

	<p class="submit">
		<input class="button" type="submit" value="<?php _e('Ausf&uuml;hren', 'styleguide'); ?> &raquo;" />
	</p>

	<div class="tablenav">
		<br style="clear: both;" />
	</div>

</div>

Alternativer Button

Nicht immer trifft es die Formatierung des Submit-Buttons, daher gibt es eine weitere Klasse und ebenso muss nicht der p-Tag mit der Klasse submit verwendet werden, denn der ist für Abschluss-Buttons gedacht.

WP 2.5 Button secondary


<p class="tablenav">
	<input name="example" type="submit" id="example" value="<?php _e('Ausf&uuml;hren', 'styleguide'); ?>" class="button-secondary" />
</p>

Error und Update

WP 2.5 Error und Update


<div class="error">
	<p><?php _e('Beispiel Text', 'styleguide'); ?></p>
</div>

<div class="updated">
	<p><?php _e('Beispiel Text', 'styleguide'); ?></p>
</div>

Übersichts-Tabellen

WP 2.5 Tabellen


<table summary="example" class="widefat">
	<thead>
		<tr>
			<th scope="col">' . __('Feld 1', 'styleguide') . '</th>
			<th scope="col">' . __('Feld 2', 'styleguide') . '</th>
			<th scope="col">' . __('Feld 3', 'styleguide') . '</th>
		</tr>
	</thead>
	<tbody>
		<tr valign="top">
			<td>' . __('Erg&auml;nzung', 'styleguide') . '</td>
			<td>' . __('Erg&auml;nzung', 'styleguide') . '</td>
			<td>' . __('Erg&auml;nzung', 'styleguide') . '</td>
		</tr>
	</tbody>
</table>

Alternativer Background

Wenn du eine alternative Farbe für Zeilendarstellung oder Tabellen benötigst, dann vergib die Klasse form-invalid. Diese bekommt, je nach gewähltem Userdesign, eine andere Hintergrundfarbe und Tabellen o.ä werden übersichtlicher.

WP 2.5 alt in Tabellen


<?php                              
$class = '';                       
foreach ($referers as $r) {        
	$class = ($class=='form-invalid')
?>                                 
<tr class="<?php echo $class; ?>">

Von Frank Bültge

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.

2 Kommentare

  1. weiß jemand wie gut die version „suchmaschinenoptimiert“ ist? gibt es da schon ein tool die version dann seotechnisch zu frisieren? bitte feedback. mfg meg24

Kommentare sind geschlossen.