Dostosowanie domyślnego schematu kolorów panelu administracyjnego WordPressa

Jak zmienić kolorystykę panelu administracyjnego WordPressDostosuj kolory panelu administracyjnego WordPressWtyczka do zmiany kolorystyki panelu administracyjnego WordPressZmień domyślną kolorystykę panelu administracyjnego WordPressSamouczek dotyczący niestandardowej kolorystyki panelu administracyjnego WordPressModyfikacja kolorystyki pulpitu WordPressPersonalizuj paletę kolorów panelu administracyjnego WordPressDostosowanie kolorów panelu administracyjnego WordPressUstaw niestandardowe kolory dla panelu administracyjnego WordPressZmiana kolorów motywu panelu administracyjnego WordPress

Objaśnienie

Chcesz nadać swojemu panelowi administracyjnemu WordPress nowy wygląd? Oto jak możesz stworzyć własny schemat kolorów dla niego.

Krok 1: Zarejestruj swój własny schemat kolorów

Najpierw musimy poinformować WordPress o naszym nowym schemacie kolorów. Robimy to, rejestrując go z unikalnym identyfikatorem i nazwą wyświetlaną. Będziesz także potrzebować pliku CSS, który definiuje kolory, które chcesz użyć. W tym przykładzie plik CSS znajduje się w folderze admin-colors w katalogu twojego motywu.

Krok 2: Załaduj niestandardowy CSS

Następnie upewniamy się, że niestandardowy plik CSS jest ładowany tylko wtedy, gdy użytkownik wybierze ten schemat kolorów. Dzięki temu wszystko pozostaje uporządkowane i efektywne.

Krok 3: Dodaj style inline dla dodatkowej personalizacji

Na koniec możesz dodać kilka stylów inline, aby dostosować konkretne elementy panelu administracyjnego. Tutaj możesz puścić wodze fantazji z kolorami paska administracyjnego, menu i linków.

Postępując zgodnie z tymi krokami, możesz spersonalizować swój panel administracyjny WordPress, aby pasował do twojego stylu lub marki. Pamiętaj tylko, aby zastąpić kody kolorów i ścieżki do plików swoimi własnymi wyborami!

Kod
<?php
// Hook into 'admin_init' to register a custom admin color scheme
add_action('admin_init', 'wp_dudecom_register_custom_admin_color_scheme');

function wp_dudecom_register_custom_admin_color_scheme() {
    // Define the URL to the custom color scheme CSS file
    $theme_dir = get_template_directory_uri();
    wp_admin_css_color(
        'wp-dudecom_custom_scheme', // Unique ID for the color scheme
        __('WP-DudeCom Custom Scheme'), // Display name for the color scheme
        $theme_dir . '/admin-colors/wp-dudecom-custom-scheme.css', // Path to the CSS file
        array('#1d1d1d', '#ffffff', '#0073aa', '#d54e21') // Define the colors used in the scheme
    );
}

// Hook into 'admin_enqueue_scripts' to enqueue the custom CSS file
add_action('admin_enqueue_scripts', 'wp_dudecom_enqueue_custom_admin_styles');

function wp_dudecom_enqueue_custom_admin_styles() {
    // Check if the current user has selected the custom color scheme
    $user_id = get_current_user_id();
    $user_color_scheme = get_user_option('admin_color', $user_id);

    if ($user_color_scheme === 'wp-dudecom_custom_scheme') {
        // Enqueue the custom CSS file for the admin area
        wp_enqueue_style('wp-dudecom-custom-admin-style', get_template_directory_uri() . '/admin-colors/wp-dudecom-custom-scheme.css');
    }
}

// Hook into 'admin_head' to add inline styles for further customization
add_action('admin_head', 'wp_dudecom_custom_admin_inline_styles');

function wp_dudecom_custom_admin_inline_styles() {
    // Check if the current user has selected the custom color scheme
    $user_id = get_current_user_id();
    $user_color_scheme = get_user_option('admin_color', $user_id);

    if ($user_color_scheme === 'wp-dudecom_custom_scheme') {
        echo '<style>
            /* Custom styles for the admin panel */
            #wpadminbar, #adminmenu, #adminmenu .wp-submenu, #adminmenuback, #adminmenuwrap {
                background-color: #1d1d1d;
            }
            #wpadminbar .ab-item, #adminmenu a {
                color: #ffffff;
            }
            #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head, #adminmenu .wp-menu-arrow, #adminmenu .wp-menu-arrow div, #adminmenu li.current a.menu-top, #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu li:hover a.menu-top, #adminmenu li.menu-top:hover, #adminmenu .opensub .wp-submenu, #adminmenu .wp-submenu, #adminmenu .wp-submenu-wrap {
                background-color: #0073aa;
            }
            #adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, #adminmenu a:hover, #adminmenu li.menu-top:hover, #adminmenu li.menu-top:focus, #adminmenu li.menu-top:active {
                color: #d54e21;
            }
        </style>';
    }
}
?>

Instrukcja

Lokalizacja pliku: Dodaj kod do pliku functions.php swojego motywu lub stwórz plik niestandardowej wtyczki.

Wymagania wstępne:

Dostęp do plików motywu WordPress.
Plik CSS dla niestandardowego schematu kolorów znajdujący się w folderze admin-colors w katalogu motywu.

Kroki wdrożenia:

Dostęp do plików motywu: Użyj klienta FTP lub menedżera plików swojego dostawcy hostingu, aby przejść do katalogu motywu WordPress.
Edytuj plik functions.php: Otwórz plik functions.php w edytorze tekstu.
Wklej kod: Skopiuj i wklej podany kod do pliku functions.php. Upewnij się, że jest umieszczony w tagach PHP.
Utwórz plik CSS: W katalogu motywu utwórz folder o nazwie admin-colors, jeśli jeszcze nie istnieje. Wewnątrz tego folderu utwórz plik CSS o nazwie wp-dudecom-custom-scheme.css i zdefiniuj swoje pożądane style.
Zapisz zmiany: Zapisz zmiany w pliku functions.php oraz w pliku CSS.
Wybierz niestandardowy schemat: Zaloguj się do panelu administracyjnego WordPress, przejdź do Użytkownicy > Twój profil i wybierz "WP-DudeCom Custom Scheme" z opcji schematu kolorów administracyjnych.

Postępując zgodnie z tymi krokami, możesz dostosować schemat kolorów panelu administracyjnego WordPress, aby lepiej odpowiadał Twoim preferencjom lub identyfikacji wizualnej. Jeśli potrzebujesz pomocy przy wdrożeniu lub bardziej zaawansowanej funkcjonalności, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy.