Créez un widget de connexion et d'enregistrement WordPress à onglets

Les plats clés

• L'article fournit un guide détaillé sur la façon de créer un widget de connexion et d'enregistrement WordPress personnalisé, qui peut mieux refléter la conception et la marque d'un client ou d'un développeur Web par rapport aux pages WordPress par défaut.
• Le widget est construit à l'aide de la bibliothèque Quickflip JQuery pour créer un effet de retournement entre les onglets de connexion et d'enregistrement. Le formulaire d'inscription comprend un nom d'utilisateur, un mot de passe et un champ de messagerie, tandis que le formulaire de connexion n'a pas de captcha.
• L'auteur traverse le processus de création du widget, y compris l'activation de la tampon de sortie, l'extension de la classe WP_Widget standard, la création d'une classe d'enfants et l'enregistrement du widget. L'article explique également comment créer du code HTML pour les formulaires de connexion et d'enregistrement, de gérer le nouvel enregistrement des utilisateurs, de connecter les utilisateurs et de créer le formulaire de paramètres de widget back-end.
• L'article répond également à plusieurs questions fréquemment posées sur la création d'un widget de connexion et d'enregistrement WordPress à onglets, y compris comment personnaliser le widget, l'ajouter sans codage, résoudre les problèmes avec l'accès à l'administrateur WordPress, ajouter un formulaire de connexion à la barre latérale WordPress, Modifier l'URL de connexion WordPress par défaut, assurer la sécurité du widget, ajouter un formulaire d'inscription à la barre latérale, résoudre les problèmes avec le widget qui ne fonctionne pas correctement et ajouter la connexion sociale options.

Au cours des dernières années, il y a eu une demande croissante pour un widget d'enregistrement personnalisé pour WordPress. Il existe un manque de respect sain pour les pages de connexion et d'enregistrement par défaut WordPress, uniquement parce qu'ils ne sont pas intuitifs car ils peuvent ne pas refléter la conception et l'image de marque d'un client ou d'un développeur Web.

Pour résoudre ce problème, quelques développeurs ont publié plusieurs types de pages de connexion et d'enregistrement, mais les bonnes ont un prix et ils ne sont pas bon marché.

Cependant, si vous avez été sur la clôture ou que vous êtes déçu globalement de ce qui est disponible gratuitement sur le référentiel de plugin WordPress, vous pouvez faire en sorte que votre esprit soit soulevé parce que vous pouvez apprendre à créer un widget WordPress et un widget WordPress à onglets gratuitement! Vous n'avez qu'à sacrifier une courte période de votre temps pour comprendre l'ensemble du processus. Une fois que vous avez acquis les connaissances, ce qui est assez simple; Vous devriez avoir une page d'enregistrement riche en fonctionnalités sur vos sites propulsés par WordPress.

Dans cet article, nous créerons un widget de connexion et de formulaire d'enregistrement simple avec un effet de retournement rendu possible par la bibliothèque Quickflip JQuery.

Si vous souhaitez sauter avant le tutoriel, vous pouvez afficher une démo du widget de connexion et d'enregistrement et télécharger le plugin de widget.

Pour garder les choses simples, le formulaire d'inscription consistera en un nom d'utilisateur, un mot de passe et un champ de messagerie. Le formulaire de connexion ne contiendra pas de captcha.

sans plus tarder, commençons avec le développement du widget.

Développement du widget

Tout d'abord, incluez l'en-tête du plugin.

<span><span><?php </span></span><span><span>/*
</span></span><span><span>Plugin Name: Tabbed Login Registration Widget
</span></span><span><span>Plugin URI: https://www.sitepoint.com
</span></span><span><span>Description: A tabbed login and registration widget for WordPress
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>License: GPL2
</span></span><span><span>*/</span></span></span>

Avant d'entrer correctement dans le développement du widget, nous devons activer la mise en mémoire tampon de sortie pour éviter tout avertissement: ne peut pas modifier les informations d'en-tête - les en-têtes déjà envoyées par erreur.

<span>// Turn on output buffering
</span><span>ob_start();</span>

Pour créer un widget WordPress, étendez la classe WP_Widget standard, incluez les méthodes nécessaires et enfin, enregistrez le widget.

Créez une classe d'enfants étendant la classe WP_Widget.

<span>class Tab_Login_Registration extends WP_Widget {</span>

La propriété statique $ login_registration_status enregistrera les messages d'erreur générés par le formulaire d'enregistrement et de connexion.

<span>static private $login_registration_status;</span>

Donnez au widget un nom et une description en utilisant la méthode magique __Construct ().

<span>/**
</span><span>	 * Register widget with WordPress.
</span><span>	 */
</span>	<span>function __construct() {
</span>		<span><span>parent::</span>__construct(
</span>			<span>'tab_login_registration', // Base ID
</span>			<span>__( 'Tabbed Login Registration Widget', 'text_domain' ), // Name
</span>			<span>array( 'description' => __( 'A tabbed login and registration widget for WordPress', 'text_domain' ), ) // Args
</span>		<span>);
</span>	<span>}</span>

Deux méthodes - login_form () et registration_form () - qui renvoie le code HTML pour le formulaire de connexion et d'enregistrement sera créé pour réutiliser plus tard.

<span>/**
</span><span>	 * Returns the HTML for the login form
</span><span>	 * <span>@return <span>string</span>
</span></span><span>	 */
</span>	<span>static function login_form() {
</span>		<span>$html = '<form method="post" action="'%20.%20esc_url(%20%24_SERVER%5B'REQUEST_URI'%5D%20)%20.%20'">';
</form></span>		<span>$html .= '<input type="text" name="login_username" placeholder="Username"><br>';
</span>		<span>$html .= '<input type="password" name="login_password" placeholder="Password"><br>';
</span>		<span>$html .= '<input type="checkbox" name="remember_login" value="true" checked> Remember Me<br>';
</span>		<span>$html .= '<input type="submit" name="login_submit" value="Login"><br>';
</span>		<span>$html .= '';
</span>
		<span>return $html;
</span>
	<span>}</span>

<span>/**
</span><span>	 * Returns the HTML code for the registration form
</span><span>	 * <span>@return <span>string</span>
</span></span><span>	 */
</span>	<span>static function registration_form() {
</span>		<span>$html = '<form method="post" action="'%20.%20esc_url(%20%24_SERVER%5B'REQUEST_URI'%5D%20)%20.%20'">';
</form></span>		<span>$html .= '<input type="text" name="registration_username" placeholder="Username"><br>';
</span>		<span>$html .= '<input type="password" name="registration_password" placeholder="Password"><br>';
</span>		<span>$html .= '<input type="email" name="registration_email" placeholder="Email"><br>';
</span>		<span>$html .= '<input type="submit" name="reg_submit" value="Sign Up"><br>';
</span>		<span>$html .= '';
</span>
		<span>return $html;
</span>	<span>}</span>

Le registre_user () ci-dessous gère l'enregistrement d'un nouvel utilisateur.

<span>/**
</span><span>	 * Register new users
</span><span>	 */
</span>	<span>function register_user() {
</span>
		<span>if ( isset( $_POST['reg_submit'] ) ) {
</span>
			<span>$username = esc_attr( $_POST['registration_username'] );
</span>			<span>$password = esc_attr( $_POST['registration_password'] );
</span>			<span>$email    = esc_attr( $_POST['registration_email'] );
</span>
			<span>$register_user = wp_create_user( $username, $password, $email );
</span>
			<span>if ( $register_user && ! is_wp_error( $register_user ) ) {
</span>
				<span><span>self::</span>$login_registration_status = 'Registration completed.';
</span>			<span>} elseif ( is_wp_error( $register_user ) ) {
</span>				<span><span>self::</span>$login_registration_status = $register_user->get_error_message();
</span>			<span>}
</span>
		<span>}
</span>	<span>}</span>

Voici comment la méthode enregistre un nouvel utilisateur.

Tout d'abord, nous nous assurons que l'utilisateur enregistre réellement un compte. Cela se fait en détectant que le bouton «Inscrivez» a été cliqué, c'est-à-dire $ _post ['reg_submit'] a été défini.

Les données de formulaire sont ensuite échappées pour les attributs HTML à l'aide de la fonction ESC_ATTR.

Le nom d'utilisateur, le mot de passe et le courrier électronique entré par l'utilisateur sont ensuite transmis à la fonction WP_Create_User () pour insérer le nouvel utilisateur dans la base de données WordPress.

Si tout se passe bien, la propriété $ login_registration_status sera définie sur l'enregistrement du texte terminé sinon l'erreur renvoyée par wp_create_user () sera sa valeur.

Lorsque le formulaire de connexion est soumis, la fonction login_user () ci-dessous se connecte à l'utilisateur.

<span>/**
</span><span>	 * Login registered users
</span><span>	 */
</span>	<span>function login_user() {
</span>		<span>if ( isset( $_POST['login_submit'] ) ) {
</span>
			<span>$creds                  = array();
</span>			<span>$creds['user_login']    = esc_attr( $_POST['login_username'] );
</span>			<span>$creds['user_password'] = esc_attr( $_POST['login_password'] );
</span>			<span>$creds['remember']      = esc_attr( $_POST['remember_login'] );
</span>
			<span>$login_user = wp_signon( $creds, false );
</span>
			<span>if ( ! is_wp_error( $login_user ) ) {
</span>				<span>wp_redirect( home_url( 'wp-admin' ) );
</span>			<span>} elseif ( is_wp_error( $login_user ) ) {
</span>				<span><span>self::</span>$login_registration_status = $login_user->get_error_message();
</span>			<span>}
</span>		<span>}
</span>	<span>}</span>

Permettez-moi d'expliquer comment Login_user () Connectez-vous aux utilisateurs à WordPress.

Similaire au registre_user () susmentionné, nous nous assurons d'abord que l'utilisateur essaie de se connecter en vérifiant si $ _post ['login_submit'] a été défini.

Un tableau associé $ crédits des informations d'identification de connexion entrés par l'utilisateur est créé.

Le tableau associatif est ensuite transmis à wp_signon pour l'authentification.

Si l'identification est considérée comme valide et par wp_signon, l'utilisateur sera redirigé vers le tableau de bord WordPress par wp_redirect sinon la propriété $ login_registr_status est définie sur l'erreur générée par la connexion.

Le formulaire de paramètres de widget back-end est créé par la méthode Form () qui consistera en un champ qui contiendra le titre du widget.

public function form( $instance ) {
		if ( isset( $instance['title'] ) ) {
			$title = $instance['title'];
		} else {
			$title = __( 'Login / Registration', 'text_domain' );
		}
		?>
		<span><span><span><p>></p></span>
</span>			<span><span><span><label> for<span>="<span><?php echo $this->get_field_id( 'title' ); ?></span>"</span>></label></span><span><?php _e( 'Title:' ); ?></span><span><span></span>></span>
</span>			<span><span><span><input> class<span>="widefat"</span> id<span>="<span><?php echo $this->get_field_id( 'title' ); ?></span>"</span>
</span></span><span>			       <span>name<span>="<span><?php echo $this->get_field_name( 'title' ); ?></span>"</span> type<span>="text"</span>
</span></span><span>			       <span>value<span>="<span><?php echo esc_attr( $title ); ?></span>"</span>></span>
</span>		<span><span><span></span>></span>
</span>	<span><span><?php </span></span><span>	<span>}</span></span></span></span></span></span>

Lorsque le titre du widget est entré dans le champ de formulaire, la méthode Update () désinfecte et enregistre les données de la base de données pour la réutilisation.

<span>public function update( $new_instance, $old_instance ) {
</span>		<span>$instance          = array();
</span>		<span>$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
</span>
		<span>return $instance;
</span>	<span>}</span>

La méthode widget () affiche le formulaire de connexion et d'enregistrement à l'onglet à l'arrière de WordPress.

<span><span><?php </span></span><span><span>/*
</span></span><span><span>Plugin Name: Tabbed Login Registration Widget
</span></span><span><span>Plugin URI: https://www.sitepoint.com
</span></span><span><span>Description: A tabbed login and registration widget for WordPress
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>License: GPL2
</span></span><span><span>*/</span></span></span>

Code Explication: Le code JavaScript ajoute l'effet de tabbing et de retournement au widget.

Les login_user () et registre_user () sont inclus pour connecter respectivement un utilisateur enregistré ou enregistrer un nouvel utilisateur.

Les méthodes statiques login_form () et registration_form () sont appelées pour afficher le formulaire de connexion et d'enregistrement.

Enfin, nous fermons la classe Widget.

<span>// Turn on output buffering
</span><span>ob_start();</span>

La classe de widget TAB_LOGIN_RESSIGRATION doit être enregistrée à l'aide du crochet widgets_init afin qu'il soit reconnu par WordPress internes.

<span>class Tab_Login_Registration extends WP_Widget {</span>

Nous devons encore inclure JQuery, le widget CSS et Quickflip Library pour obtenir l'onglet et l'effet de retournement dans le widget fonctionnant.

Le jQuery et Quickflip JavaScript ainsi que les CSS sont inclus / ENQUEUe à l'en-tête de WordPress par WP_enqueue_style et WP_ENQUEUE_Script.

<span>static private $login_registration_status;</span>

Nous avons terminé en codant le widget de connexion et d'enregistrement.

Vous trouverez ci-dessous une capture d'écran du widget.

Afficher une démo du widget.

enveloppent

Pour mieux comprendre comment le widget a été construit et comment l'implémenter sur votre site WordPress, téléchargez le plugin Widget, qui comprend les fichiers jQuery, Quickflip et Widget Stylesheet.

Si vous avez des questions ou des suggestions d'amélioration du code, faites-le moi savoir dans les commentaires.

Les questions fréquemment posées sur la construction d'un widget de connexion et d'enregistrement WordPress à onglets

Comment puis-je personnaliser l'apparence de mon widget de connexion et d'enregistrement WordPress?

Personnalisation de l'apparence de votre wondget et de votre widget d'enregistrement WordPress peut être effectué via CSS. Vous pouvez ajouter votre propre CSS dans le personnalisateur WordPress ou dans le fichier style.css de votre thème. Vous pouvez modifier les couleurs, les polices, les tailles et plus encore pour correspondre à la conception de votre site Web. N'oubliez pas de toujours sauvegarder votre site avant d'apporter des modifications au code.

Puis-je ajouter un widget de connexion et d'enregistrement à mon site WordPress sans codage?

Oui, vous pouvez ajouter une connexion et un enregistrement Widget sur votre site WordPress sans codage. Il existe plusieurs plugins disponibles qui vous permettent de le faire. Certaines options populaires incluent le widget de la barre latérale de connexion et l'enregistrement des utilisateurs et le profil utilisateur. Ces plugins offrent des interfaces et des options de personnalisation faciles à utiliser.

Que dois-je faire si je ne peux pas accéder à mon admin WordPress après avoir ajouté un widget de connexion et d'enregistrement?

Si vous le pouvez ' t Accédez à votre admin WordPress après avoir ajouté un widget de connexion et d'enregistrement, vous devrez peut-être désactiver le plugin, ce qui a causé le problème. Vous pouvez le faire en accédant aux fichiers de votre site via FTP et en renommant le dossier du plugin. Une fois que vous avez fait cela, essayez de vous connecter à nouveau. Si vous rencontrez toujours des problèmes, vous devrez peut-être contacter votre fournisseur d'hébergement ou demander de l'aide auprès d'un expert WordPress.

Comment puis-je ajouter un formulaire de connexion à ma barre latérale WordPress?

L'ajout d'un formulaire de connexion à votre barre latérale WordPress peut être effectué à l'aide d'un widget. Accédez à Apparence> widgets dans votre tableau de bord WordPress et faites glisser le widget Meta vers votre barre latérale. Le widget Meta comprend un lien de connexion qui affichera un formulaire de connexion lorsque vous cliquez sur.

Puis-je modifier mon URL de connexion WordPress par défaut?

Oui, vous pouvez modifier votre URL de connexion WordPress par défaut pour des raisons de sécurité . Cela peut être fait à l'aide d'un plugin comme WPS Master la connexion ou manuellement en modifiant le fichier .htaccess de votre site. N'oubliez pas de noter votre nouvelle URL de connexion et de le protéger.

Y a-t-il d'autres plugins que je peux utiliser pour ajouter un widget de connexion à mon site WordPress?

Oui, il existe de nombreux plugins disponibles qui vous permettent d'ajouter un widget de connexion à votre site WordPress. Certaines options populaires incluent le personnalisateur de page de connexion personnalisé, le concepteur de connexion et le thème de mon connexion. Ces plugins offrent une variété de fonctionnalités et d'options de personnalisation.

Comment puis-je assurer la sécurité de mon widget de connexion et d'enregistrement WordPress?

pour assurer la sécurité de votre widget de connexion et d'enregistrement WordPress, faire, faire assurez-vous d'utiliser un mot de passe solide et unique et de garder votre site WordPress et vos plugins à jour. Vous pouvez également utiliser des plugins de sécurité comme WordFence ou Succuri pour ajouter une couche de protection supplémentaire.

Puis-je ajouter un formulaire d'enregistrement à ma barre latérale WordPress?

Oui, vous pouvez ajouter un formulaire d'enregistrement à Votre barre latérale WordPress à l'aide d'un widget. Il existe plusieurs plugins disponibles qui vous permettent de le faire, tels que l'enregistrement des utilisateurs et le profil utilisateur. Ces plugins offrent des interfaces et des options de personnalisation faciles à utiliser.

Que dois-je faire si mon widget de connexion et d'enregistrement ne fonctionne pas correctement?

Si votre widget de connexion et d'enregistrement ne fonctionne pas correctement , essayez de désactiver et de réactiver le plugin. Si cela ne résout pas le problème, ce peut être un conflit avec un autre plugin ou votre thème. Essayez de désactiver les autres plugins un par un pour voir si le problème est résolu. Sinon, vous devrez peut-être contacter le support du plugin ou demander l'aide d'un expert WordPress.

Puis-je ajouter des options de connexion sociales à mon widget de connexion et d'enregistrement WordPress?

Oui, vous pouvez ajouter Options de connexion sociale à votre widget de connexion et d'enregistrement WordPress. Il existe plusieurs plugins disponibles qui vous permettent de le faire, comme la connexion sociale NEXTEND et la connexion sociale WP. Ces plugins permettent aux utilisateurs de s'inscrire et de se connecter à l'aide de leurs comptes de médias sociaux, ce qui rend le processus plus rapide et plus facile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!