WordPress 2.5 Plugin Style Guide

Anzeige

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

<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.

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

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

<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.

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