WordPress Backend individualisieren mit eigener CSS-Datei – mittels WordPress Plugin

Es gibt verschiedene Gründe warum man das eigentlich ganz gelungene Backend von WordPress gerne anpassen möchte. Zwei sehr einfache Gründe wären zum Beispiel, dass sich das Backend der CI des Endkunden oder der Agentur anpassen soll oder man schlicht und ergreifend aus eigenem anregen das Backend anpassen möchte.

Bei dem umfang an Plugins die es für WordPress gibt sind natürlich auch einige dabei mit denen man das Backend anpassen kann, doch hier gibt es dann doch des öfteren Probleme: Entweder lassen sich bestimmte Dinge einfach nicht über das Plugin anpassen oder das Plugin bietet zu viele Einstellungsmöglichkeiten ganz nach dem Motto mit Kanonen auf Spatzen…

Nun könnte man natürlich einfach die CSS Dateien des Backend Themes anpassen um die gewünschten Änderungen zu bewerkstelligen, aber auch das ist nicht die beste Lösung. Denn hier besteht immer die Gefahr das bei einem Update die CSS-Datei überschrieben wird.

Die beste Variante ist meiner Meinung nach also eine eigene CSS Datei ins Backend einzubauen, dass funktioniert relativ einfach mit einem eigenen kleinen Plugin:

WordPress Plugin erstellen – das Grundgerüst

Das Grundgerüst eines WordPress Plugins ist mehr als einfach:

• öffnet euren Plugins Ordner (zu finden in /wp-content/plugins/)
• erstellt einen neuen Ordner mit dem Namen „test-plugin“ (der Name kann logischerweise angepasst werden)
• in dem Ordner test-plugin erstellt ihr nun eine PHP-Datei die den selben Namen wie der Ordner trägt, also test-plugin.php

In die Datei test-plugin.php wird nun folgender Code kopiert:

<?php
/*
Plugin Name: Individuelles Backend
Plugin URI: https://www.webdesign-podcast.de
Description: Plugin zur Individualisierung des WordPress Backends
Version: 1.0.0
Author: Pascal Bajorat
Author URI: https://www.pascal-bajorat.com/
Min WP Version: 2.0
Max WP Version: 4.0.0
*/
 
add_action('admin_head', 'testplugin_admin_head',999);
 
function testplugin_admin_head(){
	echo '<link rel="stylesheet" type="text/css" href="'.plugins_url('test-plugin.css', __FILE__).'" />'."\n\r";
}
?>

Du möchtest noch mehr über WordPress erfahren und lernen? Dann schau dir doch einmal mein achtstündiges WordPress-Video-Training an. Es behandelt die verschiedensten Themen rund um WordPress praxisnah und gut verständlich, wie z.B. Theme-Erstellung, MultiSite / Blognetzwerk, eigene Plugins, Custom-Post-Types, Suchmaschinenoptimierung und vieles mehr: WordPress-Video-Training von Pascal Bajorat

Die Funktion „add_action“ führt nun die Funktion „testplugin_admin_head“ aus, und zwar im Bereich der head Tags (allerdings nur im Backend, daher auch admin_head), die 999 gibt an das diese Funktion als letzte ausgeführt werden soll.

In der eigentlichen Funktion testplugin_admin_head geben wir einfach den link Tag aus der unsere CSS Datei test-plugin.css im Ordner wp-content/plugins/test-plugin/ einbindet.

Nun müsst ihr nur noch eine CSS Datei mit dem Namen test-plugin.css in eurem Plugin Ordner erstellen und das Plugin über das WordPress Backend aktivieren, fertig.
Falls ihr Bilder tauscht empfiehlt es sich diese ebenfalls in eurem Plugin Ordner zu speichern, so könnt ihr das Plugin auf jede WordPress Installation portieren.

Viel Spaß damit.