Dostosowanie domyślnej kolorystyki panelu administracyjnego WordPressa
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 plikfunctions.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 nazwiewp-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.