Plugin-Logos im WordPress-Backend durch Dashicons austauschen

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 7 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet ...

Ich mag es nicht, wenn Plugins sich einen Hauptmenüpunkt im WordPress-Backend nehmen. Häufig ist es einfach nicht notwendig. Aber wenn sie es tun, dann bitte mit einem Dashicon und nicht mit einem individuellen Logo als Bild. Warum? Weil die Logo meist nicht in allen Farbschemas funktionieren. Also was tun? Da hilft nur Notwehr und eine eigene CSS-Datei.

Die Idee ist nicht neu: Simon hat für wpSEO das Ganze mal gebaut und Caspar hat es zu einem Plugin gemacht. Ich habe mir einfach die Idee geschnappt und sie um ein paar mehr Plugins erweitert.

Aktuell werden folgende Plugins verändert:

  • AddThis
  • Envira Gallery
  • Soundcloud is gold
  • Wordfence
  • Newsletter
  • All in one SEO
  • Post Types Order
  • Contact Form DB
  • Timeline Express

Das Prinzip ist meist dasselbe. Meist wird mit der ersten CSS-Zeile das Logo-Bild ausgeblendet (per display:none;, seltener ist es ein Hintergrundbild, dann per background: none;). Mit der zweiten Zeile wird ein möglichst passendes Dashicon ausgewählt. Ein Sonderfall ist Post Types Order, welches sich korrekt in den Einstellungen wiederfindet, allerdings ein Logo vorne an den Menüpunkt hängt, was sonst kein anderer Menüpunkt dort macht, also auch weg damit.


/* AddThis */

#adminmenu #toplevel_page_addthis_registration div.wp-menu-image img {
	display: none;
}
#adminmenu #toplevel_page_addthis_registration div.wp-menu-image::before {
	content: "\f132"; /* Plus */
}


/* Envira Gallery */

#adminmenu #menu-posts-envira div.wp-menu-image img {
	display: none;
}
#adminmenu #menu-posts-envira div.wp-menu-image::before {
	content: "\f161"; /* Gallery */
}


/* Soundcloud is gold */

#adminmenu #toplevel_page_soundcloud-is-gold-soundcloud-is-gold div.wp-menu-image img {
	display: none;
}
#adminmenu #toplevel_page_soundcloud-is-gold-soundcloud-is-gold div.wp-menu-image::before {
	content: "\f500"; /* Media Audio (127 or 492) */
}


/* Wordfence */

#adminmenu #toplevel_page_Wordfence div.wp-menu-image img {
	display: none;
}
#adminmenu #toplevel_page_Wordfence div.wp-menu-image::before {
	content: "\f332"; /* Shield */
}


/* Newsletter */

#adminmenu #toplevel_page_newsletter_main_index div.wp-menu-image img {
	display: none;
}
#adminmenu #toplevel_page_newsletter_main_index div.wp-menu-image::before {
	content: "\f465"; /* Mail */
}


/* All in one SEO */

#adminmenu #toplevel_page_all-in-one-seo-pack-aioseop_class .wp-menu-image {
	background: none;
}
#adminmenu #toplevel_page_all-in-one-seo-pack-aioseop_class div.wp-menu-image::before {
	content: "\f238"; /* (239 or 184, 185) */
}


/* Post Types Order */

.menu_pto {
    display: none;
}


/* Contact Form DB */

#adminmenu #toplevel_page_CF7DBPluginSubmissions .wp-menu-image {
	background: none;
}
#adminmenu #toplevel_page_CF7DBPluginSubmissions div.wp-menu-image::before {
	content: "\f468"; /* SOS */
}


/* Timeline Express */

#adminmenu #menu-posts-te_announcements .wp-menu-image img {
	display: none;
}
#adminmenu #menu-posts-te_announcements div.wp-menu-image::before {
	content: "\f133"; /* Add page */
}

Das fertige Plugin gibt es bei Github.

Du möchtest noch mehr Plugins aufnehmen lassen? Dann freue ich mich über einen Issue bei Github (gerne auch mit folgendem Pull Request). Wer mit Github nichts anfangen kann, der kann seine Wünsche auch gerne hier in den Kommentaren lassen, am besten mit einem Dashicon-Vorschlag. Danke!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert