Dostosowanie domyślnej kolorystyki panelu administracyjnego WordPressa

Jak zmienić kolorystykę panelu administracyjnego WordPress; Dostosuj kolory panelu administracyjnego WordPress; Wtyczka do zmiany kolorystyki panelu administracyjnego WordPress; Zmień domyślną kolorystykę panelu administracyjnego WordPress; Samouczek dotyczący niestandardowej kolorystyki panelu administracyjnego WordPress; Modyfikacja kolorystyki pulpitu WordPress; Personalizuj paletę kolorów panelu administracyjnego WordPress; Dostosowanie kolorów panelu administracyjnego WordPress; Ustaw niestandardowe kolory dla panelu administracyjnego WordPress; Zmiana 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:

  1. Dostęp do plików motywu: Użyj klienta FTP lub menedżera plików swojego dostawcy hostingu, aby przejść do katalogu motywu WordPress.
  2. Edytuj plik functions.php: Otwórz plik functions.php w edytorze tekstu.
  3. Wklej kod: Skopiuj i wklej podany kod do pliku functions.php. Upewnij się, że jest umieszczony w tagach PHP.
  4. 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.
  5. Zapisz zmiany: Zapisz zmiany w pliku functions.php oraz w pliku CSS.
  6. 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.