Dans ce tutoriel nous allons voir comment créer une procédure de connexion personnelle, en utilisant également des fonctionnalités Ajax via jQuery . ). Il ya plusieurs façons de personnaliser le login de WordPress, par exemple par l'utilisation d'hameçons et les filtres ( add_action() , add_filter() ). Ici, nous allons utiliser une procédure de niveau inférieur, bien qu'il y ait encore des interfaces pour le noyau dans WordPress. En outre, nous allons tenter de valider un utilisateur à travers le Dupla email / mot de passe.
Pourquoi créer leur propre login?
- Dans certains contextes peuvent retourner uitle avoir un contrôle maximal sur la page de connexion, de proposer une présentation personnalisée de nos utilisateurs enregistrés. Vous pouvez également améliorer la page avec des informations utiles, un logo du classique "Mot de passe perdu?"
- Pour autoriser l'accès via le courrier électronique (comme dans l'exemple discuté ici) au lieu de
user_loginstandards WordPress - Pour être en mesure d'entrer dans un panneau de connexion dans la barre latérale de notre blog
- Et enfin, d'avoir un squelette - et une idée - un plugin grande

Environnement
Dans notre exemple, tutoriel / nous allons travailler sur la racine d'un dossier de l'intérieur WordPress mylogin . . Nous créons deux fichiers php dans ce dossier: index.php et logon.php . Le premier contiendra notre interface de connexion avec toutes les fonctions JavaScript / jQuery nous avons besoin. Le second fichier, logon.php , contiendra le code pour la validation des utilisateurs. e una cartella images . Ensuite, créez un dossier css et dans ce fichier layout.css et le dossier images . Dans le dossier insérer des images un classique Ajax loader: créez-le en ligne AjaxLoad.info . A la fin vous devez avoir:
- mylogin
- index.php
- logon.php
- RSS
- Layout.css
- images
- ajax-loader.gif
index.php
, email e password: Ce fichier montre la forme d'un accès à travers un form avec deux champs input , l'email et mot de passe:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | "-//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" > Xmlns = <html "http://www.w3.org/1999/xhtml"> <Head> equiv = "Content-Type" content = "text/html; charset=utf-8" /> <meta Http-equiv = content = "Content-Type" "text / html; charset = utf-8" /> myLogin Demo </ title > <Titre> Démo mylogin </ 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. Charge ("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 / / Loaded "mylogin" ] . email . focus ( ) ; . document fait ["mylogin"] email focus ()..; } ); / ** * Affichage des informations d'erreur / avertissement sur notre Formulaire de connexion * * / str ) { Fonction showError (str) { ) . html ( '<h2>' + str + '</h2>' ) . slideDown ( ) ; .. $ ('Div # erreur') HTML («<h2> '+ str +" </ h2>') slideDown (); } / ** Validation * des données fournies dans le formulaire de connexion. Si tous les * Est-ce correct, les données seront envoyées à l'logon.php la page * Grâce à l'Ajax * * @ Auteur Giovambattista Fazioli * @ @ Email g.fazioli undolog.com * @ Web http://www.undolog.com * / Fonction checkLogin () { document . forms [ "mylogin" ] ; var f = document fait ["mylogin"].; ^ ( [ \w - ] + ( ? : \ . [ \w - ] + ) * ) @ ( ( ? : [ \w - ] + \ . ) * \w [ \w - ] { 0 , 66 } ) \ . ( [ a - z ] { 2 , 6 } ( ? : \ . [ a - z ] { 2 } ) ? ) $ / i ; __filter var = / ^ ([\ w -] + (:?. \ [\ w -] +) *) @ ((:?. [\ w -] + \) * \ w [\ w -] {0 , 66}) \.? ([a - z] {2,} 6 (:?. \ [a - z] {2})) / $ i; / / ) . slideUp ( SlideUp $ ('div # erreur »). ( function () { / / f . email . value == '' ) { if (f. email. =='') valeur { ) ; showError («Tu n'as pas \ 'email'); focus ( ) ; courriel f. focus ().; ; return false; } ! __filter . test ( f . email . value ) ) { if (! __filter. test (courriel f.. value)) { ) ; showError ("Le champ email est invalide '); select ( ) ; courriel f. select ().; focus ( ) ; courriel f. focus ().; ; return false; } f . password . value == '' ) { if (f. mot de passe. =='') valeur { ) ; showError ('Vous avez entré le mot de passe'); focus ( ) ; Mot de passe f. focus ().; ; return false; } ) . show ( 'slow' ) ; $ ('Div # Ajax-loader ») Voir (« lent »).; ) . css ( 'cursor' , 'wait' ) ; $ ('Body') Css ("curseur", "attendre").; / / Envoi de données via Ajax POST logon.php 'logon.php' , { email : f . email . value , password : f . password . value } , Message $ ('logon.php', {e:. Email f. Valeur, mot de passe:. Mot de passe f.}. Value, data ) { fonction (data) { ) . hide ( 'slow' ) ; . $ ('Div # Ajax-loader ») Cacher (« lent »); ) . css ( 'cursor' , 'default' ) ; $ ('Body') Css ('curseur', 'default').; data ) { switch (data) { : cas '0 ': / / Accès autorisé href = 'http://mioblog.com/' ; .. document de site href = "http://mioblog.com/ '; break; : case '-1': ) ; showError («Access Denied e-mail ou mot de passe incorrect. '); break; : cas, «-2»: ) ; showError ("Mauvaise donnée: Tentative de piratage"); break; } } ); / / Envoyer coupure ; return false; } ); ; return false; } / / -> </ Script> rel = "stylesheet" href = "css/layout.css" type = "text/css" media = "screen, projection" /> < lien rel = "stylesheet" href = "css / layout.css" type = "text / css" media = "screen, projection" /> </ Head> <Body> "login" > Identifiant <div = "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 > Identifiant <div = "error" style = "display: none"> <h2> ...</ h2> </ div> "mylogin" name = "mylogin" method = "post" action = "logon.php" onsubmit = "return( checkLogin() )" > <Form Id = nom = "mylogin" "mylogin" method = "post" action = "logon.php" onsubmit = "return (checkLogin ())"> "100%" border = "0" cellspacing = "8" cellpadding = "4" > <Tableau Width = "100%" border = cellspacing = "0" cellpadding = "8" "4"> <TR> "right" >< label for = "email" > email :</ label ></ td > <td Align = "right"> <label pour = "email"> Email: </ label> </ td> input type = "text" name = "email" id = "email" /></ td > <TD> <input Type = "text" name = id = "email" "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 > <TD> <input Type = "password" name = id = "password" "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 = id = "send" "send" = valeur "Submit" /> </ td> </ TR> </ Table> "ajax-loader" style = "display:none" >< img src = "css/images/ajax-loader.gif" /></ div > <div Id = style = "ajax-loader" "display: none"> <img src = "css / images / ajax-loader.gif" /> </ div> </ Form> </ Div> </ Body> </ Html> |
Note: le fichier
index.php, comme vous pouvez le voir en prenant un oeil sur le code, vous pouvez aussi être un fichier HTML normal. Toutefois, dans le cas où un jour nous voulons insérer certaines extrait de code php, nous avons préparé l'extension de fichier.
La pièce qu'il vous faut JavaScript vous permet de:
- Exécuter une série de vérifications sur le courriel et les champs de mot de passe (voir aussi Valider courriel en Javascript et PHP )
- L'envoi de bloc (le soumettre) automatique et utilise Ajax via jQuery pour envoyer les données à
POSTà la pagelogon.php
Layout.css
La disposition que vous pouvez le fixer comme bon vous semble. Je propose une version facile à personnaliser comme bon vous semble:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | body { , Helvetica , sans-serif ; font-family: Arial, Helvetica, sans-serif; 12px font-size: 12px } div table {# log 32px 0 0 0 ; margin: 32px 0 0 0; } div # erreur { 8px auto margin: 8px voiture } 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 selon le type de Ajax Loader que vous avez téléchargé * / 220px ; largeur: 220px; 0 auto ; margin: 0 auto; } |
logon.php
vista in precedenza. La page logon.php est appelé directement à partir de la page en utilisant Ajax index.php vu avant. Dans la version présentée ici il n'ya pas de contrôles sur la "validité" des données transmises avec la Poste, une simple vérification est effectuée sur la «présence» dans la fonction isset() . Toutefois, depuis le JavaScript est plus sensible à diverses modifications, vous pouvez aussi ajouter un supplément de contrôle côté serveur / php. Voir à cet égard Javascript et PHP Classes un'indirizzo pour valider e-mail
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | / ** * Fonctionne connexion d'un utilisateur et mot de passe par email Wordpress * * @ Auteur Giovambattista Fazioli * @ @ Email g.fazioli undolog.com * @ Web http://www.undolog.com * / isset ( $_POST [ "email" ] ) && isset ( $_POST [ "password" ] ) ) { if ( isset ($ _POST ['email']) & & isset ($ _POST ['password'])) { / / Invoque 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 ; $ Erreur = 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); / / Sélection Identifiant DB $db != 0 ) mysql_select_db ( DB_NAME ) ; if ($ db = 0!) mysql_select_db (DB_NAME); / / Obtenir identifiant et votre adresse email que vous USER_LOGIN "SELECT `ID`, `user_login` FROM `wp_users` $ Q = "SELECT` id `,` USER_LOGIN `FROM` wp_users $_POST [ 'email' ] . "'" ; WHERE `user_email` = '"$ _POST ['.']."' Courriel»; 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); $wp_r ) ; mysql_free_result (wp_r $); / / Trouvé $wp_n > 0 ) { if ($ wp_n> 0) { wp_authenticate ( $_POST [ 'email' ] , $_POST [ 'password' ] ) ; Wp_authenticate $ result = ($ _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 à celle effectuée avec le système WordPress. Il est intéressant de noter que la première chose à faire est d'inclure le noyau de WordPress que vous puissiez utiliser certaines de ses fonctions. De cette façon, nous serons en effet un «morceau» de WordPress. Etre un fichier traité via Ajax, ce trois resrituisce valeurs: 0, -1 et -2, respectivement:
- ok, connectez-vous a permis
- Nom d'utilisateur ou mot de passe est incorrect
- De tentative de piratage?











Excellent guide! Bravo pour la clarté et l'immédiateté avec laquelle vous vous exprimez
Outre les améliorations ou de l'utilité, avouons-le, personnalisez c'est toujours amusant et agréable
Salut!
Je suis dans le milieu de la création de mon premier blog utilisant WordPress.
J'ai un peu de connaissance de linquaggi programmation web, scripts, et SQL.
Cependant, n'ayant pas d'expérience avec les CMS, je me suis trouvé en face de la peine de brancher dans une boîte de connexion pour accéder aux membres privés seulement.
Lire l'article que j'ai compris la fonctionnalité des fichiers et j'ai tout fait à la lettre, la création de fichiers et dossiers à la racine de mon espace web dans le fichier par FTP, y compris le "ajax-loader.gif" (l'état où je que mon fournisseur est Netsons) .
À ce stade, comment afficher le LOGIN encadré? Que dois-je faire?
Merci d'avance pour les réponses!
@ Sniper Wolf: Merci!
C'est toujours agréable que quelqu'un apprécie l'effort ...
@ EmaWebDesign: exactement la même chose ... Je voulais écrire dans les motifs, mais je vois que vous êtes perçu aussi, sans le dire explicitement
@ Alexandre: vous connecter pour voir l'intérieur de l'extrémité avant de votre blog, vous suffciente vous jouez, avec les modifications nécessaires à la mise en page, le contenu du fichier "index.php" en insérant, par exemple, dans la "sidebar". La chose importante est de respecter la logique de l'opération, mais le champ de formulaire avec
INPUT(email et mot de passe) vous pouvez en principe le mettre où vous voulez.Si vous voulez l'insérer dans la "sidebar" dans WordPress, pour esemopio, il suffit d'éditer le fichier "sidebar.php" dans votre dossier de thème.
[...] [...] Undolog.com précédente
Bonjour! Excuse de l'ignorance sur le sujet .. mais j'aurais besoin d'entrer dans un formulaire d'inscription dans mon site .. fait en flash. Ne connaissant pas la programmation PHP, vous sauriez me conseiller? Et «chose complexe? Merci!
@ David: Si vous parlez de "formulaire d'inscription" je pense immédiatement que vous avez d'interagir en quelque sorte avec le serveur, telles que l'enregistrement des utilisateurs sur une base de données MySQL. Si oui, vous ne sont malheureusement contraints d'utiliser un «langage» du côté du serveur, tels que PHP, ASP, etc ... Le front-end, cependant, que la
formde l'inscription, vous pouvez réaliser en Flash et HTML. Ceci, finalement, ne rien de plus que "envoyer" des données au serveur qui effectue l'enregistrement réel, en utilisant PHP, ASP, etc ...La chose en soi n'est pas «complexe», mais si vous ne connaissez pas un programme "minimum" pourrait au moins être difficile.
bonjour ... félicitations pour le site et l'exemple ...
Je ne comprenais pas une chose ... la forme dite logon.php après le fichier qui fait la requête et retourne un résultat ... mais où est la logon.php "caller" index.php prend les valeurs qui l'envoie?
je vous remercie!
@ Luciano:
Sont extraites de même forme que l'utilisateur remplit les données, qui est, quand vous entrez votre identifiant et votre mot de passe.
Intéressant, je usatoi si «plus» un peu jQuery ...
Par exemple, vous pouvez utiliser au lieu de:
2
3
/ / Et puis
f. password . value ; . f. var password = mot de passe de la valeur;
une approche plus «simples:
accessoirement par jQuery:
ainsi il signifie quelque chose de 
«LASS écrivez PLUS ...."
@ Santino Bivacqua:
Je pensais que vous aussi. Toutefois, l'accès aux champs d'un
formest très simple (et rapide), sans l'aide de jQuery. Ce n'est pas ce qu'il ya à être optimisé dans ce cas, cependant l'accès à:est de type array / index, puis plus rapidement:
jQuery, en fait, ont à «défiler» dans le DOM pour intercepter le premier '
Aussi, si vous voulez appliquer des effets jQuery, vous êtes obligé d'utiliser votre écran 
inputcorrectement. Assurément, ce n'est pas un cas critique, puisque les DOM (en haut) petite, et puis vous pouvez utiliser soit un accès facile à jQuery ou la fonctionnalité de base de Javascript.Mais vous avez raison, il est utile d'écrire moins
désolé mais je ne sais pas comment cela fonctionne en interne de jQuery, mais je pense que si vous utilisez l'ID, en commençant par # jQuery comprendre et à utiliser
document.getElementById('id')de telle sorte que jQuery ne circule pas tous les nœuds jusqu'à ce qu'il trouve ce qu'il besoin est le moteur JavaScript du navigateur est chargée de fournir les données ... ..…. c'est peut-être que si vous indiquez le nom d'un type de classe
$('.class')car il n'y a pas d'équivalentgetElementByClassName.... malheureusementEn tout cas, l'un ou l'autre, est juste pour avoir un moyen unique de programme, puisque je sais que la plupart n'utilisent pas les «méthodes du DOM, beaucoup plus« verbeuse jQuery ... Je vais vous donner un exemple, essayer d'écrire avec des méthodes du code DOM pour supprimer une ligne d'une table, avec juste jQuery:
@ Santino Bivacqua: droit
id si vous avez absolument raison ... il serait intéressant d'essai à ... presque ... 
es muy bueno el wordpress, mais pas à la forme qu'il encontrado bajar de este génère la carga en los Qué Servidores, Aun fr estamos solución un problème génère un portail Québec de unas entretenimeto cargas altas bronzage avec seulement 10mil visitas Unicas dia por, vous alguien sabe Solucion como por esto Qué ayuda espero l'wordpress tienen NI EN esto Solucion aux
Cela arrive seulement à moi ou n'importe qui qui se connecte dans le script indépendamment du mot de passe entré?
Bonjour, je suis tombé sur votre blog en faisant une recherche sur la connexion de WordPress et je dois dire que ce tutoriel - Je vous félicite parce que c'est très bien fait - je peux être très utile, cependant, sont légèrement rouillés dans la programmation donc je voulais vous demander, étant donné que Je sais que pour les flottes
Si
Je m'assure de vous connecter sur la plateforme WordPress, privé et une autre dans le même instant.
Je m'explique: j'ai cette plate-forme privée que je peut programmer à sa guise et je voulais le faire à travers la connexion de ce qui pourrait, dans le même temps, la plateforme est d'exécuter deux journaux privés pour WordPress (ayant le même sur les deux utilisateurs et pass) .
. Bonjour Nicola
Au début, je pensais que la page de connexion pour entrer dans la plate-forme privée d'une forme cachée qui me permettrait d'avoir une copie des données pour se connecter à dire «subtiles», même WordPress, mais ensuite j'ai été frappé par votre guide et peut-être là une façon plus intelligente pour envoyer des données et assurez-vous de vous connecter à WordPress grâce à une autre page ... je ne sais pas si je bien expliqué et j'espère que vous me répondre
@ Redemption: Bonjour Nicolas, je sais bien sûr, votre terrasse privée, mais le processus est certainement réalisable. En théorie, tout le code que nous Server (pour WordPress) est présente dans ce post. Qu'est-ce que vous avez à décider où pour effectuer les "deux" connexions simultanées.
Si vous avez un accès complet à votre plateforme, vous pouvez entrer le code d'accès à votre terrasse privée dans le fichier de logon.php proposé dans ce message, par exemple.
@ Giovambattista Fazioli:
Merci pour la réponse!
Devrais-je commencer à expérimenter, cependant, m'ont donné l'espoir d'une bonne mise en œuvre et je suis reconnaissant
.
Je vous demande une dernière chose, je peux en quelque sorte de créer une requête utilisateur de la table user directement de la base de WP ou il d'autres relations et les clés pour être créés dans la db?
Comme vous le savez, j'ai en quelque sorte aussi exporter les utilisateurs de la plate-forme privée wp
.
Ola Guide de Nice, mais j'ai réalisé une chose fondamentale Aucune où dois-je mettre tous les fichiers? dossier de wordpress? comment puis-je?
Great post ... merci beaucoup!
Si je voulais sauver le login d'accès de données de WordPress, ce qui serait à l'utilisateur deux variables et de passer, je dois sauver?
Bonjour, excellent tutoriel!
J'ai seulement un petit doute: comment établissez-vous de telle sorte que la page d'accueil WordPress est le index.php dans le dossier et mylogin pas le index.php racine?
Aujourd'hui j'ai mis une redirection dans le fichier index.php racine de WordPress:
Il ya une autre méthode plus élégante?
Merci