Benutzerdefinierte svg-admin-Menü-Symbol in WordPress

Ich bin wirklich zählen auf Ihre Hilfe in dieser. Ich suchte eine Menge und keine Lösung gefunden. Ich möchte ein benutzerdefiniertes Symbol für mein plugin im admin-Menü, und ich möchte es zu integrieren, die gut mit dem Farbschema.

Sah ich hier https://codex.wordpress.org/Function_Reference/add_menu_page
Unter $icon_url

(WP 3.8+), Wenn 'data:image/svg+xml;base64,...", die angegebene SVG-Daten
image ist verwendet als CSS-hintergrund -

Jedoch, wenn ich eine URL in ein SVG-Symbol gibt, alles was ich bekomme ist ein img mit SVG in das src-Attribut, so dass es nicht zu integrieren, sich überhaupt mit dem Farbschema. Es soll ein CSS-hintergrund.

Auch, ich verstehe das nicht data:image/svg+xml;base64... Was bedeutet es genau?

Ich habe versucht, die Einbettung von inline-SVG in die $icon_url aber offensichtlich funktioniert es nicht, aber ich hatte gerade, es zu versuchen.

Dashicons sind nicht eine option, es gibt kein Symbol, es geeignet für mein Projekt.

InformationsquelleAutor Maciej Krawczyk | 2015-06-03
  1. 30

    Schritt für Schritt beispielsweise mit FontAwesome:

    Einschließlich Farbe und benutzerdefinierte post-Typen ?

    1 Wählen Sie das Symbol

    2 Holen Sie sich die SVG -

    Bringen die SVG in WordPress

    • In Ihrem functions.php, in denen Sie sich Ihre benutzerdefinierten post-Typ, fügen Sie den folgenden Codeausschnitt:

      add_action('init', 'my_init');
function my_init() {
    register_post_type('labs', [
        'label' => 'Labs',
        //.. ect
        'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')
     ]);
}

    Wichtige Hinweise:

    • Den Inhalt base64_encode ist die kopiert raw-string vom Font-Awesomes github-Seite.
    • Sie Sie brauchen, um zwei kleine Dinge, die in der svg-string:
      • 1: Hinzufügen eines fill="black" - Attribut der Pfad/s-Elemente - dies ermöglicht die Farbe zu ändern, die von WordPress.
      • 2: (optional) Ändern Sie die Breite und Höhe auf 20, wie dies der admin-Breite/Höhe und Größe scheint es ein schärferes Ergebnis.

    Benutzerdefinierte svg-admin-Menü-Symbol in WordPress

    • Hinweise: wenn Sie die Breite & height HTML-Attribute ist nicht notwendig (WP hat hintergrund Größe CSS), aber viewBox festgelegt werden müssen, und richtig eingestellt, das bedeutet, er muss die Koordinaten und die Größe der box nach dem Pfad(s), für FontAwesome SVGs hier - lassen Sie einfach das Attribut gibt 😉 Auch die fill Attribut für Pfade müssen gesetzt werden, aber wählen Sie einige Neutrale start Farbe, da die re-färben geschieht beim laden der Seite (so dass Sie sehen können Ihre ursprünglichen füllen Sie für eine Sekunde...)
    • Netter Tipp @jave.web über die Farbe - du hast absolut Recht
    • Hi, @Chris, ich habe das gleiche problem mit einem benutzerdefinierten Symbol möchte ich Platz in meinem Dashboard, und ich war versucht, es zu lösen mit der Antwort, aber ich kann nicht scheinen, um das SVG-Bild zu zeigen. Ich folgte den Schritten, die Sie erwähnt, und nichts, ich bekomme nur einen leeren Raum, in dem das Symbol angezeigt werden soll. Irgendwelche Ideen, warum? Ich wirklich brauchen, dies zu beenden, ein plugin, und dies scheint die natürlichste Weise, es zu tun. Vielen Dank im Voraus.
    • Sie müssen einen link posten oder einen screenshot (von den gerenderten dom und css).
    • Upps, @Chris, ich Durcheinander herum mit dem viewBox-Werte (macht Sie gleich die Breite und Höhe: 0, 0, 20, 20) und scheinbar bin ich nicht Anfassen soll, dass. Das Symbol sieht nicht zu scharf, aber, aber ich bekam was ich brauchte. Vielen Dank für die ausführlichen Schritte. BTW, warum kann ich nicht ändern, das viewBox-Werte? Sollten Sie nicht nach dem Dashboard-Größe? Oder ist das etwas, was ich sollte angeben, Wann die Beschaffung der SVG?
    • Das ist gut zu hier @Alex_89 . Sie können das ändern, aber Sie sind in der Regel generiert sich aus der Anwendung, erstellt das Symbol (wie Illustrator)

    InformationsquelleAutor Chris
  2. 4

    Ich habe die Lösung durch die Analyse von Woocommerce. Wenn keine url angegeben, um die add_menu_page Funktion, die WordPress verwendet die Standard-dashicon. So ist es nur eine Frage der überschreiben der Standard-Stil. Wie fügen Sie diese zu admin styles:

    #adminmenu #toplevel_page_yourpageid .menu-icon-generic div.wp-menu-image:before {
    font-family: your_font !important;
    content: '\eiconid';
    font-size: 1.3em!important;
}

    Ich konvertiert svg-font auf Icomoon.

    • Ich Suche schon über all dies. Wurde die Taste hinzufügen .Menü-Symbol-Generika . Danke.
    InformationsquelleAutor Maciej Krawczyk
  3. 2

    Dachte nur, ich sollte Folgendes hinzufügen:

    Bekommen die SVG automatisch neu Farbe passend zu dem Thema, die es braucht, um ein fill-Attribut. Dies ist, weil es dynamisch verändert durch Schrift, und sonst nicht weiß, was ein Teil zu re-Farbe.

    • Vielen Dank für diese! Ich konnte nicht herausfinden, warum mein Symbol war immer schwarz, fehlt die Füllung!
    InformationsquelleAutor Jamie
  4. 1

    Nachdem Sie umgewandelt haben, die icondata in base-64, richtigen Weg zu finden, es ist wie dieser;

    Das "," ist wichtig 

    'data:image/svg+xml;base64,'.$icon_data_in_base64
    InformationsquelleAutor Amit Singh
  5. 0

    Den svg - Datei muss die fill Attribut in es an die Arbeit. Öffnen Sie die svg-Datei in einem editor wie Atom, und stellen Sie sicher, es sieht wie folgt aus:

    <path fill="black" d="....

    Können jede Art von Farbe, die Sie wollen, in der es, WordPress JS verwendet, um automatisch aktualisieren Sie die fill-Wert basierend auf der admin-theme.

    InformationsquelleAutor sMyles
  6. -1

    Müssen Sie fügen Sie eine Base64-codierte Bild (Daten-URI), in der src...

    Mehr auf Wikipedia.

    • Ich habe versucht, 2 Dinge jetzt. 1. Ich legte codiert svg zu $icon_url und als Ergebnis bekam ich img-tag mit base64 im source. 2. Setzen Sie url mit base64-codiert svg, und ich bekam img-tag mit link auf die svg codiert. Egal was ich mache ich bekomme immer img-tag. Es ist etwas falsch mit dieser Funktion.
    InformationsquelleAutor rnevius
Schreibe einen Kommentar