Jak zbudować niestandardową stronę logowania WordPress?

Ach tak, strona logowania do WordPressa – jedna z najbardziej rozpoznawalnych stron w WordPressie – prawda?

Ale jednocześnie posiadanie tej strony w witrynie WordPress w domyślnej formie nie zawsze jest najlepszym pomysłem.

Czemu? - ty pytasz.

Oto odpowiedź:

Dlaczego potrzebujesz niestandardowej strony logowania do WordPressa?

Problem jest trojaki:

1. Ruch uliczny . Im większy ruch uzyskasz, tym więcej „złego” ruchu uzyskasz w bezpośrednim wyniku. Przez zły ruch rozumiem złośliwe skrypty i boty, spamerów i wszelkiego rodzaju użytkowników odwiedzających Twoją witrynę w złych intencjach. Dostosowanie strony logowania do WordPressa może zwiększyć bezpieczeństwo witryny.
2. Witryna dla wielu użytkowników . Jeśli Twoja witryna jest zarządzana przez wiele osób – czy to administratorów, czy autorów/blogerów – nastąpi wielokrotne logowanie. Zapewnienie niestandardowego formularza logowania sprawi, że cały proces będzie przyjemniejszy.
3. Znakowanie . Domyślna strona logowania jest w porządku, ale pośrodku znajduje się duże logo WordPress. Zmiana tego i sprawienie, by strona logowania wyglądała bardziej jak twoja, może być miłym akcentem brandingowym. Jest to szczególnie ważne, jeśli budujesz stronę internetową dla klienta. Zapewnienie Twojemu klientowi spójnych doświadczeń to z pewnością coś, co doceni.

Jeśli którykolwiek z powyższych brzmi dla Ciebie przekonująco, powinieneś rozważyć zmianę strony logowania na niestandardową. Oto jak:

Jak stworzyć niestandardową stronę logowania do WordPressa?

Można to zrobić na dwa główne sposoby:

• sposób ręczny ,
• sposób wtyczki .

Oba sposoby mają swoje plusy i minusy. Sposób ręczny zapewnia większą kontrolę nad wyglądem końcowej strony. Sposób wtyczki jest łatwiejszy do naśladowania, zwłaszcza jeśli nie masz umiejętności kodowania, ale musisz zadowolić się tym, na co pozwala wtyczka.

Omówmy oba.

Ręczne tworzenie niestandardowej strony logowania

Chociaż wymaga to dostosowania niektórych plików źródłowych motywu, nie jest to nic trudnego. Jako przykład wykorzystam dwadzieścia piętnaście.

Zabawa zaczyna się od stworzenia kopii pliku page.php oraz content-page.php .

Zmień nazwy tych nowych kopii odpowiednio na page-login.php i content-login.php .

Otwórz page-login.php i zmień tylko jedną linię. Od tego:

 get_template_part( 'content', 'page' );

Do tego:

 get_template_part( 'content', 'login' );

Teraz content-login.php i dodajmy jedną linię tuż pod <?php the_content(); ?> <?php the_content(); ?> . Tak jak:

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

Notatka. Na tym etapie możesz wykonać szereg innych dostosowań, jeśli chcesz (takich jak dostosowanie projektu/układu, usunięcie paska bocznego), ale to wszystko jest opcjonalne. Zmiana tylko tych dwóch linijek załatwi sprawę, jeśli zamierzasz zastosować niezwykle minimalne podejście do nowej strony logowania do WordPressa.

Teraz stwórzmy nową stronę w wp-admin i po prostu nazwijmy ją „login”. Upewnij się, że permalink to również „login”:

Dzięki temu WordPress automatycznie użyje pliku szablonu page-login.php .

Jeśli odwiedzasz teraz swoją nową stronę, powinna wyglądać mniej więcej tak:

Na tym etapie jedyne, co pozostało do zrobienia, to ustawić przekierowania, aby ostatecznie wyeliminować domyślną stronę logowania WordPress. Zrób to, umieszczając te wiersze na końcu pliku functions.php :

 /* Main redirection of the default login page */ function redirect_login_page() { $login_page = home_url('/login/'); $page_viewed = basename($_SERVER['REQUEST_URI']); if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); /* Where to go if a login failed */ function custom_login_failed() { $login_page = home_url('/login/'); wp_redirect($login_page . '?login=failed'); exit; } add_action('wp_login_failed', 'custom_login_failed'); /* Where to go if any of the fields were empty */ function verify_user_pass($user, $username, $password) { $login_page = home_url('/login/'); if($username == "" || $password == "") { wp_redirect($login_page . "?login=empty"); exit; } } add_filter('authenticate', 'verify_user_pass', 1, 3); /* What to do on logout */ function logout_redirect() { $login_page = home_url('/login/'); wp_redirect($login_page . "?login=false"); exit; } add_action('wp_logout','logout_redirect');

(Fragmenty kodu zbudowane na podstawie: [1][2].)

W tej chwili jedyną dostępną stroną logowania jest nowa, stworzona przez Ciebie. Wspaniałą rzeczą jest to, że możesz ją dowolnie edytować za pomocą domyślnego edytora stron WordPress (tak jak edytujesz każdą inną stronę).

Tworzenie niestandardowej strony logowania do WordPressa z wtyczką

Ta metoda działa nieco inaczej, ponieważ zamiast tworzyć zupełnie nową stronę logowania, w rzeczywistości modyfikujemy stronę domyślną.

Po pierwsze, wtyczka, której będziemy używać, to: Custom Login Page Customizer.

Po zainstalowaniu i aktywacji wystarczy przejść do Wygląd > Login Customizer , gdzie możesz uruchomić panel dostosowania.

Opcje tej wtyczki są całkiem niezłe i pozwalają dostosować takie rzeczy jak:

• Ustaw logo, aby pojawiało się zamiast domyślnego logo WordPress.
• Ustaw tło dla całej strony logowania.
• Ustaw tło dla samego formularza.
• Dostosuj stylizację formularza i każdy najmniejszy szczegół (czcionki, rozmiary, kolory, pola).
• Zainstaluj dodatek zabezpieczający, aby uzyskać dodatkowe pole captcha w formularzu (świetnie zapobiega logowaniu się / botom spamowym).

Na przykład kilka minut pracy z wtyczką i mam taki wynik:

Kolejna opcja wtyczki

Inną niestandardową wtyczką do strony logowania, na którą warto zwrócić uwagę, jest: Projektant logowania. Ta wtyczka ma na celu bardzo łatwe dostosowywanie strony logowania WordPress, a jednocześnie zapewnia elastyczność w projektowaniu.

Jednym ze sposobów, w jaki osiąga się łatwość użytkowania, jest zapoznanie się z procesem dostosowywania. Wszystkie opcje i narzędzia są zintegrowane bezpośrednio z konfiguratorem WordPress. Jeśli więc przywykłeś do zmiany opcji motywu za pomocą narzędzia Customizer, poczujesz się jak w domu.

Obejrzyj ten film, aby dowiedzieć się, jak działa wtyczka.

Instrukcja czy za pomocą wtyczki ?

Jaka jest twoja metoda wyboru? Czy wolisz kodować rzeczy ręcznie, czy wszystko jest obsługiwane przez wtyczkę? Zapraszam do udostępniania.