Utwórz niestandardową stronę logowania WordPress bez wtyczki

Opublikowany: 2022-09-01

Czy kiedykolwiek znudziła Ci się domyślna strona logowania do WordPressa?

Zastanawiałeś się kiedyś, czy istnieje sposób, aby strona logowania była spójna z projektami Twojej witryny?

Jeśli tak, to trafiłeś we właściwe miejsce. W tym artykule przedstawimy Ci różne metody dostosowywania strony logowania bez żadnych wtyczek.

Co uwzględniliśmy dzisiaj?

  • Domyślna strona logowania WordPress
  • Dlaczego warto utworzyć niestandardową stronę logowania?
  • Dostosuj domyślną stronę logowania WordPress
    • Dostosuj logo strony logowania
    • Wyłączanie przełącznika języka strony logowania WordPress
  • Utwórz nową niestandardową stronę logowania

Domyślna strona logowania WordPress

Domyślnie możesz uzyskać dostęp do strony logowania WordPress, dodając /login/, /admin/ lub wp-login.php na końcu adresu URL witryny.

Pojawia się ten ekran logowania za każdym razem, gdy to robisz, prawda?

PPWP Pro: domyślna strona logowania WordPress

Jak widać, strona logowania do WordPressa zawiera następujące elementy:

  1. Domyślne tło
  2. Logo WordPress
  3. Pola wejściowe (nazwa użytkownika i hasło)
  4. Pole wyboru Zapamiętaj mnie
  5. Przycisk Prześlij
  6. Link do utraconego hasła
  7. Powrót do linku

Co zrobić, jeśli chcesz zastąpić tę ogólną stronę własną, powiedzmy, do celów związanych z marką?

Po prostu czytaj dalej do końca naszego bloga. Będzie dla Ciebie kilka niespodzianek.

Dlaczego warto utworzyć niestandardową stronę logowania WordPress?

Przede wszystkim niestandardowe strony logowania zapewniają znacznie lepsze wrażenia użytkownika. Jeśli prowadzisz małą firmę, która ma kilku użytkowników, którzy logują się do Twojej witryny, możesz bezwzględnie użyć domyślnej strony logowania WordPress.

Wyobraź sobie jednak, że Twoja witryna jest sklepem internetowym, a pozwalanie klientom na logowanie się do Twojej witryny przez nudną i niezwiązaną z marką bramę nie jest dobrym pomysłem.

Najlepszą praktyką jest sprawienie, by strona logowania była spójna ze stylami Twojej witryny.

Kolejną zaletą posiadania niestandardowej strony logowania WordPress jest zwiększenie bezpieczeństwa witryny. Zmieniając domyślny adres URL logowania WordPress, niepożądani użytkownicy nie będą mogli łatwo uzyskać dostępu do strony logowania administratora. Pomaga to uniknąć niechcianych ataków w Twojej witrynie.

Przejdźmy teraz do kolejnych sekcji, w których przeprowadzimy Cię przez szczegółowe kroki tworzenia własnej strony logowania.

Dostosuj domyślną stronę logowania WordPress

Czy wiesz, że możesz zastąpić logo i linki na domyślnej stronie logowania WordPress własnymi?

Dostosuj logo strony logowania

Aby zastąpić logo WordPress, po prostu dodaj następujący fragment kodu do pliku functions.php motywu (dzieci).

 funkcja ppwp_custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
obraz w tle: adres URL ( https://passwordprotectwp.com/wp-content/themes/ppwp/img/ppwp-org-logo.png );
        wysokość: 100px ;
        szerokość: 300px ;
        rozmiar tła: 300px 100px ;
        background-repeat: bez powtórzeń ;
        dopełnienie-dolne: 10px ;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'ppwp_custom_login_logo' );

Ta czynność pomoże Ci tylko wymienić logo. Klikając na swoje logo, nadal jesteś przekierowywany na stronę WordPress.

Jak możesz przekierować użytkowników do swojej witryny?

To tylko bułka z masłem z następującym fragmentem kodu.

 funkcja ppwp_custom_login_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'ppwp_custom_login_url' );
funkcja ppwp_login_logo_url_redirect() {
    zwróć ' https://passwordprotectwp.com/ ';
}
add_filter( 'login_headertitle', 'ppwp_login_logo_url_redirect' );

Nie zapomnij zastąpić adresu URL witryny rzeczywistą nazwą witryny. Niestandardowe logo na ekranie logowania jest teraz wskazywane na stronę główną Twojej witryny.

Wyłączanie przełącznika języka strony logowania WordPress

WordPress 5.9 zawiera funkcję umożliwiającą użytkownikom wybór języków podczas logowania do Twojej witryny.

Przydaje się, gdy prowadzisz witrynę wielojęzyczną. Jeśli Twoja witryna jest dostępna w jednym języku, możesz wyłączyć tę funkcję, aby uprościć formularz logowania.

Jak możesz to robić?

Po prostu dodaj następujący fragment kodu do pliku functions.php motywu (podrzędnego) lub wtyczki Fragmenty kodu.

 add_filter( 'login_display_language_dropdown', '__return_false' );

Utwórz nową niestandardową stronę logowania WordPress

A co, jeśli chcesz zrobić coś więcej niż tylko zmianę logo i linków?

Czy WordPress pozwala stworzyć własną stronę logowania i zastąpić domyślną stronę WordPress swoją?

TAk! Absolutnie możesz!

Wystarczy wykonać poniższe kroki. Pamiętaj, że ten przewodnik wymaga niewielkiej wiedzy na temat kodowania. Jeśli nie znasz kodów, użyj wtyczek.

Pamiętaj, aby przed rozpoczęciem utworzyć kopię zapasową swojej witryny.

Krok 1: Utwórz nowy plik szablonu

Aby to zrobić, przejdź do Wygląd> Edytor plików motywu.

W sekcji template-parts dodaj nowy plik .php i nazwij go, jak chcesz, np. custom-login-page.php.

Najpierw dodaj tę linię do pliku niestandardowego szablonu:

 <?php /* Nazwa szablonu: Niestandardowe strony logowania */ ?>

Ta czynność sprawi, że utworzony plik PHP stanie się szablonem strony. W związku z tym zobaczysz nazwę szablonu podczas edytowania stron w backendzie.

Krok 2: Dostosuj plik utworzonego szablonu

Następnym krokiem jest dodanie kodów PHP w celu stworzenia kompletnego formularza logowania.

Dodaj formularz logowania

 <?php
/**
* Nazwa szablonu: niestandardowa strona logowania
*/
pobierz_nagłówek();
if ( ! is_user_logged_in() ) {
    $args = tablica
        'redirect' => admin_url(), // przekieruj do panelu administratora.
        'form_id' => 'custom_loginform',
        'label_username' => __( ' Nazwa użytkownika: ' ),
        'label_password' => __( ' Hasło: ' ),
        'label_remember' => __( ' Zapamiętaj mnie ' ),
        'label_log_in' => __( ' Zaloguj mnie ' ),
         'zapamiętaj' => prawda
    );
wp_login_form ($args );
}
pobierz_stopkę();

Przekieruj wp-login.php na niestandardową stronę logowania

Pomyślnie utworzyłeś niestandardową stronę logowania. Jednak użytkownicy nadal mogą przejść bezpośrednio do domyślnej strony logowania WordPress, wpisując wp-admin lub wp-login.php po adresach URL witryny.

Aby tego uniknąć, musisz przekierować użytkowników z domyślnych adresów URL logowania WordPress na niestandardowe.

Aby to zrobić, dodaj następujące niestandardowe kody do pliku functions.php lub wtyczki Code Snippets motywu podrzędnego.

 funkcja redirect_login_page() {
    $login_url = home_url( '/login' );
    $url = nazwa podstawowa($_SERVER['REQUEST_URI']); // pobierz żądany adres URL
    isset( $_REQUEST['redirect_to'] ) ? ( $url = "wp-login.php" ): 0; // jeśli użytkownicy wyślą żądanie do wp-admin
    if( $url == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect ($login_url );
        Wyjście;
    }
}
add_action('init','redirect_login_page');

Obsługa błędów logowania

Po zakończeniu tworzenia niestandardowej strony logowania użytkownicy, którzy wprowadzą prawidłowe dane logowania, przejdą do pulpitu nawigacyjnego. Nieudane żądania logowania zostaną przekierowane do domyślnego WordPress.

Aby poradzić sobie z nieudanymi próbami logowania, dodaj następujący kod do pliku functions.php motywu (dzieci).

 funkcja error_handler() {
    $login_page = home_url( '/login' );
    globalne $błędy;
    $err_codes = $errors->get_error_codes(); // pobierz wbudowane kody błędów WordPress
    $_SESSION["err_codes"] = $err_codes;
    wp_redirect ($strona_logowania ); // utrzymuj użytkowników na tej samej stronie
    Wyjście;
}
add_filter( 'login_errors', 'error_handler');

Następnie dodaj następujące kody do custom_login_page.php.

 $err_codes = isset( $_SESSION["err_codes"])? $_SESSION["kody_błędów"] : 0;
    if( $err_codes !== 0 ){
        echo display_error_message( $err_codes );
}
funkcja display_error_message( $err_code ){
    // Zła nazwa użytkownika.
    if ( in_array( 'invalid_username', $err_code )) {
        $error = '<strong>BŁĄD</strong>: Nieprawidłowa nazwa użytkownika.';
    }
    // Niepoprawne hasło.
    if ( in_array( 'incorrect_password', $err_code )) {
        $error = '<strong>BŁĄD</strong>: Wprowadzone hasło jest nieprawidłowe.';
    }
    // Pusta nazwa użytkownika.
    if ( in_array( 'pusta_nazwa użytkownika', $err_code )) {
        $error = '<strong>BŁĄD</strong>: Pole nazwy użytkownika jest puste.';
    }
    // Puste hasło.
    if ( in_array( 'puste_haslo', $err_code )) {
        $error = '<strong>BŁĄD</strong>: Pole hasła jest puste.';
    }
    // Pusta nazwa użytkownika i puste hasło.
    if( in_array( 'empty_username', $err_code ) && in_array( 'empty_password', $err_code )){
        $error = '<strong>BŁĄD</strong>: Nazwa użytkownika i hasło są puste.';
    }
zwróć $błąd;
}

Krok 3: Utwórz nową stronę i przypisz utworzony szablon do strony niestandardowej

Teraz przejdź do sekcji Strony w panelu administratora i utwórz nową stronę.

W menu rozwijanym Szablon w sekcji Atrybuty strony wybierz utworzony szablon.

PPWP Pro: tworzenie niestandardowych stron logowania

Zapisz stronę.

Teraz masz własną stronę logowania.

Czy udało Ci się utworzyć niestandardową stronę logowania?

Przeprowadziliśmy Cię przez szczegółowe kroki, aby dostosować stronę logowania administratora.

Możesz zmienić logo i powiązany adres URL w domyślnym formularzu logowania WordPress.

Alternatywnie możesz utworzyć własną niestandardową stronę logowania WordPress, tworząc nowy szablon strony. Chociaż drugie rozwiązanie wydaje się na początku wymagać znajomości kodowania, jest to całkiem proste dzięki naszemu przejrzystemu przewodnikowi krok po kroku. Więc w ogóle się nie martw.

Czy udało Ci się już stworzyć własną stronę logowania?

Potrzebujesz dodatkowych informacji?

Daj nam znać w sekcji komentarzy poniżej!