Dodaj niestandardowe ikony do menu administracyjnego WordPressa z łatwością

How to add custom icons to the WordPress admin menuTutorial on custom icons in the WordPress admin menuChanging icons in the WordPress admin menuAdd SVG icon to the WordPress admin menuCustomizing icons in the WordPress admin menuIcon plugin for the WordPress admin menuCustom icon for the WordPress admin dashboardChanging an icon in the WordPress admin menuAdd custom image to the WordPress admin menuCustomizing icons in the WordPress admin menu

Objaśnienie

Chcesz uatrakcyjnić menu administracyjne WordPressa za pomocą niestandardowych ikon? Oto jak możesz to zrobić bez większego wysiłku.

Zmiana istniejących ikon:

Aby zmienić ikonę dla Kokpitu, użyj specjalnego kodu zwanego Dashicons. Na przykład, '\f120' zmienia ikonę Kokpitu.
Podobnie, możesz zmienić ikonę menu Posty, używając '\f109'.

Dodaj niestandardowe ikony SVG:

Jeśli masz konkretną ikonę SVG, możesz ustawić ją dla elementu menu, określając ścieżkę do swojego pliku SVG. To zastąpi domyślną ikonę twoim niestandardowym obrazem.
Upewnij się, że twój plik SVG jest dostępny, a ścieżka jest poprawna.

Utwórz nowe menu z niestandardową ikoną:

Możesz dodać nowy element menu z domyślną ikoną Dashicon. Na przykład, 'dashicons-admin-generic' jest używane tutaj.
Aby zastąpić to swoją ikoną SVG, użyj tej samej metody, co powyżej, określając ścieżkę do SVG.

Te modyfikacje są dodawane do obszaru administracyjnego za pomocą odrobiny magii CSS. Po prostu upewnij się, że umieszczasz kod w pliku functions.php swojego motywu, a wszystko będzie działać!

Kod
// Function to add custom icons to WordPress admin menu
function wp_dudecom_custom_admin_menu_icons() {
    ?>
    <style>
        /* Change the icon for the Dashboard menu item */
        #adminmenu #menu-dashboard div.wp-menu-image:before {
            content: '\f120'; /* Dashicons code for a custom icon */
        }

        /* Add a custom SVG icon to a specific menu item */
        #adminmenu #toplevel_page_custom_menu div.wp-menu-image {
            background-image: url('path-to-your-icon.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        /* Example: Change the icon for the Posts menu item */
        #adminmenu #menu-posts div.wp-menu-image:before {
            content: '\f109'; /* Dashicons code for a custom icon */
        }
    </style>
    <?php
}
add_action('admin_head', 'wp_dudecom_custom_admin_menu_icons');

// Function to register a custom admin menu with a custom icon
function wp_dudecom_register_custom_menu_page() {
    add_menu_page(
        __('Custom Menu Title', 'textdomain'),
        __('Custom Menu', 'textdomain'),
        'manage_options',
        'custom_menu_slug',
        'wp_dudecom_custom_menu_page',
        'dashicons-admin-generic', // Default Dashicon
        6
    );
}
add_action('admin_menu', 'wp_dudecom_register_custom_menu_page');

// Callback function for the custom menu page
function wp_dudecom_custom_menu_page() {
    echo '<h1>' . __('Welcome to the Custom Menu Page', 'textdomain') . '</h1>';
}

// Function to enqueue custom SVG icon for the custom menu
function wp_dudecom_enqueue_custom_admin_icons() {
    ?>
    <style>
        #adminmenu #toplevel_page_custom_menu_slug div.wp-menu-image {
            background-image: url('path-to-your-custom-icon.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
    </style>
    <?php
}
add_action('admin_head', 'wp_dudecom_enqueue_custom_admin_icons');

Instrukcja

Lokalizacja pliku: Dodaj poniższy kod do pliku functions.php swojego motywu lub do pliku własnej wtyczki.

Wymagania wstępne:

Upewnij się, że masz dostęp do plików motywu WordPress lub własnej wtyczki.
Przygotuj ścieżkę do swoich niestandardowych ikon SVG, jeśli planujesz je używać.

Kroki wdrożenia:

Otwórz plik functions.php swojego motywu WordPress lub stwórz nowy plik własnej wtyczki.
Skopiuj i wklej podany kod do pliku.
Zamień 'path-to-your-icon.svg' oraz 'path-to-your-custom-icon.svg' na rzeczywiste ścieżki do swoich plików SVG.
Zapisz zmiany w pliku.
Zaloguj się do panelu administracyjnego WordPress, aby zobaczyć zmiany w ikonach menu.

Uwagi:

Upewnij się, że Twoje pliki SVG są przesłane na serwer i ścieżki są poprawne.
Jeśli napotkasz jakiekolwiek problemy, sprawdź kod pod kątem błędów składniowych.

Potrzebujesz pomocy przy wdrożeniu lub chcesz bardziej zaawansowanej funkcjonalności? Odwiedź wp-dude.com po fachową pomoc w zakresie WordPress.