it-swarm.com.de

Wie füge ich WordPress-Menüs fantastische Symbole hinzu?

So fügen Sie WordPress-Menüs beeindruckende Symbole hinzu

3
Chirag Pipariya

Ich gehe davon aus, dass Sie dem Dashboard benutzerdefinierte Symbole hinzufügen möchten. Mit dem neuesten Update von WordPress auf 3.8 haben sich die Dashboard-Symbole geändert. Sie sind jetzt eigentlich eine Schrift. Dies ist eigentlich ziemlich cool, da Schriftarten mit CSS leicht die Farben ändern können und auch in der Größe ansprechen.

Zuerst erkläre ich Ihnen, wie Sie ein benutzerdefiniertes Symbol mithilfe der vordefinierten Dashicons hinzufügen, die vom MP6-Team (Entwickler des neuesten Dashboards) erstellt wurden. Besuchen Sie http://melchoyce.github.io/dashicons/ , um alle derzeit verfügbaren Dashicons anzuzeigen. Wenn Sie einen aktuellen Menüpunkt ändern möchten, ist dies die entsprechende Funktion. Fügen Sie dies der Datei functions.php Ihres Themes oder Ihrem benutzerdefinierten Plugin hinzu. Dies würde das Standardsymbol für das Menü "Beiträge" ändern:

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            content: '\\f337'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

Wenn Sie ein Symbol für einen benutzerdefinierten Beitragstyp hinzufügen möchten, ist dies mit ein wenig Drehung ähnlich:

function cptname_custom_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-cptname div.wp-menu-image:before {
            content: '\\f337'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'cptname_custom_css');

Geben Sie Ihren benutzerdefinierten Post-Typ-Namen anstelle von "cptname" ein. Nun die Wendung. Wir müssen unserer benutzerdefinierten Post-Typ-CSS-Klasse eine Klasse hinzufügen. Dazu fügen wir einfach eine Codezeile zu unserem benutzerdefinierten Post-Type-Registrierungs-Hook hinzu:

'menu_icon' => '',

So sieht unser gesamter Registrierungs-Hook aus:

$args = array(
 'labels' => $labels,
 'menu_icon' => '',
 'public' => true,
 'publicly_queryable' => true,
 'show_ui' => true, 
 'show_in_menu' => true, 
 'query_var' => true,
 'rewrite' => true,
 'capability_type' => 'post',
 'has_archive' => true, 
 'hierarchical' => false,
 'menu_position' => null,
 'supports' => array('title', 'editor', 'thumbnail')
); 
 register_post_type('cptname',$args);
}

Wenn Sie die fantastischen Symbole für Schriftarten verwenden möchten, müssen Sie sie nur in unser Thema hochladen. Laden Sie die Schriftart herunter und legen Sie die CSS- und Schriftartendateien im entsprechenden Ordner Ihres aktuellen Designs ab. Dann müssen wir unsere themes functions.php-Datei oder Ihr benutzerdefiniertes Plugin mit weiterem Code versehen:

function my_custom_fonts() {
<style>
 @font-face {
     font-family: FontAwesome;
     src: url(/path-to-font-folder/fontawesome-webfont.woff);
 }
</style>
}

add_action('admin-init', 'my_custom_fonts');

Und jetzt verwenden wir den obigen Code, um unsere neuen Symbole selektiv auszuwählen. Dies würde das "Posts" -Menüsymbol unter Verwendung des FontAwesome-Symbolsatzes erneut ändern:

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            font-family:  FontAwesome !important;
            content: '\\fa-Apple'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

Hoffe das hilft dir. Ich habe die tollen Symbole für Schriftarten noch nicht verwendet, aber meine Dashboard-Symbole bereits angepasst. Ich mag die neueste Überarbeitung des Dashboards, aber es gibt eine Lernkurve.

Ich habe gerade etwas bearbeitet: Ich habe einige Dinge hier ausprobiert und tatsächlich die fantastischen Symbole auf meiner eigenen Website verwendet:

füge dies zu deiner functions.php oder deinem Plugin hinzu:

function font_admin_init() {
   wp_enqueue_style('font-awesome', 'http://netdna.bootstrapcdn.com/fontawesome/3.1.1/css/font-awesome.css'); 
}

add_action('admin_init', 'font_admin_init');

fügen Sie dann Folgendes hinzu, um das aktuelle Symbol auszuwählen:

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            font-family:  FontAwesome !important;
            content: '\\f0f2'; // this is where you enter the fontaweseom font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

Sie finden die Codes in der CSS-Datei.

5
RiotAct

Für das Front-End verwende ich Folgendes:

// Add font awesome CSS http://fortawesome.github.io/Font-Awesome/examples/
function awesome_css() {
    wp_enqueue_style("fontawesome", 'http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');
}
add_action( 'wp_enqueue_scripts', 'awesome_css' );

Zum Hinzufügen in Admin, schauen Sie hier: https://github.com/raket/fontawesome-for-wordpress/blob/master/fontawesome.php was eine Lösung zu haben scheint, die funktionieren würde

2
TomC

Schritt für Schritt Beispiel mit FontAwesome:

Einschließlich Farb- und benutzerdefinierter Beitragstypen ????

1 Wählen Sie ein Symbol

2 Holen Sie sich die SVG

Bringen Sie die SVG in Wordpress

  • Fügen Sie in Ihrem functions.php, in dem Sie Ihren benutzerdefinierten Beitragstyp registrieren, das folgende Snippet hinzu:

    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:

  • Der Inhalt von base64_encode ist der kopierte Rohtext der Font Awesomes Github-Seite.
  • Sie müssen zwei kleine Dinge in der Svg-Zeichenfolge ändern:
    • 1: Fügen Sie den Pfad/Elementen ein fill="black" Attribut hinzu - dies ermöglicht das Ändern der Farbe durch Wordpress.
    • 2: (optional) Ändern Sie die Breite und Höhe auf 20, da dies die Breite/Höhe des Administrators ist und das Ergebnis klarer zu sein scheint.

 enter image description here 

0
Chris