Das WordPress-Backend ab Version 3.8 verbessern

Wordpress-LogoMit Einführung der Version 3.8 haben die Entwickler das Admin-Backend des beliebten CMS WordPress grundsätzlich überarbeitet. Während sie von „moderner“ und „stylisher“ reden, stellt man umgehend fest, dass hauptsächlich Platz verschwendet wird. Was der Gelegenheitsnutzer vermutlich nicht für sonderlich maßgeblich hält, führt bei jemandem, der ständig WordPress-Seiten nutzt, zu deutlichen Störungen beim Workflow, weil man insbesondere auf kleinen Bildschirmen mehr scrollen muss. Nicht jeder arbeitet mit Retina-Displays. Wer den alten Look zurück haben möchte, oder zumindest etwas, das dem ähnelt, dem kann geholfen werden.

Schritt eins: In den Benutzeroptionen das Farbschema auf „hell“ stellen, damit sind die für mich störenden Kontraste zwischen Menü und Inhalt schon mal weg.

Schritt zwei: Installation des Plugins „Admin Classic Borders“. Damit kann man nicht nur wie der Name suggeriert dem Adminmenü wieder Trennlinien verpassen, sondern auch relativ einfach Einfluss auf die CSS-Stile nehmen. Die Einstellungen sind weitestgehend selbsterklärend und da diese zudem auch sofort in der Seitenleiste zu sehen sind, kann man experimentieren.

Schritt drei: besonders interessant ist die Option, eigene CSS-Formate fürs Backend vergeben zu können. Das könnte man auch in einem separaten Stylesheet tun, mit Hilfe dieses Plugins ist das allerdings deutlich einfacher zu pflegen. Meine CSS-Definitionen folgen, ich habe sowohl die Menüschriften- und Abstände verringert, als auch die Schriftgrößen der Inhalte des Backends. ich gehe nicht davon aus, dass meine Styles jeden glücklich machen, aber sie stellen eine Basis zum Experimentieren dar.

Ich jedenfalls bin jetzt mit dem WordPress-Backend wieder glücklich. Bis zur nächsten überflüssigen Designänderung durch die Entwickler.

acb
acb2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
#adminmenu a.menu-top, #adminmenu .wp-submenu-head {
    font-size: 13px;
    line-height: 13px;
}
#adminmenu li.menu-top {
    min-height: 28px;
}
#adminmenu .wp-has-current-submenu ul > li > a, .folded #adminmenu li.menu-top .wp-submenu > li > a {
    padding: 3px 12px;
}
#adminmenu .wp-submenu a {
  line-heigt:0.9em;
  font-size: 13px;
}
#adminmenu .wp-not-current-submenu li > a, .folded #adminmenu .wp-has-current-submenu li > a {
  padding-top: 2px;
}
ul.categorychecklist li {
    line-height: 16px;
}
textarea, input, select {
    font-size: 13px;
    line-height: 1.2em;
}
.form-table, .form-table td, .form-table th, .form-table td p, .form-wrap label {
    font-size: 13px;
}
.widefat td, .widefat td p, .widefat td ol, .widefat td ul {
    font-size: 12px;
    line-height: 1.2em;
}
h2 .nav-tab {
    padding: 5px 8px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}
.wrap h2 {
    font-size: 20px;
    line-height: 22px;
}
td.plugin-title strong {
  font-size: 12px !important;
}

Logo WordPress Copyright Automattic

Keinen verwandten Inhalt gefunden.

Ihnen hat dieser Artikel gefallen oder geholfen? Prima! Dann denken Sie doch an mich, wenn Sie eine Webseite benötigen!

Dieser Eintrag wurde veröffentlicht in CSS, Wordpress und getagged , , , , , , , . Bookmarken: Permanent-Link. Kommentieren oder ein Trackback hinterlassen: Trackback-URL.

Ihr Kommentar

Ihre E-Mail wird niemals veröffentlicht oder verteilt. Benötigte Felder sind mit * markiert

*
*

Du kannst diese HTML Tags und Attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Time limit is exhausted. Please reload CAPTCHA.