Jak utworzyć stronę logowania w WordPress bez korzystania z wtyczki?

Szukasz najlepszego sposobu na stworzenie strony logowania w WordPressie bez wtyczki i bez dostosowywania domyślnej strony logowania WordPress? Jeśli chcesz utworzyć stronę logowania w WordPress bez korzystania z popularnych wtyczek do logowania WordPress, możesz to zrobić, dodając kod logowania w krótkim kodzie lub w niestandardowym szablonie strony.

W tym samouczku zademonstruję, jak utworzyć stronę logowania w WordPressie za pomocą funkcji shortcode, a także jak utworzyć stronę logowania w WordPressie za pomocą funkcji logowania w niestandardowym szablonie strony.

Każdy z tych sposobów powinien bezproblemowo współpracować z dowolnym motywem WordPress lub dowolnym środowiskiem hostingowym WordPress.

Utwórz stronę logowania w WordPress bez wtyczki

Celem tego samouczka jest pomoc w stworzeniu strony logowania, takiej jak domyślny login WordPress, który umożliwia dostęp do pulpitu WordPress po zalogowaniu.

Idealnie, ta niestandardowa strona logowania powinna być stroną logowania frontendu, na której logują się użytkownicy Twojej witryny. Jak wspomniałem we wstępie, w tym samouczku omówimy dwa sposoby;

1. Skrócony kod strony logowania
2. Logowanie do niestandardowego szablonu strony

Utwórz krótki kod strony logowania

Pierwszym krokiem, kiedy chcemy utworzyć stronę logowania w dowolnym miejscu na WordPressie, jest użycie krótkiego kodu. Krótki kod można dodać do dowolnej strony lub dowolnego postu, a nawet widżetu i niestandardowego szablonu strony.

W tym kroku stworzymy krótki kod do formularza logowania, który posłuży do opublikowania formularza logowania na dowolnej stronie w WordPressie lub w poście. Takie podejście daje użytkownikowi elastyczność tworzenia strony logowania w dowolnej sekcji swojej witryny.

Do stworzenia shortcode użyjemy następującego kodu:

 // Utwórz krótki kod formularza logowania

funkcja njengah_add_login_shortcode() {

                add_shortcode( 'njengah-login-form', 'njengah_login_form_shortcode' );

}

Dodaliśmy krótki kod do funkcji, aby móc go później zainicjować. Funkcja add_shortcode tworzy krótki kod w WordPressie. Ogólne wyrażenie funkcji add_shortcode() jest następujące:

 add_shortcode( string $tag, wywoływalne $callback )

Jak widać ta funkcja ma dwa parametry, które są następujące:

 //Krok 2: Krótkie wywołanie zwrotne
funkcja njengah_login_form_shortcode() {
	
	jeśli (is_user_logged_in())
		
	return '<p>Witamy. Jesteś zalogowany!</p>'; ?> 
		
<div class ="njengah-samouczek-logowania" >  
		
	<?php return wp_login_form( 
		szyk( 
			'echo' => fałsz ,
			'label_username' => __( 'Twoja nazwa użytkownika ' ),
			'label_password' => __( 'Twoje hasło' ),
			'label_remember' => __( 'Zapamiętaj mnie' )
			        )
	); ?> 
		
            </div>
  <?php 
   }

Jeśli uważnie sprawdzisz kod, zauważysz, że użyliśmy funkcji sprawdzania, czy użytkownik jest zalogowany, tak jak wyjaśniłem w poście o tym, jak sprawdzić, czy użytkownik jest zalogowany w WordPressie .

Jeśli użytkownik nie jest zalogowany, do wyświetlenia formularza logowania używamy funkcji wp_login_form(). Jeśli użytkownik jest zalogowany, warunkowo wyświetlamy wiadomość powitalną na tej stronie zamiast pokazywać formularz logowania.

Funkcja WP wp_login_form()

Wp_login_form() to funkcja WordPress, która zapewnia programistom motywów możliwość wyświetlania formularza WordPress w dowolnym miejscu. Funkcję tę można ogólnie wyrazić w następujący sposób:

 wp_login_form( array $args = array() )

$args może być tablicą opcji, które kontrolują sposób wyświetlania formularza.

Poniżej przedstawiono argumenty, których można użyć w tablicy, aby zmienić sposób wyświetlania formularza.

Na przykład możesz ustawić tablicę argumentów i przekazać ją do tej funkcji w następujący sposób:

 <?php 

wp_login_form( 

	 szyk(
			'echo' => prawda,
			// Domyślna wartość „przekierowania” przenosi użytkownika z powrotem do identyfikatora URI żądania.
			'redirect' => ( is_ssl() ? 'https://' : 'http://' ). $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
			'form_id' => 'loginform',
			'label_username' => __( 'Twoja nazwa użytkownika' ),
			'label_password' => __( 'Twoje hasło' ),
			'label_remember' => __( 'Zapamiętaj mnie' ),
			'label_log_in' => __( 'Zaloguj się' ),
			'id_username' => 'user_login',
			'id_password' => 'user_pass',
			'id_remember' => 'zapamiętaj mnie',
			'id_submit' => 'wp-wyślij',
			'zapamiętaj' => prawda,
			'value_username' => '',
			// Ustaw 'value_remember' na true domyślnie pole wyboru "Zapamiętaj mnie" do zaznaczenia.
			'value_remember' => fałsz,
		);
		
); ?>

Formularz zostanie wyświetlony z nowymi etykietami dodanymi do tablicy, w przeciwieństwie do domyślnych etykiet formularza logowania WordPress. W powyższym kodzie zmieniłem nazwę użytkownika na Twoją Nazwę Użytkownika i hasło na Twoje Hasło.

Po utworzeniu shortcode i funkcji zwrotnej musimy go zainicjować, abyśmy mogli teraz używać shortcode w dowolnym miejscu w poście lub na stronie WordPress, aby dodać niestandardowy formularz logowania.

Poniżej znajduje się kod, który zainicjuje shortcode formularza logowania:

 //Krok 3: Uruchom funkcję shortcode!

add_action( 'init', 'njengah_add_login_shortcode' );

Pełny fragment kodu do utworzenia formularza logowania Shortcode w WordPress

Teraz możemy połączyć wszystkie te fragmenty kodu w jeden fragment kodu i dodać kod do functions.php aktywnego motywu WordPress, a następnie wyświetlić formularz logowania do WordPressa za pomocą shortcode – [njengah-login-form].

Poniżej znajduje się pełny fragment kodu, który należy dodać do pliku functions.php, aby dodać krótki kod formularza logowania WordPress:

 /**
 * Utwórz niestandardowy formularz logowania WordPress bez wtyczki [ Formularz logowania WordPress Shortcode ] 
 * @autor Joe Njengah 
 * @ gist - https://gist.github.com/Njengah/fa96025717308df1b979e77e5da3eef2
 */ 


// Krok 1: Utwórz krótki kod
funkcja njengah_add_login_shortcode() {
	add_shortcode( 'jay-login-form', 'njengah_login_form_shortcode' );
}

//Krok 2: Krótkie wywołanie zwrotne
funkcja njengah_login_form_shortcode() {
	
	jeśli (is_user_logged_in())
		
		return '<p>Witamy. Jesteś zalogowany!</p>'; ?> 
		
		<div class ="njengah-samouczek-logowania" >  
		
			<?php return wp_login_form( 
							szyk( 
								'echo' => fałsz ,
								'label_username' => __( 'Twoja nazwa użytkownika ' ),
								'label_password' => __( 'Twoje hasło' ),
								'label_remember' => __( 'Zapamiętaj mnie' )
			              )
			); ?> 
		
		</div>
  <?php 
   }

//Krok 3: Uruchom funkcję shortcode!
add_action( 'init', 'njengah_add_login_shortcode' );

//Krok 4: Użyj shortcode [njengah-login-form], aby osadzić formularz logowania na stronie lub poście 

Kiedy dodasz ten kod do functions.php, powinieneś utworzyć stronę logowania i dodać krótki kod [njengah-login-form], aby opublikować formularz logowania. Formularz logowania powinien wyglądać tak, jak pokazano na poniższym obrazku:

Stylizacja formularza logowania WordPress

Dodałem następujące style, aby formularz logowania był atrakcyjny i przyjął projekt motywu, którego używam:

 .njengah-poradnik-logowania {
    tło: #6379a4;
    wypełnienie: 20px;
    maksymalna szerokość: 70%;
    margines: 0 auto;
    kolor: #fff;
}

etykieta .login-hasło {
    margines prawy: 120px;
}

.Login nazwa użytkownika {
    dopełnienie górnej części: 30px;
}

Utwórz niestandardowy szablon strony logowania

Alternatywnym sposobem utworzenia strony logowania w WordPress bez wtyczki jest utworzenie niestandardowego szablonu strony i użycie funkcji wp_login_form() do opublikowania formularza logowania na tej stronie.

Poniżej znajduje się kod do tworzenia niestandardowej strony logowania, która znajduje się w niestandardowym szablonie strony:

 <?php
/**
 * Nazwa szablonu: Strona logowania 
 */
 
 pobierz_nagłówek(); 
 
 
 jeśli (is_user_logged_in()){
	 
	     echo '<p>Witamy. Jesteś zalogowany!</p>'; 
		 
 }w przeciwnym razie{ 
	 
	 wp_login_form( 

		 szyk(
				'echo' => prawda,
				// Domyślna wartość „przekierowania” przenosi użytkownika z powrotem do identyfikatora URI żądania.
				'redirect' => ( is_ssl() ? 'https://' : 'http://' ). $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
				'form_id' => 'loginform',
				'label_username' => __( 'Twoja nazwa użytkownika' ),
				'label_password' => __( 'Twoje hasło' ),
				'label_remember' => __( 'Zapamiętaj mnie' ),
				'label_log_in' => __( 'Zaloguj się' ),
				'id_username' => 'user_login',
				'id_password' => 'user_pass',
				'id_remember' => 'zapamiętaj mnie',
				'id_submit' => 'wp-wyślij',
				'zapamiętaj' => prawda,
				'value_username' => '',
				// Ustaw 'value_remember' na true domyślnie pole wyboru "Zapamiętaj mnie" do zaznaczenia.
				'value_remember' => fałsz,
			)
						
		);
    }			
	
pobierz_stopkę();		
				

Zapisz ten kod w pliku i nazwij go login-page.php i upewnij się, że jest zapisany w folderze głównym twojego motywu WordPress.

Utwórz nową stronę, a zobaczysz, że szablon logowania jest teraz dostępny w opcji szablonu atrybutów strony, jak pokazano poniżej:

Wybierz szablon i opublikuj stronę. Po sprawdzeniu frontendu powinieneś zobaczyć formularz logowania dla użytkowników, którzy nie są zalogowani, a wiadomość powitalna jest wyświetlana dla użytkowników, którzy są zalogowani.

Wniosek

W tym poście opisałem dwa sposoby dodania formularza logowania na stronie WordPress. Możesz użyć funkcji shortcode, aby utworzyć krótki kod formularza logowania WordPress lub możesz użyć niestandardowego szablonu strony, aby utworzyć stronę logowania w WordPress bez wtyczki. Mam nadzieję, że możesz teraz zaimplementować jedną z tych metod, aby utworzyć niestandardowy formularz logowania do frontendu w swojej witrynie WordPress.

Podobne artykuły

1. Jak utworzyć paginację WordPress dla niestandardowych typów postów
2. 30 najlepszych wtyczek zabezpieczających WordPress, które chronią Twoją witrynę
3. Jak programowo utworzyć stronę w WordPress
4. Jak uzyskać dostęp do pulpitu nawigacyjnego WordPress lub zalogować się do pulpitu nawigacyjnego WordPress?
5. Jak utworzyć stronę otrzymanych zamówień niestandardowych WooCommerce
6. Jak podłączyć Printful do WooCommerce
7. Jak zaktualizować rozszerzenia WooCommerce
8. Jak dodać pole wyszukiwania na górze motywu witryny Storefront?
9. 40+ najlepszych wtyczek do formularzy kontaktowych WordPress dla łatwego kontaktu
10. Jak usunąć nieskategoryzowaną kategorię w WordPress WooCommerce
11. Jak usunąć pasek boczny ze strony WordPress lub ukryć pasek boczny WordPress?
12. Jak utworzyć niestandardową paginację zapytań w WordPressie na przykładzie?
13. WooCommerce vs Magento: która jest najlepsza platforma e-commerce?
14. Jak wykonać kopię zapasową bazy danych WooCommerce
15. Top 30+ najlepszych wtyczek do formularzy WordPress » Najlepsza wtyczka do formularzy WordPress
16. Jak utworzyć oddzielne strony logowania i rejestracji w WooCommerce?
17. 35+ najlepszych darmowych wtyczek WordPress
18. Jak przeprowadzić migrację z Shopify do WooCommerce