Dodaj niestandardowy CSS, aby stylizować stronę logowania WordPressa
Jak dodać niestandardowy CSS do strony logowania WordPress;
Dostosuj stronę logowania WordPress za pomocą CSS;
Dodaj CSS do formularza logowania WordPress;
Stylizuj stronę logowania WordPress przy użyciu CSS;
Niestandardowy CSS dla strony logowania WordPress;
Zmień styl strony logowania WordPress;
Niestandardowy CSS dla ekranu logowania WordPress;
Dostosowanie CSS strony logowania WordPress;
Jak stylizować stronę logowania WordPress;
Kod CSS formularza logowania WordPress;
Objaśnienie
Chcesz nadać swojej stronie logowania do WordPressa nowy wygląd? Oto jak możesz to zrobić za pomocą niestandardowego CSS.
Używanie niestandardowego pliku CSS:
- Utwórz plik CSS o nazwie custom-login-style.css i umieść go w katalogu swojego motywu.
- Ten kod załadował Twój plik CSS na stronie logowania, umożliwiając stylizację według własnych upodobań.
Dodawanie CSS w linii:
- Jeśli wolisz dodać style bezpośrednio w pliku funkcji swojego motywu, możesz to zrobić za pomocą CSS w linii.
- Ten przykład zmienia tło strony logowania, dostosowuje formularz i modyfikuje kolory przycisków.
Dzięki tym metodom możesz łatwo dostosować wygląd swojej strony logowania do WordPressa, aby pasował do stylu lub marki Twojej witryny. Po prostu dostosuj CSS do swoich potrzeb!
Kod
<?php
/**
* Enqueue custom CSS for the WordPress login page.
*
* This function adds custom styles to the WordPress login page.
*/
function wp_dudecom_custom_login_css() {
// Use wp_enqueue_style to add custom CSS to the login page
wp_enqueue_style( 'wp-dudecom-login-style', get_stylesheet_directory_uri() . '/custom-login-style.css' );
}
add_action( 'login_enqueue_scripts', 'wp_dudecom_custom_login_css' );
/**
* Add inline CSS directly to the WordPress login page.
*
* This function allows you to add custom CSS styles directly within the PHP file.
*/
function wp_dudecom_custom_login_inline_css() {
?>
<style type="text/css">
/* Example: Change the background color of the login page */
body.login {
background-color: #f1f1f1;
}
/* Example: Customize the login form */
#loginform {
background-color: #ffffff;
border: 1px solid #ccc;
padding: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
}
/* Example: Change the login button color */
.wp-core-ui .button-primary {
background-color: #0073aa;
border-color: #0073aa;
color: #ffffff;
text-shadow: none;
}
/* Example: Change the login button hover color */
.wp-core-ui .button-primary:hover {
background-color: #005177;
border-color: #005177;
}
</style>
<?php
}
add_action( 'login_head', 'wp_dudecom_custom_login_inline_css' );
?>
Instrukcja
Lokalizacja pliku: functions.php lub plik niestandardowej wtyczki
Wymagania wstępne:
- Dostęp do katalogu motywu WordPress.
- Podstawowa znajomość CSS w celu dostosowania.
Kroki wdrożenia:
- Dostęp do katalogu motywu:
- Przejdź do katalogu instalacji WordPress.
- Otwórz folder wp-content/themes/nazwa-twojego-motywu.
- Utwórz niestandardowy plik CSS:
- Utwórz nowy plik o nazwie
custom-login-style.css
w katalogu swojego motywu. - Dodaj swoje pożądane style CSS do tego pliku, aby dostosować stronę logowania.
- Utwórz nowy plik o nazwie
- Edytuj functions.php:
- Otwórz plik
functions.php
znajdujący się w katalogu swojego motywu. - Skopiuj i wklej podany kod PHP do pliku.
- Otwórz plik
- Zapisz zmiany:
- Zapisz plik
functions.php
i w razie potrzeby prześlij go z powrotem na serwer.
- Zapisz plik
- Zweryfikuj zmiany:
- Wyloguj się z panelu administracyjnego WordPress.
- Odwiedź stronę logowania, aby zobaczyć zastosowane niestandardowe style.
Postępując zgodnie z tymi krokami, możesz łatwo dostosować wygląd strony logowania WordPress. Jeśli potrzebujesz dalszej pomocy lub chcesz zbadać bardziej zaawansowane funkcjonalności, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy.