Bei der Erstellung von WordPress Plugins haben Developer unheimlich viele Möglichkeiten ihre Funktionen mittels Actions und Filtern an WordPress zu übergeben. Doch „das Auge isst mit“ und so lassen sich mit ein paar einfachen Handgriffen und etwas CSS das Erscheinungsbild von Plugins extrem verbessen, uns von unseren „Mitbewerbern“ unterscheiden und beim Benutzer ein Aha-Erlebnis kreieren.

Bei der Erstellung von Obenland Guestbook war es neben der Funktionalität auch mein Bestreben, es gut aussehen zu lassen und dem Benutzer das vertraute Gefühl seines Adminbereichts zu geben. Wenn man also bei Obenland Guestbook die Optionen oder Einträge verwaltet, kann man auf die selben Funktionalitäten an den selben Stellen im selben Design zurückgreifen, wie man sie auch aus der Kommentarfunktion gewohnt ist. Als Teil dessen wollte ich auch, anders als wohl die meisten anderen Plugin-Developer, dass sich das Menu Icon meines Plugins so verhält, wie der Rest der Menupunkte im Adminbereich.

Farbwechsel bei Menu Page Icon

Eine Möglichkeit sein Plugin von anderen zu differenzieren ist, schon bevor man in das Menu klickt, das gewohnte Look-an-Feel der Standard Menu Pages zu generieren. Dazu benötigen wir erstmal das gleiche Icon in schwarz-weiß (inactive) und bunt (hover, active). Als nächstes schauen wir in den Quellcode eines Menupunktes und sehen folgendes (Kommentare zum besseren Verständniss hinzugefügt):

<!-- // Beginn des Menu-Punktes -->
<li id="toplevel_page_obenland_guestbook-obenland_guestbook" class="wp-has-submenu menu-top toplevel_page_obenland_guestbook/obenland_guestbook menu-top-last">
    <!-- // Das Div, um welches es geht: -->
    <div class="wp-menu-image">
        <a href="admin.php?page=obenland_guestbook/obenland_guestbook.php"><img src=" " alt="" /></a>
    </div>
    <!-- // Der Pfeil rechts, mit dem man den Menu Punkt aufklappen kann -->
    <div class="wp-menu-toggle">
        <br />
    </div>
    <!-- // Der eigentliche Link zum Menu -->
    <a class="wp-has-submenu menu-top toplevel_page_obenland_guestbook/obenland_guestbook menu-top-last" tabindex="1" href="admin.php?page=obenland_guestbook/obenland_guestbook.php">Gästebuch
        <span id="awaiting-mod" class="count-0">
            <span class="pending-count">0</span>
        </span>
    </a>
    <!-- // Die Untermenu-Punkte, die augeklappt werden können -->
    <div class="wp-submenu">
        <div class="wp-submenu-head">Gästebuch
            <span id="awaiting-mod" class="count-0">
                <span class="pending-count">0</span>
            </span>
        </div>
        <ul>
<li class="wp-first-item">
                <a class="wp-first-item" tabindex="1" href="admin.php?page=obenland_guestbook/obenland_guestbook.php">Gästebuch
                    <span id="awaiting-mod" class="count-0">
                        <span class="pending-count">0</span>
                    </span>
                </a>
            </li>
<li>
                <a tabindex="1" href="admin.php?page=obenland_guestbook_options">Optionen</a>
            </li>
        </ul>
    </div>
</li>

Das Div mit der CSS-Klasse „wp-menu-image“ enthält einen Anchor, der zum Menu führt, sowie ein Img-Tag, das bei Plugins automatisch von WordPress eingefügt wird, und die URL enthält, die im Plugin mit add_menu_page() übergeben wird. Hierbei ist es wichtig, dass etwas übergeben wird (z.B. ein  ), ansonsten setzt WordPress das Default-Icon ein.

Nun sehen wir uns an, wie WordPress seine Icons einfügt. Dazu gehen wir in die colors-fresh.css irgendwo in die Gegend von Zeile 1150 und finden:

#adminmenu #menu-plugins div.wp-menu-image {
    background: transparent url("../images/menu.png") no-repeat scroll -181px -33px;
}

#adminmenu #menu-plugins:hover div.wp-menu-image,
#adminmenu #menu-plugins.wp-has-current-submenu div.wp-menu-image {
    background: transparent url("../images/menu.png") no-repeat scroll -181px -1px;
}

Und genau so machen wir es auch. Alles was jetzt noch von Nöten ist, ist die CSS-Id, mit der WordPress unser Plugin ausstattet. Diese wird aus „toplevel_page_“ + Name der Plugin-Datei zusammengesetzt.
So sieht das Ganze bei mir aus:

#toplevel_page_obenland_guestbook-obenland_guestbook div.wp-menu-image {
    background: transparent url(menu_icon.ico) no-repeat scroll center;
}

#toplevel_page_obenland_guestbook-obenland_guestbook:hover div.wp-menu-image,
#toplevel_page_obenland_guestbook-obenland_guestbook.wp-has-current-submenu div.wp-menu-image {
    background: transparent url(menu_icon_hover.ico) no-repeat scroll center;
}

Der Anhang „scroll center“ ist wichtig, da das Icon sonst oben links in der Ecke des Divs verschwindet.
Zuletzt haken wir die CSS in den Admin Head ein:

add_action( 'admin_head', 'obenland_guestbook_admin_css' );

/**
 * Echoes the Admin CSS
 */
function obenland_guestbook_admin_css() {
    echo '<link id="obenland_guestbook-admin-css" rel="stylesheet" href="'.get_settings('siteurl').'/wp-content/plugins/obenland_guestbook/admin/admin_guestbook.css" type="text/css" media="screen" />';
}

Et voilà!
Es erscheint unser schwarz-weißes Icon im Normalzustand und sobald man mit der Maus über den Menüpunkt fährt, oder das Menu oder ein Submenü aktiv ist, erscheint das bunte Icon. Und alles was dazu nötig war, waren ein paar Zeilen CSS und ein action-hook.