Mit dieser Funktion kann man allerdings mehr machen. Magazin-Style für Blogs sind aktuell sehr gefragt und viele Blogs haben eine ganze Reihe von Autoren. Es liegt also nahe, den Autor des jeweiligen Beitrags zu verlinken und vorzustellen. Auch dazu bietet WP eine ganze Reihe an Template Tags, siehe Codex.

Nun wäre es doch schön, wenn man dem Autor zusätzlich ein Gesicht verleiht. Das kann man mit unter anderem mit dem Plugin „Extended User Profile“ machen und die Autorenbeschreibung im Backend von WP aufbereiten.

Alternativ kann man das Gravatar des Autors laden, so hat er auch einfach die Verwaltung über einen Zugang. Nun funktioniert die Gravatar-Funktion get_avatar() schon wunderbar im Loop von WP und lediglich die E-Mail-Adresse muss der Funktion übergeben werden. Diese kann einfach per Template Tag get_the_author_email() ausgelesen werden.

<?php
$author = get_the_author_email();
echo get_avatar( $author, 80 );
?>

Mit diesem Code entsteht die Ausgabe:

<img alt='' src='http://www.gravatar.com/avatar/md5-Schlüssel_des_gravatar?s=80&d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fmd5-Schlüssel_des_gravatar%3Fs%3D80&r=G' class='avatar avatar-80' height='80' width='80' />

Alternativ kann auch direkt die E-Mail geholt werden, also ohne Variable.

<?php echo get_avatar( get_the_author_email(), 80 ); ?>

Die Formatierung erfolgt dann klassisch per CSS; zur Verfügung steht die Klasse avatar, die allerdings auch in den Kommentaren vergeben wird. Gleichzeitig wird aber auf Basis der Größe des Gravatars eine Klasse vergeben - bei dem obigen Syntax wäre dass avatar-80, so dass man über diese Klasse das Bild des Beitragsautors formatieren könnte.

Hinweis: Seite WordPress 2.8 ist die Funktion get_the_author_email() mit get_the_author_meta('email') ersetzt, ihr kann auch eine ID mitgegeben werden, so dass man außerhalb des Loop den Autor ausgeben kann.

global $post;
$author_email = get_the_author_meta( 'email', $post->post_author );
echo get_avatar( $author_email, '60' );

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Seit wenigen Minuten gibt es nun die offizielle neue Version, viele Neuerungen, die auf vielen Blogs diskutiert wurden und werden. Spitzname ist „Brecker“, wie bisher der Name eines außergewöhnlichen Jazz-Musikers(in). In diesem Fall der Saxophonist Michael Brecker.
Für die Ungeduldigen unter euch - der Download ist nun verfügbar.

Einige Zahlen: 185 Tage Entwicklung, 1300 individuelle Veränderungen, 60 helfende Personen

Parallel steht wordpress.org in einem neuen Design am Start. Umschauen, es lohnt sich die Core-Files zu durchsuchen und das eine oder andere Schmankerl zu finden. Ich tue das schon geraume Zeit und werde immer wieder fündig. Freue mich auf diesen neuen Schritt und neue Aufgaben, die man mit WordPress machen kann. Das schöne, so finde ich - die Flexibilität, die ich so schätzen gelernt habe, bleibt weiterhin erhalten.

• Offizielle News
• WP 2.5 im Detail
• Changelog

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Die Möglichkeiten von Shortcodes sind vielfältig, viele andere Applikationen lieben diese Funktion und mit der neuen Funktionalität kann man dem Kunden das Schreiben im Backend damit recht gut erleichtern. Um die Shortcodes noch in das Quicktag-Menu zu bekommen, empfiehlt sich die Verwendung des Plugin AddQuicktag.

Die Übergabe ist einfach und schnell verstanden. Eine kleine Einführung und ersichtliche Erfolge gibt es in Kurzversion in den folgenden Zeilen. Wie es genau geht und ein Plugin mit verschiedenen Beispielen gibt es bei Ozh, der derzeit auch die neue WordPress Funktion durchleuchtet.

Die Möglichkeiten

[shortcode ]
[shortcode /]
[shortcode foo="bar" /]
[shortcode foo="bar" baz="bing" /]
[shortcode ]content[shortcode /]
[shortcode foo="bar"]content[/shortcode]

Erläuterungen

In kurzen Zügen und als kleine Übersicht hier nun die Funktionsweise, verantwortlich ist die Funktion add_shortcode(). Näheres findet man in /wp-includes/shortcodes.php, inklusive einer „kleinen“ Dokumentation.

Das folgende Beispiel, in einem Plugin oder Theme hinterlegt, sorgt dafür, dass wenn der Syntax [tag1] im Content vergeben wird, dann erscheint im Frontend, auf das Blog also, der Text Some Longer Text.

// [tag1] --> Some Longer Text
function shortcode_example() {

	return 'Some Longer Text';
}

add_shortcode('tag1', 'shortcode_example');

Im Screenshot sollte das ganze dann deutlicher werden.

• Offizielle Dokumentation

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Tipp:

Dieser Artikel ist Teil einer kleinen Serie, die zeigen soll, dass WordPress an Flexibilität gewinnt und dass man Backend, Frontend und Login gestallten kann.

• Admin-Design
• Login-Design
• Tutorial: Theme erstellen
• Login Design anpassen #2
• Login-Seite anpassen #3

Auch in älteren Versionen von WordPress war die Beeinflussung des Login-Design möglich, via Plugin oder auch per Theme. Ebenso kann man per Hook das Login ansprechen und erweitern. Dazu der Verweis auf das Plugin WP-Disclaimer, welches beispielhaft die Möglichkeiten zeigt, von Ralf Hortt.

In diesem Artikel soll es aber auf den Einfluss des Login-Design gehen, ohne Plugin und in Abhängigkeit des verwendeten Themes. Außerdem gehe ich auf die aktuelle WordPress-Version 2.5 ein, da sich das Markup entscheidend geändert hat.

Damit soll der Versuch unternommen werden, dass WordPress Themes in Zukunft nicht nur das Frontend des Blog oder der Webseite entsprechend gestallten, sondern, dass ebenso Login- und Backend-Design an die jeweiligen Kunden angepasst werden.
Um das Backend anzupassen, hat WordPress ab Version 2.5 eine neue Möglichkeit geschaffen und diese habe ich einigen Schritten in einem vorhergehenden Artikel erläutert.

Login-Design ansprechen

Um das Design des Logins zu ändern, genügt es eine CSS-Datei mit den nötigen Stylesheets zu erstellen und an der entsprechenden Stelle, dem Login in WP, zu laden.

Dazu wird der folgenden Syntax in der functions.php des Themes hinterlegt. Sollte die Datei nicht vorhanden sein, einfach anlegen, im Theme speichern und um den Rest kümmert sich WordPress.

Die Funktion fb_custom_login() bringt den Link zum Stylesheet, den ich in diesem Beispiel im Ordern des Themes ablege, im Unterordner custom-login und die Datei heißt custom-login.css.
Der Hook login_head sorgt dafür, dass das Stylesheet auch nur im Login-Screen geladen wird und ansonsten keine unnötige Ladezeit verursacht.

// custom login for theme
// folder themes/theme_name/custom-login/
function fb_custom_login() {
	echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';
}

add_action('login_head', 'fb_custom_login');

Das Stylesheet

Nun muss aber das Design mittels CSS erstellt werden. Im Anschluss eine Beispieldatei, die alle nötigen IDs und class enthält. Damit sollte das Anpassen an die eigenen Bedürfnisse schnell möglich sein.

Ansonsten sollte die Add-ons Web Developer und Firebug für den Firefox-Browser jede erdenkliche Hilfe geben.

h1 a {
background: none;
color: #009900;
text-decoration: none;
text-align: center;
width: 99%;
height: 99%;
text-indent: 0;
}

.login {
border-top-width: 0;
}

#login {
width: 292px;
margin: 7em auto;
}

#loginform, #lostpasswordform  {
background-color: #fff;
color: #009900;
}

#loginform .input, #lostpasswordform .input {
}

#loginform #wp-submit, #lostpasswordform #wp-submit {
background-color: #fff !important;
color: #009900;
border: 1px solid #ebe9ed;
-moz-border-radius: 0;
-khtml-border-radius: 0;
-webkit-border-radius: 0;
}

#loginform #wp-submit:hover, #lostpasswordform #wp-submit:hover {
color: #910005;
border-color: #009900;
}

#user_login, #user_pass, #user_email {
font-size: 20px;
width: 97%;
padding: 3px;
margin-right: 6px;
border-width: 1px;
border-style: solid;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}

.forgotmenot {}

#rememberme {}

#nav {
margin: 0 0 0 8px;
padding: 16px;
}

#backtoblog {
text-align: center;
}

#backtoblog a {
position: relative;
text-decoration: none;
color: #777 !important;
}

#backtoblog a:hover {
position: relative;
text-decoration: none;
color: #009900 !important;
}

#login_error, .message {
margin: 0 0 16px 8px;
border-width: 1px solid #009900;
padding: 12px;
}

Anmerkung

Die vielen und kleinen Bereicherungen, die mir bei der Arbeit unterkommen, werden nach und nach in mein Basis-Theme übernommen und werden dort eine Readme erhalten. Derzeit arbeite ich aber an einer ganzen Reihe von Aufgaben, so dass es ein wenig stockt und die Nutzer mit der aktuellen Version auskommen müssen.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Die kommende Version 2.5 von WordPress hat den Gravatar-Dienst in den Core-Daten integriert. Einerseits nutzt man dies, um die Kommentarübersicht im Backend zu verschönern, andererseits kann man natürlich diese Funktion in das eigene Template integrieren und muss nicht Plugins nutzen oder andere Wege gehen.

Dazu genügt das Einfügen des folgenden Syntax und schon wird das kleine Bildchen ausgegeben.

<?php if(function_exists('get_avatar')) {
	echo get_avatar( $comment );
} ?>

Die Funktion get_avatar() (/wp-includes/pluggable.php) kann drei Parameter aufnehmen und so kann man recht gut Einfluss nehmen.

• $id_or_email Mailadresse oder ID des Users, Kommentators
• $size Größe des Gravatars in Pixel
• $default Standardbild, wenn kein Gravatar dem User zugeordnet werden kann

get_avatar( $id_or_email, $size = '96', $default = '' )

Als Standard-Gravatar wird http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536 geladen, dass ist das Icon für die Mail-Adresse unknown@gravatar.com (MD5 verschlüsselt: d516503a11cd5ca435acc9bb6523536). Die Größe beträgt im Standard 96 Pixel. Es muss also lediglich der erste Parameter bzw. die Variable übergeben werden.

Die Ausgabe sind dann wie folgt aus.

<img alt='' src='http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=96' class='avatar avatar-96 avatar-default' height='96' width='96' />

Somit kann mittels CSS auf das Design Einfluss genommen werden. Die Class avatar steht übergreifend bereit. Ebenso steht eine class mit der Größe des Gravatar bereit: avatar-GRÖßE. Vielfältige Formatierungen sind also möglich.

Wie einbauen?

Da immer wieder Nachfragen kommen, hier eine kurze Möglichkeit die Funktion einzubauen, für nicht PHPler.

Grundsätzlich muss der Code in die comments.php, die sorgt für die Ausgabe und das Formular der Kommentare. Natürlich kann das anders sein, bei dem einen oder anderen Theme, aber die Masse wird wohl so aussehen.

Die Funktion muss in die Ausgabe jedes einzelnen Kommentars, das bedeutet, dass sie in der Schleife <?php foreach ($comments as $comment) : > hinterlegt sein muss.
In der Regel nach dem li-Punkt, der die Ausgabe des einzelnen Kommentars ausgibt.

Suche:

  <ol class="commentlist">

    <?php foreach ($comments as $comment) : ?>

       <li &t;?php echo $oddcomment; ?&gt;id="comment-&alt;?php comment_ID() ?&gt;">

Ersetze:

  <ol class="commentlist"<

    <?php foreach ($comments as $comment) : ?>

      <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>"<
        <?php echo get_avatar( $comment, 32 ); ?>

Einige Thems kommen ohne eine Liste aus (ol oder ul); die Ausgabe wird dort via div erzeugt. Wichtig ist nur, es muss in der Schleife sein.

<?php foreach ($comments as $comment) : ?>
. . .
<?php endforeach; /* end for each comment */ ?>

Formatierung via CSS

Die Formatierung könnte dann wie folgt aussehen. Dieser Syntax gehört in die style.css des verwendeten Themes.

.commentlist li .avatar {
	float: right;
	border: 1px solid #eee;
	padding: 2px;
	background: #fff;
	}

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

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; ?>">

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Das Update auf die neue Version steht in den Startlöchern und der eine oder andere wird sich fragen, geht das denn mit meiner Installation problemlos?

Beim letzten Versionswechsel auf Version 2.3 gab es schon ein findiges und schnell installiertes Plugin zum Testen der Kompatibilität und dem Aufspüren von eventuellen Problemen - „WordPress Upgrade Preflight Check“. Eine Hinweise hatte ich dazu schon erwähnt, siehe „Komplikationsprüfung vor dem Update auf WordPress 2.3“

Der Entwickler arbeitet noch dran und wird die aktuelle Version in kürze vorlegen, also nicht so eilig und eventuell erst mal mit dem Plugin testen. Auch wenn das Plugin keine Garantie darstellt, so ist es mit Sicherheit eine Hilfe; ich wünsche mir, dass die WP-Community weiter so agil bleibt.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Tipp:

Dieser Artikel ist Teil einer kleinen Serie, die zeigen soll, dass WordPress an Flexibilität gewinnt und dass man Backend, Frontend und Login gestallten kann.

• Admin-Design
• Login-Design
• Tutorial: Theme erstellen

Die neue Version bringt viele Neuerungen und Veränderungen. Dazu zählt unter anderem das Design und die Strukturierung des Backends. Auf die Funktion des Farbwählers zum Profil geht Olaf in wenigen Sätzen ein und beschreibt im übrigen weitere Neuerungen der Version 2.5.
WordPress lagert die Farbwahl gleich ich eine Funktion aus und spendiert einen Hook, so dass man via Plugin oder functions.php im Theme einfach auf diese Farbwahl eingehen kann. Damit kann man das komplette Backend, nicht nur die Farben, in ein anderes Design tauschen, userabhängig und einfach per Klick.

Im folgenden zeige ich wie man das macht. Dazu stelle mal exemplarisch zwei Farbschemas zur Verfügung. Ein Farbschema habe ich der Seite von Gerrit van Aaken entnommen, der sich mit seiner klarem Design sehr gut dafür geeignet hat.

Diese Möglichkeit bietet sich vor allem dafür an, wenn das Backend dem Frontend in Farbwahl angepasst werden soll, was ich nicht für übertrieben halte. Gerade im Businessbereich kommt es kompletter und schick rüber, wenn das backend des CMS den Farben des Unternehmens angepasst ist. Aus welchem Grund auch immer man das Backend an die eigenen Bedürfnisse an passen will - es ist ein jedem Fall möglich und nun auch auf den einzelnen User konfigurierbar.

Die Funktion

Seit der Version 2.5 von WordPress gibt es nun also die Funktion wp_admin_css_color, zu finden in der wp-includes/general-template.php. Mit dieser Funktion kann man vier (4) Parameter übergeben, wobei der letztere ein Array ist.

wp_admin_css_color($key, $name, $url, $colors = array())

Die Parameter sind in ihren Namen schon recht aussagefähig, trotzdem nun nochmal die Erläuterung.

• $key = Schlüssel, ID
• $name = Name des Farbschemas, zur Darstellung im Admin
• $url = URL zum Stylesheet (.css)
• $colors = Farben, in einem Array übergeben

Mit diesem Wissen kann man dann die Funktion bestücken und die Werte übergeben. Im folgenden ein Beispiel.
Dabei wird die ID praegnanz, der Name Praegnanz.de vergeben. Die Funktion __() sorgt dafür, dass der Name der Mehrsprachigkeit zugeordnet werden kann und gegebenenfalls übersetzt werden kann.
Im weiteren kommt die Adresse zum Stylesheet praegnanz.css, wobei ich den Pfad mittels einer Variable übergebe, die sich aus Optionen und Konstanten von WordPress ergibt.
Danach kommt ein Array mit vier Farbwerten, welches das Design darstellen soll und so leichter zuordnen lässt. Dabei kann man hier natürlich mehr als vier Werte übergeben und alle bekannten Syntax von CSS nutzen. Im Download-Beispiel habe ich dazu mehr hinterlegt.

$css_url = get_option( 'siteurl' ) . '/' . PLUGINDIR . '/' . plugin_basename( dirname(__FILE__) );

wp_admin_css_color (
	'praegnanz', __('Praegnanz.de'), $css_url . '/praegnanz.css',
	array (
		'#000', // color 1
		'#fff', // color 2
		'#009900', // color 3
		'#ccc' // color 4
	)
);

Ein Beispiel als Plugin

Im folgendem soll in einem Beispiel die Funktionalität zum Nachahmen einladen. Das Plugin steht zum Download bereit und kann gern genutzt werden. Die Stylesheets sind nur rudimentär bestückt und es ist Vorsicht geboten, es könnte in den Augen schmerzen.

Das Plugin ist einfach und übersichtlich, sollte also keine großen Schwierigkeiten darstellen. Ich habe exemplarisch zwei Designs hinterlegt und verschieden Möglichkeiten integriert.
Die jeweiligen Stylesheets, die das eigentliche Design laden, sind im Plugin-Verzeichnis hinterlegt, wobei der Pfad in der Variable $css_url übergeben wird. Diese kann natürlich ebenso im Theme liegen und somit ist es recht einfach das Design des Backends an das Frontend anzulehnen.

Alternativ kann man natürlich das komplette Design umgestallten und als Vorlage die bestehenden beiden Design nutzen.

1. wp-admin/css/colors-classic.css
2. wp-admin/css/colors-fresh.css

Das Classis-Farbschema lade ich im übrigen in den jeweiligen Stylesheets, da ich nur wenige Veränderungen vornehme.

@import url(../../../wp-admin/css/colors-classic.css);

Nun aber der Syntax des Plugins. Nach der Aktivierung des Plugin stehen die beiden neuen Farbschemen im User-Edit-Bereich zur Verfügung.

Mit aktivem Style „Praegnanz.de“ sieht es dann wie im obigen Screenshot aus.

<?php
/*
Plugin Name: Custom Admin Design
Plugin URI: http://bueltge.de/
Description: Test: Admin Design at WP 2.5
Author: Frank Bueltge
Version: 0.1
Author URI: http://bueltge.de/
*/

function fb_custom_admin_design() {

	// url to stylesheet
	$css_url = get_option( 'siteurl' ) . '/' . PLUGINDIR . '/' . plugin_basename( dirname(__FILE__) );

	// Example Design for test
	wp_admin_css_color (
		'custom', __('Custom Test'), $css_url . '/custom_test.css',
		array (
			'#0d324f',
			'#e5f3ff',
			'#910005',
			'#fff; border-color: #333; background: #fff url(' . $css_url . '/fb.jpg) 1px 1px no-repeat',
			'#333'
		)
	);

	// Example Design for Praegnanz.de
	wp_admin_css_color (
		'praegnanz', __('Praegnanz.de'), $css_url . '/praegnanz.css',
		array (
			'#000',
			'#fff',
			'#009900',
			'#ccc'
		)
	);

}

// WP-Hook for activation the style in user-edit
add_action('admin_init', 'fb_custom_admin_design');
?>

Ähnlich kann das ganze aussehen, wenn man es in die functions.php des Themes hinterlegt und so ohne ein Plugin auskommt, welches in der Plugin-Liste auftaucht. Wie auch immer, dass überlasse ich euch und eurer Phantasie. Viel Spaß beim Rundumpaket, wenn es um das Designen von WordPress-Themes geht.

Somit steht ab WordPress Version 2.5 dem kundenorientiertem Design nichts mehr im Wege. Die Anpassung von Frontend, Backend und Login-Bereich sind möglich. Der Login-Bereich konnte auch schon in älteren Versionen angesprochen werden; allerdings hat sich in diesem Punkt einiges geändert. Daher werde ich eventuell in einem der nächsten Artikel darauf eingehen, so dass dann alle drei Themen kurz erläutert werden und das Designpaket rundum perfekt werden kann.

Download:

Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.

Download als zip-Datei: custom_admin_design.zip - 2 kByte

Update

Das erste Plugin mit dieser Funktion ist da und gibt dem Backend die gewohnte Farbgebung: JP Admin - Stylish Blue.

Erstelle und Tausche dein Design

Das Zusammenstellen der Farben und den passenden Download kann mit dem AdminThemes erstellen. Sehr einfach in der Bedienung und viele Vorschläge stehen zum Download bereit. Eine Vorschau macht die Arbeit und Kreation zum Kinderspiel.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Hier ein kleiner Workaround, wie man den Editor-Bereich anspricht und im Stile des Design bleibt.

Der Filter ist gleich geblieben und somit bleibt der Aufruf der gleiche. Ab Version 2.5 ist dann lediglich das Auf/Zuklappen von Bereichen nicht mehr möglich, wenn man das Plugin nicht entsprechend ändert.

add_filter('dbx_post_advanced', 'example_function');

Alternativ kann man auch den Sidebar-Bereich ansprechen. Ab WordPress Version 2.5 ist der Sidebar-Bereich unterhalb des Advanced-Bereichs. Ich spreche ihn an, damit die zusätzlichen Bereiche im Anschluss an die Standard-Bereiche anknüpfen.

add_filter('dbx_post_sidebar', 'tc_post_admin_footer');

Für weitere Ansprechbereiche stehen die Hooks edit_form_advanced und submitpost_box zur Verfügung.
Dabei reiht sich edit_form_advanced direkt unter den Editor-Bereich, oberhalb der Advanced Options.
Der Hook submitpost_box bringt die neue Funktionalität in den Sidebar, direkt in den Save-Puplish-Bereich.

Nun war die Struktur des abgebildeten Bereiches immer folgender, ein komplexes Markup, welches in der Vergangenheit nicht immer auf Zustimmung gestoßen ist.
In den Bildern zeigt sich die Anpassung am Beispiel des Plugins Text Control, auf dass ich nie verzichten kann und das der Autor leider schon seit Version 2.1 von WordPress nicht mehr pflegt. Ich erstelle es mir seit dem selber. Eine Anfrage beim Autor hat leider kein Antwort erzielt.

<div class="dbx-b-ox-wrapper">
	<fieldset id="example-id" class="dbx-box">
	<div class="dbx-h-andle-wrapper">
		<h3 class="dbx-handle">&lt;?php _e('Example Name', 'plugin_language-name') ?&gt;</h3>
	</div>
		<div class="dbx-c-ontent-wrapper">
			<div id="postcustomstuff" class="dbx-content">

				<p>! Hier Inhalt ablegen</p>

			</div>
		</div>
	</fieldset>
</div>

Ab Version 2.5 von WP sieht die wie folgt aus. Es hat eine Verschlankung statt gefunden und ebenso kann WordPress auch bei zusätzlichen Bereichen den Status speichern; hat der User den Bereich geöffnet oder geschlossen, was die Arbeitsweise doch erheblich erleichtern kann. Dies passiert durch die Übergabe der jeweiligen Klasse. Auch das übernimmt WP und lediglich der PHP-Code bei class genügt: <?php echo postbox_classes('pagepassworddiv', 'post'); ?>.

<div id="example-div" class="postbox &lt;?php echo postbox_classes('pagepassworddiv', 'post'); ?&gt;">
	<h3>&lt;?php _e('Example Name', 'plugin_language-name'); ?&gt;</h3>
	<div class="inside">

		<p>! Hier Inhalt ablegen</p>

	</div>
</div>

Hook add_meta_box

Ganz neu in WordPress 2.5 ist der Hook add_meta_box. Damit wird die Erzeugung von zusätzlichen Boxen vereinfacht. Die obigen HTML-Elemente können entfallen und lediglich die Werte müssen übergeben werden.

function add_a_box() {

    add_meta_box(
        'example-div', // id des <div>
        'Example Name', // title
        'inside_the_box', // callback function die den Inhalt uebergibt
        'post' // wofuer ist die box: fuer "post", "page", oder "link" seite
    );
}

function inside_the_box() {
	echo "<p>! Hier Inhalt ablegen</p>";
}

// Aktivierung der Box, wenn im Backend
if ( is_admin() ) {
	add_action('admin_menu', 'add_a_box');
}

Unterscheide > WordPress 2.5

Mit einer einfachen Abfrage der Funktion ist die Trennug in unterschiedliche Design einfach möglich.

if ( function_exists('add_meta_box') ) {
	// > WP 2.5 style
} else {
	// < WP 2.3
}

Meta Boxen deaktivieren

Ab Version 2.6 von WordPress ist auch dies möglich. Dazu gibt es die Funktion remove_meta_box() und ist zu finden in /wp-includes/template.php.
Parameter sind $id, $page, $context.

• $id String for use in the 'id' attribute of tags.
• $page The type of edit page on which to show the box (post, page, link)
• $context The context within the page where the boxes should show ('normal', 'advanced')

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren