WordPress-Plugin: Backend Style Enhancements

23.04.2010 in: CSS, PHP, Webdesign und WordPress
Letzte Änderung: 05.06.2010, 18:33 Uhr.

Zwar läßt sich das WordPress-Backend ganz gut per Userstylesheet über den Selektor body.wp-admin ansprechen – doch technisch unbedarften Leuten hilft das eher wenig. Für eine Freundin, die ebenso wie ich eine Navigation lieber rechts oder oben sieht, habe ich deshalb mal fix ein kleines Plugin erstellt.

Es ist ganz einfach, spricht aber ein paar Dinge an, die ich im Framebreaker-Tutorial nicht berührt habe. So mag es sich vielleicht als Lehrstück eignen. Ich verkneife mir heute einen langen Text; stattdessen habe ich alles ausführlich kommentiert und verlinkt.

Das Stylesheet selbst setzt die Navigation nach rechts, gibt Links bei :hover einen Unterstrich und entsorgt Lucida Grande und Verdana, die ich beide nicht mehr sehen mag. Außerdem repariert es ein paar Breitenangaben – die Entwickler konnten sich wohl nicht vorstellen, daß jemand 14px als Mindestschriftgröße setzt. Das muß man leider als Massenpsychose diagnostizieren.

Im Ganzen sei es bitte nur als Beispiel dafür gesehen, was man ändern kann.

<?php
/*
Plugin Name: Backend Style Enhancements
Plugin URI:  http://toscho.de/p1660
Description: Some minor fixes for the WP backend.
Version:     1.0
Author:      Thomas Scholz
Author URI:  http://toscho.de
Created:     22.04.2010
*/
/**
 * We need just the constructor.
 */
new Toscho_Backend_Style;
/**
 * Adds a stylesheet to the WordPress backend.
 *
 * @version 1.0
 */
class Toscho_Backend_Style
{
    /**
     * The address for our stylesheet.
     * Should match [0-9a-z-].
     *
     * @see #add_query_arg()
     * @see #print_link_element()
     * @var string
     */
    protected $query_arg = 'tbecss';
    /**
     * Constructor
     */
    public function __construct()
    {
        /* Register the query argument. */
        add_filter('query_vars', array ( $this, 'add_query_arg') );
        /* What should happen, if we find the query? */
        add_action('template_redirect', array ( $this, 'print_css') );
        /* Like wp_head, just for the backend. */
        add_action('admin_head', array ( $this, 'print_link_element') );
        /* Since this plugin isn’t listed on
         * http://wordpress.org/extend/plugins/
         * we won’t waste the user’s time.
         */
        add_filter('http_request_args',
            array ( $this, 'prevent_plugin_upgrade_check' ), 5, 2);
        return;
    }
    /**
     * Registers the query arg in WordPress
     *
     * @param  array $vars Already registered query args.
     * @return array
     */
    public function add_query_arg( array $vars )
    {
        return array_merge( $vars, array ( $this->query_arg ) );
    }
    /**
     * Prints the CSS content.
     *
     * @return void
     */
    public function print_css()
    {
        if ( ! isset ( $_GET[$this->query_arg] ) )
        {
            return;
        }
        // Don’t waste time in wp-includes/template-loader.php
        define('WP_USE_THEMES', FALSE);
        header('Content-Type: text/css;charset=utf-8', TRUE);
?>@charset "utf-8";
.wrap a:hover
{
    text-decoration:    underline       !important;
}
.wrap a.button:hover
{
    text-decoration:    none            !important;
}
body,
td,
input,
select,
#adminmenu *
{
    font-family:        Calibri         !important;
}
textarea, [type="text"]
{
    font-family:        Consolas        !important;
}
body,
#wpbody,
.form-table .pre
{
    color:              #000            !important;
}
td
{
    vertical-align:     top             !important;
    line-height:        1.4             !important;
}
#adminmenu
{
    float:              right           !important;
    margin:             5px -150px 0 0 !important;
}
#adminmenu .wp-submenu li
{
    width:              151px           !important;
}
#wpbody-content
{
    float:              right           !important;
    width:              100%;
}
#wpbody
{
    margin-left:        0               !important;
    margin-right:       170px           !important;
}
<?php
        /* Ugly, yes. But if we just return, WP will
         * proceed and append the default page. */
        exit;
    }
    /**
     * Prints the link element into the admin head.
     *
     * @return void
     */
    public function print_link_element()
    {
        $url = get_option('siteurl') . '/?' . $this->query_arg;
        print "<link rel='stylesheet' href='$url' />";
        return;
    }
    /**
     * Blocks update checks for this plugin.
     *
     * @author Mark Jaquith http://markjaquith.wordpress.com
     * @see    http://wp.me/p56-65
     * @param  array $r Request information
     * @param  string $url
     * @return array
     */
    public function prevent_plugin_upgrade_check($r, $url)
    {
        if ( 0 !== strpos($url, 
             'http://api.wordpress.org/plugins/update-check') )
        { // Not a plugin update request. Bail immediately.
            return $r;
        }
        $plugins = unserialize( $r['body']['plugins'] );
        $p_base  = plugin_basename( __FILE__ );
        unset (
            $plugins->plugins[$p_base],
            $plugins->active[array_search($p_base, $plugins->active)]
        );
        $r['body']['plugins'] = serialize($plugins);
        return $r;
    }
}

Als Lohn für das geduldige Lesen schnelle Herunterscrollen:

Download Plugin Backend Style Enhancements

Meine Kommentare ersetzen natürlich nicht eure Fragen. Also stellt sie bitte!