web-dev-qa-db-de.com

Symbole im Dashboard ersetzen

Kann ich die Symbole im WordPress-Dashboard durch benutzerdefinierte ersetzen? Ich stelle mir vor, dass es eine Möglichkeit geben muss, dies mit dem functions.php oder im Idealfall mit einem benutzerdefinierten Plug-in zu tun, aber ich habe keine Ahnung, wie man so etwas macht, und Google hat mich gescheitert. Insbesondere möchte ich das Yoast SEO-Symbol durch ein graues Symbol ersetzen, das besser zum WordPress-Thema passt:

5
JacobTheDev

Ja, Sie können vorhandene Symbole ersetzen, indem Sie sie über CSS überschreiben.

Überprüfen Sie, ob das vorhandene Symbol über img oder background-image festgelegt wurde, und fügen Sie CSS hinzu, um es mit einem der verfügbaren Symbole zu überschreiben. Sie finden alle verfügbaren Symbole und den entsprechenden Selektor auf der Dashicons-Website .

Um das Icon des Yoast SEO Plugins zu ersetzen, können Sie dieses Snippet zu Ihrem functions.php hinzufügen:

<?php
add_action( 'admin_head', 'replace_yoast_admin_menu_icon' );
function replace_yoast_admin_menu_icon() {
?>

<style type="text/css">
#adminmenu #toplevel_page_wpseo_dashboard div.wp-menu-image img {
  display: none;
}
#adminmenu #toplevel_page_wpseo_dashboard div.wp-menu-image:before {
  content: '\f108';
}
</style>

<?php } ?>

Weiterführende Literatur: Es gibt auch ein ausführliches Tutorial von Shea Bunge über Ersetzen von WordPress Admin Menu Icons .

UPDATE: In Zukunft wird es ein weißes Symbol geben :)

UPDATE 2: Implementiert mit v1.6.1

5
Sven

Dashicons zur Rettung! Dashicons sind die Symbolschriftarten, die standardmäßig in WordPress 3.8+ enthalten sind und alle Kernmenüsymbole enthalten.

Beginnen Sie mit der Registrierung eines benutzerdefinierten Stylesheets für die admin-spezifischen Styles Ihres Themas in functions.php.

// Admin styles
function wpse134414_admin_styles() { 
    wp_enqueue_style( 'wpse134414_admin_styles_custom_admin_styles', get_template_directory_uri() . '/css/wpse134414_admin_styles.css' , false, '1.0' );
}
add_action( 'admin_enqueue_scripts', 'wpse134414_admin_styles_admin_styles' );

(Eigentlich bevorzuge ich es, dies in einem benutzerdefinierten mu-plugin zu tun, der ein etwas anderes Snippet erfordert, aber ich werde für diese Antwort einen Themenadministratorstil verwenden.)

Erstellen Sie das Stylesheet, das sich in diesem Beispiel im Ordner /css/ des aktiven Themas befindet, und verwenden Sie eine Regel wie diese, um das Symbol mit dem richtigen Inhaltswert auszuwählen, um das Symbol Ihrer Wahl zu erhalten.

/* Better Yoast SEO Admin Icon */
/* hide the default icon */
#toplevel_page_wpseo_dashboard .wp-menu-image img {
    display: none;
}
/* add the new dashicon */
#adminmenu #toplevel_page_wpseo_dashboard div.wp-menu-image:before {
    content: "\f107";

/* style the icon with CSS to make it re-yoasty */
    color: #ef8e02;
    opacity: 0.7;
}
#adminmenu #toplevel_page_wpseo_dashboard a:hover div.wp-menu-image:before {
    opacity: 1;
}

Dieses Symbol ist das Schraubenschlüsselsymbol von Dashicons, das tatsächlich wie das negative Leerzeichen im Standardsymbol aussieht.

Während die Farbe und der Schwebezustand wahrscheinlich übertrieben sind und dem Grund, aus dem Sie das Symbol ersetzen möchten, tatsächlich widersprechen, füge ich sie nur hinzu, um darauf hinzuweisen, dass Sie CSS verwenden können, um diese Symbole so zu gestalten, wie Sie möchten.

3
mrwweb