Tworząc komercyjne strony czasem zachodzi potrzeba zmiany strony logowania, dodanie loga, tła lub innych unikatowych elementów. Aby edytować w/w elementy można zainstalować odpowiednią wtyczkę, jednak postaram się wam pokazać jak można to zrobić w szybki i bezbolesny sposób, nie zaśmiecając przy tym wordpressa.
Modyfikacja którą chcemy wdrożyć musi być odporna na aktualizację i łatwa w edycji oraz musi posiadać następujące cechy:
- dodawanie niestandardowego tła
- zmiana loga na niestandardowe
- zmiana wyglądu formularza
WordPress, własna strona logowania
- Zacznijmy więc od utworzenia folderu w katalogu z naszym themem o nazwie „login„,
2. W folderze „login”, utwórz nowy plik (arkusz stylów) login-styles.css
- Następnie musimy zasugerować wordpressowi aby załadował plik CSS, dodając poniższy kod do pliku functions.php w katalogu z naszym themem.
|
1 2 3 4 5 6 |
function my_custom_login() { echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-styles.css" />'; } add_action('login_head', 'my_custom_login'); |
To wszystko! teraz edytujemy plik login-styles.css i podmieniamy wedle uznania.
Niestandardowe tło
|
1 2 3 4 5 6 |
body.login { background-image: url('url-obrazka-tla.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } |
Zmiana loga na niestandardowe
|
1 2 3 |
.login h1 a { background-image: url('url-loga.jpg'); } |
Dostosowanie wyglądu formularza logowania
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.login label { font-size: 12px; color: #555555; } .login input[type="text"]{ background-color: #ffffff; border-color:#dddddd; -webkit-border-radius: 4px; } .login input[type="password"]{ background-color: #ffffff; border-color:#dddddd; -webkit-border-radius: 4px; } |
Można pokombinować bardziej np. dostosować przycisk.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.login .button-primary { width: 120px; float:right; background-color:#17a8e3 !important; background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#17a8e3)); background: -webkit-linear-gradient(top, #17a8e3, #17a8e3); background: -moz-linear-gradient(top, #17a8e3, #17a8e3); background: -ms-linear-gradient(top, #17a8e3, #17a8e3); background: -o-linear-gradient(top, #17a8e3, #17a8e3); background-image: -ms-linear-gradient(top, #17a8e3 0%, #17a8e3 100%); color: #ffffff; -webkit-border-radius: 4px; border: 1px solid #0d9ed9; } .login .button-primary:hover { background-color:#17a8e3 !important; background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#0d9ed9 )); background: -webkit-linear-gradient(top, #17a8e3, #0d9ed9 ); background: -moz-linear-gradient(top, #17a8e3, #0d9ed9 ); background: -ms-linear-gradient(top, #17a8e3, #0d9ed9 ); background: -o-linear-gradient(top, #17a8e3, #0d9ed9 ); background-image: -ms-linear-gradient(top, #0b436e 0%, #0d9ed9 100%); color: #fff; -webkit-border-radius: 4px; border: 1px solid #0d9ed9; } .login .button-primary:active { background-color:#17a8e3 !important; background: -webkit-gradient(linear, left top, left bottom, from(#0d9ed9), to(#17a8e3)); background: -webkit-linear-gradient(top, #0d9ed9, #17a8e3); background: -moz-linear-gradient(top, #0d9ed9, #17a8e3); background: -ms-linear-gradient(top, #0d9ed9, #17a8e3); background: -o-linear-gradient(top, #0d9ed9, #17a8e3); background-image: -ms-linear-gradient(top, #0d9ed9 0%, #17a8e3 100%); color: #fff; -webkit-border-radius: 4px; border: 1px solid #0d9ed9; } |
Edycja zajęła nam kilka minut teraz możemy się cieszyć. Nasz WordPress ma własną stronę logowania.
Pingback: Brakująca wartość alt w obrazku Gravatara » Sobinski.pl
Super artykuł. Chętnie będę się przyglądać kolejnym wpisom autora, bo zapowiada się nieźle.
This post will assist the internet visitors for creating new bloig orr
even a blog ffom start to end.
Bardzo ciekawe ujęcie tematu. Niestety nie mogę zgodzić się ze wszystkimi stwierdzeniami.
Bardzo mi się podoba powyższy artykuł.
Czy tak jest w rzeczywistości nie wiem, poza tym z wieloma elementami nie mogę się zgodzić, ale i tak
jest całkiem nieźle.