Wordpress: étape par étape comment créer leurs propres informations de connexion
Vendredi, Octobre 24, 2008 Dans ce tutoriel, nous allons voir comment créer une procédure de login d'accès personnel, en utilisant également des fonctionnalités Ajax utilisant jQuery. Il existe plusieurs façons de personnaliser le login de WordPress, par exemple grâce à l'utilisation de crochets et de filtres add_action() add_filter() Ici nous allons utiliser un niveau plus faible, bien qu'il y ait toujours l'interface au noyau de WordPress. En outre, nous ferons en sorte de valider un utilisateur via l'e-mail dupla / mot de passe.
Pourquoi créer leurs propres informations de connexion?
- Dans certains contextes, il mai ont le plus de contrôle d'Intérêt Retour à la page de connexion, de proposer une mise en page personnalisée à nos utilisateurs enregistrés. Vous pouvez également enrichir la page avec des informations utiles, à partir d'un logo pour le classique «Vous avez oublié votre mot de passe?
- Pour permettre l'accès via le courrier électronique (comme dans l'exemple traité ici) au lieu de
user_loginWordpress Standard - Pour avoir l'opportunité d'entrer dans un panneau de connexion dans la barre latérale de notre blog
- Et enfin, pour avoir un squelette - et une idée - pour un grand plugin

Environnement
Dans notre exemple / tutorial se pencheront sur la racine de WordPress dans un mylogin Créez deux fichiers PHP dans ce dossier: index.php et logon.php La première contiendra l'interface de notre journal, avec toutes les fonctions Javascript / jQuery nous avons besoin. Le second fichier, logon.php contiendra le code pour valider l'utilisateur. Ensuite, créez un css dossier et le contenu de ce layout.css fichier et une images Dans le dossier images mettra un chargeur classique Ajax: créez-le en ligne AjaxLoad.info. La fin vous devez avoir:
- MyLogin
- index.php
- logon.php
- css
- layout.css
- images
- Ajax-loader.gif
index.php
Ce fichier montre la forme d'accès grâce à un form de input les deux input e-mail et mot de passe:
- "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- "http://www.w3.org/1999/xhtml" > <html Xmlns = "http://www.w3.org/1999/xhtml">
- <Head>
- equiv = "Content-Type" content = "text/html; charset=utf-8" /> <Meta Http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
- myLogin Demo </ title > <Titre> MyLogin Demo </ title>
- "text/javascript" src = "http://www.google.com/jsapi" ></ script > <script Type = "text / javascript" src = "http://www.google.com/jsapi"> </ script>
- "text/javascript" > google . load ( "jquery" , "1.2.6" ) ;</ script > <script Type = "text / javascript">. Google Load ( "jquery", "1.2.6") </ script>
- "text/javascript" > <script Type = "text / javascript">
- <! --
- google. setOnLoadCallback (
- function () (
- / / Met l'accent sur la première entrée lorsque la page est
- / / Charge
- "mylogin" ] . email . focus ( ) ; document. Formulaires [ "MyLogin"]. e-mail. focus ();
- )
- )
- / **
- * L'affichage des informations d'erreur / d'avertissement sur notre
- * Formulaire de connexion
- * /
- str ) { showError function (str) (
- ) . html ( '<h2>' + str + '</h2>' ) . slideDown ( ) ; $ ( 'Div # error'). Html ( '<h2>' + str + '</ h2>'). SlideDown ();
- )
- / **
- * Validation des données fournies dans le formulaire de connexion. Si tous
- * Est-ce correct, les données seront envoyées à la page logon.php
- * Grâce à Ajax
- *
- * @ Author Giovambattista Fazioli
- * @ Undolog.com Email@g.fazioli
- * @ Http://www.undolog.com Web
- * /
- checkLogin function () (
- document . forms [ "mylogin" ] ; var f = document. Formulaires [ "MyLogin"];
- ^ ( [ \w - ] + ( ? : \ . [ \w - ] + ) * ) @ ( ( ? : [ \w - ] + \ . ) * \w [ \w - ] { 0 , 66 } ) \ . ( [ a - z ] { 2 , 6 } ( ? : \ . [ a - z ] { 2 } ) ? ) $ / i ; var __filter = / ^ ([\ w -] + (?: \. [\ w -] +) *) @ ((?: [\ w -] + \.) * \ [W \ w -] (0 , 66)) \. ([A - Z] (2, 6) (?: \. [a - z] (2))?) $ / i;
- / /
- ) . slideUp ( $ Div # Error ( ''). SlideUp (
- function () (
- / /
- f . email . value == '' ) { if (f. e-mail. =='') valeur (
- ) ; showError ( 'Vous n'avez pas saisi l \' email ');
- focus ( ) ; f. e-mail. focus ();
- ; return false;
- )
- ! __filter . test ( f . email . value ) ) { if (! __filter. essai (f. e-mail. value)) (
- ) ; ( 'showError Le champ email est invalide');
- select ( ) ; f. e-mail. select ();
- focus ( ) ; f. e-mail. focus ();
- ; return false;
- )
- f . password . value == '' ) { if (mot de passe f.. =='') valeur (
- ) ; showError ( 'Vous n'avez pas entré le mot de passe');
- focus ( ) ; f. mot de passe. focus ();
- ; return false;
- )
- ) . show ( 'slow' ) ; $ ( 'Div # ajax-loader »). Show (' slow ');
- ) . css ( 'cursor' , 'wait' ) ; $ ( 'Body'). Css ( 'cursor', 'wait');
- / / Envoie les données à logon.php POST via AJAX
- 'logon.php' , { email : f . email . value , password : f . password . value } , $. Post ( 'logon.php', (e-mail: F. Email. Valeur, mot de passe: F. mot de passe. Value),
- data ) { données function () (
- ) . hide ( 'slow' ) ; $ ( 'Div # ajax-loader »). Hide (' slow ');
- ) . css ( 'cursor' , 'default' ) ; $ ( 'Body'). Css ( 'cursor', 'default');
- data ) { commutateur de données () (
- : case '0 ':
- / / Accès autorisé
- href = 'http://mioblog.com/' ; document. emplacement. href = 'http://mioblog.com/';
- break;
- : case '-1':
- ) ; showError ( 'Accès refusé. Email ou mot de passe incorrect');
- break;
- : case '-2':
- ) ; données showError Wrong ( ': Tentative de Hack');
- break;
- )
- )
- )
- / / Cut-off Soumettre
- ; return false;
- )
- )
- ; return false;
- )
- / / ->
- </ Script>
- "stylesheet" href = "css/layout.css" type = "text/css" media = "screen, projection" /> <link Rel = "stylesheet" href = "css / layout.css" type = "text / css" media = "screen, projection" />
- </ Head>
- <Body>
- "login" > <div Id = "login">
- "logo" >< h1 title = "myLogin" >< span > myLogin </ span ></ h1 ></ div > <div Id = "logo"> <h1 title = "myLogin"> <span> myLogin </ span> </ h1> </ div>
- "error" style = "display:none" >< h2 >...</ h2 ></ div > <div Id = "error" style = "display: none"> <h2> ...</ h2> </ div>
- "mylogin" name = "mylogin" method = "post" action = "logon.php" onsubmit = "return( checkLogin() )" > <form Id = "MyLogin" name = "MyLogin" method = action'post' = "logon.php" onsubmit = (checkLogin "return ())">
- "100%" border = "0" cellspacing = "8" cellpadding = "4" > Width = <Table "100%" border = "0" cellspacing = "8" cellpadding = "4">
- <tr>
- "right" >< label for = "email" > email :</ label ></ td > <td Align = "right"> <label pour = "email"> e-mail: </ label> </ td>
- input type = "text" name = "email" id = "email" /></ td > <input Type <TD> "text" = name = "email" id = "email" /> </ td>
- </ Tr>
- <tr>
- "right" >< label for = "password" > password :</ label ></ td > <td Align = "right"> <label pour = "password"> Mot de passe: </ label> </ td>
- input type = "password" name = "password" id = "password" /></ td > <input Type <TD> "password" = name = "password" id = "password" /> </ td>
- </ Tr>
- <tr>
- "2" align = "center" >< input type = "submit" name = "send" id = "send" value = "Invia" /></ td > <td Colspan = "2" align = "center"> <input type = "submit" name = "send" id = "send" value = "Submit" /> </ td>
- </ Tr>
- </ Table>
- "ajax-loader" style = "display:none" >< img src = "css/images/ajax-loader.gif" /></ div > <div Id = "ajax-loader" style = "display: none"> <img src = "css / images / ajax-loader.gif" /> </ div>
- </ Form>
- </ Div>
- </ Body>
- </ Html>
Note: les
index.phpcomme vous pouvez le constater en regardant le code, pourrait également être un fichier HTML normal. Toutefois, dans le cas où un jour, nous voulons insérer quelques morceau de code PHP, nous avons déjà l'extension de fichier.
Le code JavaScript partie peut:
- Effectuer une série de contrôles sur les champs email et mot de passe (voir e-mail également Validez en Javascript et PHP)
- Blocs d'envoi (à soumettre) automatique et utilise Ajax via jQuery, pour envoyer des données en
POSTàlogon.php
layout.css
La disposition qui résoudra le problème du mieux que vous croyez. Je propose une version simple à personnaliser comme vous le souhaitez:
- corps (
- , Helvetica , sans-serif ; font-family: Arial, Helvetica, sans-serif;
- 12px font-size: 12px
- )
- div # login table (
- 32px 0 0 0 ; margin: 32px 0 0 0;
- )
- div # erreur (
- 8px auto margin: 8px auto
- )
- div # erreur h2 (
- block ; display: block;
- #fc3 ; background: # FC3;
- 1px solid #f60 ; border: 1px solid # F60;
- 12px ; padding: 12px;
- 16px ; font-size: 16px;
- #a50 ; color: # A50;
- )
- div # ajax-loader (
- / * Pour changer en fonction du type
- Ajax loader que vous avez téléchargé
- * /
- 220px ; width: 220px;
- 0 auto ; margin: 0 auto;
- )
logon.php
Page logon.php est appelé directement par l'utilisation d'Ajax de index.php page vu avant. La version présentée ici, il n'existe aucun contrôle sur la «validité» des données passées en poste; se fait une simple vérification de la «présence» via le isset() fonction isset() Toutefois, étant donné que le parti est soumis à diverses manipulations Javascript, vous pouvez également ajouter un contrôle supplémentaire sur le côté serveur / php. Voir à ce Classes ce qui concerne le Javascript et PHP pour valider mail un'indirizzo
- / **
- * Fonctionne un nom d'utilisateur et mot de passe par email Wordpress
- *
- * @ Author Giovambattista Fazioli
- * @ Undolog.com Email@g.fazioli
- * @ Http://www.undolog.com Web
- * /
- / / Invoke bootstrap WordPress
- ( '../wp-config.php' ) ; @ Require_once ( '.. / wp-config.php');
- ( '../wp-includes/pluggable.php' ) ; @ Require_once ( '.. / wp-includes / pluggable.php');
- ( '../wp-includes/registration.php' ) ; @ Require_once ( '.. / wp-includes / registration.php');
- 0 ; $ Error = 0;
- / / Je me connecte à la base de données
- mysql_connect ( DB_HOST , DB_USER , DB_PASSWORD ) ; $ Db = @ mysql_connect (DB_HOST, db_user, DB_PASSWORD);
- / / Select id DB
- / / Get ID et user_login par e-mail
- "SELECT `ID`, `user_login` FROM `wp_users` $ Q = "SELECT` id `,` user_login FROM `` wp_users
- $_POST [ 'email' ] . "'" ; User_email `WHERE` = ' ". $ _POST ['']."' Email";
- mysql_query ( $q ) ; $row = mysql_fetch_array ( $wp_r ) ; $wp_n = mysql_num_rows ( $wp_r ) ; $ Wp_r = mysql_query ($ q); $ row = mysql_fetch_array ($ wp_r); $ wp_n = mysql_num_rows ($ wp_r);
- / / Found
- $wp_n > 0 ) { if (wp_n $> 0) (
- wp_authenticate ( $_POST [ 'email' ] , $_POST [ 'password' ] ) ; $ Result = wp_authenticate ($ _POST [ 'email'], $ _POST [ 'password']);
- ! is_wp_error ( $result ) ) { if (! is_wp_error ($ result)) (
- [ "ID" ] , true ) ; wp_set_auth_cookie ($ row [ "id"], true);
- , $row [ "user_login" ] ) ; do_action ( 'wp_login', $ row [ "user_login"]);
- ; echo "0";
- "-1" ; ) Else echo "-1";
- { ) Else (
- ; echo "-1";
- )
- { ) Else (
- ; echo "-2";
- )
Ce code permet une connexion similaire à celui effectué avec le système de Wordpress. Il est intéressant de noter que la première chose à faire est d'inclure le noyau de WordPress afin que vous puissiez utiliser une partie de ses fonctions. De cette façon, nous serons en effet un "morceau" de WordPress. Être un fichier traité par Ajax, présente trois valeurs resrituisce: 0, -1 et -2, respectivement:
- tout ok, login autorisés
- nom d'utilisateur ou mot de passe
- Hacking tentative?














Excellent guide! Bravo pour la clarté et la rapidité avec laquelle vous vous exprimez
Outre les améliorations ou un utilitaire, let's face it, personnaliser, il est toujours amusant et agréable
Salut!
Sont en train de créer mon premier blog utilisant WordPress.
J'ai beaucoup de connaissances en programmation web linquaggi, Scripting and SQL.
Toutefois, l'expérience de ne pas avoir avec la CMS, j'ai trouvé le problème en face d'un champ de recherche pour ouvrir une session pour accéder aux membres restreint seulement.
Lire l'article j'ai bien compris la fonctionnalité des fichiers et j'ai tout fait à la lettre, la création de fichiers et dossiers dans la racine de mon espace web les fichiers FTP, y compris l'Ajax "loader.gif" (je précise que mon FAI est netsons) .
À ce stade, comment ouvrir une session pour voir l'encadré? Quoi d'autre dois-je faire?
Merci d'avance pour les réponses!
@ Sniper Wolf: Merci!
Il est toujours agréable que quelqu'un apprécie l'effort ...
@ EmaWebDesign: Correct ... Je voulais écrire la même chose dans les raisons, mais je vois que vous êtes perçu aussi, sans le dire explicitement
@ Alexandre: Pour afficher le journal à la fin, avant de votre blog, vous suffciente vous jouez, avec les adaptations nécessaires à la mise en page, le contenu du fichier "index.php" en y incluant, par exemple, dans "sidebar". L'important est de respecter la logique de l'opération mais le formulaire avec les champs
INPUT(email et mot de passe) vous pouvez pratiquement le mettre où vous voulez.Si vous souhaitez insérer dans "sidebar" de WordPress, pour esemopio, il suffit d'éditer le fichier "sidebar.php" qui est dans le dossier de votre thème.
Précédent Undolog.com [...] [...]
Bonjour! Excuse de l'ignorance sur .. mais j'ai besoin de saisir un formulaire d'inscription sur mon site .. c'est fait en flash. Ne connaissant pas la programmation php pourriez-vous me donner quelques conseils? Chose complexe E '? Thank you!
@ David: Si nous parlons de "demande d'inscription" Je pense qu'une fois que vous êtes en contact en quelque sorte avec le serveur, telles que l'enregistrement des utilisateurs à une base de données MySQL. Si oui, vous êtes malheureusement contraint d'utiliser un "langage" côté serveur, tel que PHP, ASP, etc ... Le front-end, cependant, que le
formd'inscription, vous pouvez offrir à la fois Flash et HTML simple. Cela, en définitive, ne fait rien de plus que "envoyer" les données au serveur qui effectue l'enregistrement proprement dit; avec PHP, ASP, etc ...La chose en soi n'est pas «complexe», mais si vous connaissez un «minimum» de programmation pourrait être au moins difficile.
Bonjour ... félicitations pour le site et l'exemple ...
Je ne comprends pas une chose ... la forme de fichier appelé logon.php poste qui fait la requête et retourne un résultat ... mais où se trouve l'appelant "index.php" prend les valeurs que logon.php envoie?
merci!
@ Luciano:
Sont tirés de la forme elle-même lorsque l'utilisateur compile les données, c'est à dire quand vous entrez nom d'utilisateur et mot de passe.
Intéressant, je usatoi serait jQuery mais un peu "plus" ...
Par exemple, vous pouvez utiliser à la place de:
une approche plus «simple:
jQuery passant par:
Eh bien, il signifie quelque chose 
«WRITE LASS NE PLUS ...."
@ Santino Bivacqua:
est ce que je pensais aussi. Toutefois, l'accès aux champs d'une
formest assez simple (et rapide), même sans utiliser jQuery. Non pas qu'il y est d'optimiser, dans ce cas, l'accès à l'exception:est de type tableau / index, puis plus rapidement:
jQuery, en effet, doit «couler» l'ensemble des DOM avant d'intercepter l
Aussi, si vous voulez appliquer des effets jQuery est-il impératif d'utiliser votre écran 
inputcorrectement. Ce n'est certainement pas un cas critique, puisque les DOM (page) de petites, et puis vous pouvez utiliser jQuery ou l'accès facile à la fonctionnalité de base de Javascript.Cependant, vous avez raison, il est utile d'écrire moins de
mais désolé je ne sais pas comment cela fonctionne en interne jQuery, mais je pense que si vous utilisez l'ID, à partir du # jQuery comprendre et utiliser
document.getElementById('id')puis ce n'est pas que jQuery par tous les noeuds jusqu'à trouver la seule chose qu'il nécessité est le moteur JavaScript du navigateur qui se consacre à fournir les données .....Peut-être qu'il ne le fait que si vous divulguer le nom d'un type de classe
$('.class')car il n'existe pas ....getElementByClassNameéquivalent malheureusementEn tout cas, choisissez l'un ou l'autre, c'est juste pour avoir une façon unique de programme, puisque je sais que la plupart ne pas utiliser jQuery "méthodes de DOM, beaucoup plus« bavarde ... Je fais un exemple, essayez d'écrire avec les méthodes du code DOM pour supprimer une ligne d'une table avec suffisamment de jQuery
Santino @ Bivacqua: Droit
si l'ID, vous avez parfaitement raison ... serait intéressant de tourner à l'épreuve ... presque ... 
wordpress el es muy bueno, pero no he encontrado la forma de bajar la carga que este en los servidores génère, aun estamos une solucionar problème en un portail de que entretenimeto génère avec cargas tan solo unas altas UNICAS 10mil visitas por dia, alguien sabe vous como solucionar esto espero la ayuda por que ni en wordpress tienen solucion a esto
Cela arrive seulement à moi ou toute personne qui enregistre le script indépendamment du champ mot de passe?
Bonjour, je suis tombé sur votre Blog de recherche faisant environ le login Wordpress et je dois dire que ce tutoriel - Je vous félicite parce que c'est très bien fait - je trouve cela très utile, cependant, sont un peu rouillé dans la programmation pour cela que je voulais vous demander, étant donné que Connaissez-vous un parc
Si
J'ai une manière de se connecter sur la plateforme WordPress, et un autre privé dans le même instant.
Je m'explique: j'ai cette étagère dans mon cabinet que je vais et je prévois de le faire via le login de ce qui pourrait, dans le même temps, réaliser deux fois le journal de plate-forme privée pour Wordpress (ayant utilisateur identique et passer sur les deux) .
. Bonjour Nicola
Au début, j'ai pensé à inclure dans votre site une forme cachée de plate-forme privée qui me permettrait d'avoir une copie des données de log pour que nous disons "sournois" pour Wordpress trop mais j'ai été frappé par votre guide et peut-être là une façon intelligente d'envoyer des données et assurez-vous vous connecter pour WordPress par un autre site ... Je ne sais pas si je me suis bien expliqué et j'espère que vous me répondez
@ Rachat: Bonjour Nicolas, je sais bien sûr que votre plate-forme privée, mais la procédure est certainement faisable. En théorie, tout le code que vous Server (pour WordPress) est présente dans ce post. Ce que vous avez à décider d'où viennent les «deux» contemporains de connexion.
Si vous avez un accès complet à votre plate-forme, vous mai entrer le code pour accéder à vos fichiers privés logon.php plate-forme proposée dans ce message, par exemple.
@ Giovambattista Fazioli:
Merci de votre réponse!
Je dois commencer à faire cela pour vous, vous m'avez donné bon espoir pour la mise en œuvre et je suis reconnaissant
.
Je vous demande une dernière chose, je peux créer en quelque sorte un utilisateur interroge la table utilisateur directement depuis la base de données de wp, ou y at-il d'autres rapports et les touches d'être créé au sein du PB?
Comme vous le comprenez j'ai un peu exporte aussi les utilisateurs de la plate-forme privée wp
.
Nice Guide Nos Ola mais j'ai réalisé une chose fondamentale où j'ai mis tous les fichiers? wordpress dossier? Comment puis-je faire?