Wordpress: Schritt für Schritt, wie Sie ihre eigenen Login

Freitag, 24. Oktober, 2008

In diesem Tutorial werden wir sehen, wie man ein persönliches Login-Verfahren, mit Ajax Funktionalität mit jQuery. Es gibt mehrere Möglichkeiten, um Ihre Anmeldung bei Wordpress, zum Beispiel durch den Einsatz von Haken und Filter add_action() add_filter() Wir fahren zu einem Low-Level, auch wenn es Schnittstellen zu den Kernel, aber Wordpress. Auch stellen Sie sicher, dass die Validierung eines Benutzers Dupla per E-Mail / Passwort ein.

Warum ein Login?

  • In einigen Fällen lässt sich die Rückkehr uitle haben maximale Kontrolle über die Login-Seite, um ein benutzerdefiniertes Layout für unsere registrierten Benutzer. Sie können auch bereichern die Seite mit nützlichen Informationen, ein Logo von der klassischen "Haben Sie Ihr Passwort vergessen?"
  • Um den Zugang per E-Mail (wie oben gezeigt,) statt user_login Standard Wordpress
  • Zu können, geben Sie einen Login-Panel in der Seitenleiste des Blogs
  • Und schließlich, um ein Skelett - und eine Idee - für eine gute Plugin : D

Umgebung

In unserem Beispiel / Tutorial wird auf die Wurzel des Wordpress in einem Ordner mylogin Ich habe zwei PHP-Datei in diesen Ordner: index.php und logon.php Die erste enthält die Schnittstelle unserer Protokoll mit allen Features Javascript / jQuery wir dienen. Die zweite Datei logon.php wird der Code, um die Nutzer. Dann erstellen Sie einen Ordner css und innerhalb dieser Datei layout.css und einen Ordner images Innerhalb der Ordner Bilder wird eine klassische Ajax loader: createlo online AjaxLoad.info. Am Ende sollten Sie:

  • mylogin
    • index.php
    • logon.php
    • css
      • layout.css
      • Bilder
        • ajax-loader.gif

index.php

Diese Datei zeigt die Form des Zugangs über eine form mit zwei input und Passwort ein:

Plain Text
PHP:
  1. <! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns= "http://www.w3.org/1999/xhtml">
  3. <head>
  4. /> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
  5. <title> myLogin Demo </ title>
  6. ></script> <script type= "text/javascript" src= "http://www.google.com/jsapi"> </ script>
  7. "jquery" , "1.2.6" ) ;</script> <script type= "text/javascript"> google.load ( "jQuery", "1.2.6"); </ script>
  8. <script type= "text/javascript">
  9. <! --
  10. google.setOnLoadCallback (
  11. Funktion () (
  12. / / Setzt den Fokus auf die erste Eingabe, wenn die Seite
  13. / / Loaded
  14. ] .email.focus ( ) ; document.forms [ "mylogin"]. email.focus ();
  15. )
  16. );
  18. / **
  19. * Display-Informationen Fehler / Warnung über unsere
  20. * Login Form
  21. * /
  22. str ) { showError Funktion (str) (
  23. ) .html ( '<h2>' +str+ '</h2>' ) .slideDown ( ) ; $ ( 'Div # Fehler "). Html (' <h2> '+ str +' </ h2> '). SlideDown ();
  24. )
  26. / **
  27. * Die Validierung der Daten, die in der Login-Formular. Wenn alles
  28. * Richtig ist, werden die Daten an die Seite logon.php
  29. * Durch Ajax
  30. *
  31. * @ Author Giovambattista Fazioli
  32. * @ @ E-Mail g.fazioli undolog.com
  33. * @ Web http://www.undolog.com
  34. * /
  35. checkLogin Funktion () (
  36. "mylogin" ] ; var f = document.forms [ "mylogin"];
  37. \w- ] + ( ?:\. [ \w- ] + ) * ) @ ( ( ?: [ \w- ] +\. ) *\w [ \w- ] { 0 , 66 } ) \. ( [ az ] { 2 , 6 } ( ?:\. [ az ] { 2 } ) ? ) $/i; var __filter = / ^ ([\ w-] + (?: \. [\ w-] +) *) @ ((?: [\ w-] + \.) * \ w [\ w-] (0 , 66)) \. ([az] (2, 6) (?: \. [az] (2))?) $ / i;
  38. / /
  39. ) .slideUp ( $ ( 'Div # Fehler "). SlideUp (
  40. Funktion () (
  41. / /
  42. f.email.value == '' ) { if (f.email.value =='') (
  43. email' ) ; showError ( "Haben Sie nicht l \ 'E-Mail');
  44. f.email.focus ();
  45. ; return false;
  46. )
  47. !__filter.test ( f.email.value ) ) { if (! __filter.test (f.email.value)) (
  48. ) ; showError ( "Das Feld ist nicht eine gültige E-Mail ');
  49. f.email.select ();
  50. f.email.focus ();
  51. ; return false;
  52. )
  53. f.password.value == '' ) { if (f.password.value =='') (
  54. ) ; showError ( "Haben Sie nicht das Passwort eingeben ');
  55. f.password.focus ();
  56. ; return false;
  57. )
  58. ) .show ( 'slow' ) ; $ ( '# Div AJAX-Loader "). Show (" slow ");
  59. ) .css ( 'cursor' , 'wait' ) ; $ ( "Body"). CSS ( "Cursor", "warten");
  60. / / Senden von Daten via POST logon.php in Ajax
  61. , { email: f.email.value, password: f.password.value } , $. Post ( "logon.php ', (E-Mail: f.email.value, Passwort: f.password.value),
  62. data ) { Funktion (Daten) (
  63. ) .hide ( 'slow' ) ; $ ( '# Div AJAX-Loader "). Ausblenden (' langsam ');
  64. ) .css ( 'cursor' , 'default' ) ; $ ( "Body"). CSS ( "Cursor", "Standard");
  65. data ) { switch (Tag) (
  66. : case'0 ":
  67. / / Zugriff erlaubt
  68. document.location.href = 'http://mioblog.com/';
  69. break;
  70. : case '-1':
  71. ) ; showError ( 'Zugriff verweigert. Falsche E-Mail oder Passwort');
  72. break;
  73. : Fall "-2":
  74. ) ; showError ( "Falsche Daten: Versuchen Sie, Hack!");
  75. break;
  76. )
  77. )
  78. );
  79. / / Cut-off-Vorlage
  80. ; return false;
  81. )
  82. );
  83. ; return false;
  84. )
  86. / / ->
  87. </ Script>
  88. type= "text/css" media= "screen, projection" /> <link rel= "stylesheet" href= "css/layout.css" type= "text/css" media= "screen, projection" />
  89. </ Head>
  91. <body>
  92. <div Id= "login">
  93. ><span>myLogin</span></h1></div> <div Id= "logo"> <h1 title= "myLogin"> <span> myLogin </ span> </ h1> </ div>
  94. ><h2>...</h2></div> <div Id= "error" style= "display:none"> <h2> ...</ h2> </ div>
  95. method= "post" action= "logon.php" onsubmit= "return( checkLogin() )" > <form Id= "mylogin" name= "mylogin" method= "post" action= "logon.php" onsubmit= "return( checkLogin() )">
  96. cellspacing= "8" cellpadding= "4" > <table width= "100%" border= "0" cellspacing= "8" cellpadding= "4">
  97. <tr>
  98. = "email" >email:</label></td> <td align= "right"> <label für "email" => E-Mail: </ label> </ td>
  99. id= "email" /></td> <input <td> type = "text" name = "email" id = "email" /> </ td>
  100. </ Tr>
  101. <tr>
  102. = "password" >password:</label></td> <td align= "right"> <label für "password" => Passwort: </ label> </ td>
  103. id= "password" /></td> <input <td> type = "password" name = "password" id = "password" /> </ td>
  104. </ Tr>
  105. <tr>
  106. ><input type= "submit" name= "send" id= "send" value= "Invia" /></td> <td colspan= "2" align= "center"> <input type= "submit" name= "send" Id= "send" value= "Invia" /> </ td>
  107. </ Tr>
  108. </ Table>
  109. ><img src= "css/images/ajax-loader.gif" /></div> <div Id= "ajax-loader" style= "display:none"> <img src= "css/images/ajax-loader.gif" /> </ div>
  110. </ Form>
  111. </ Div>
  112. </ Body>
  113. </ Html>

Hinweis: Die Datei index.php wie Sie sehen können, indem Sie den Code ein, es könnte auch eine Standard-HTML-Datei. Allerdings, für den Fall, dass eines Tages wollen wir einige Stück PHP-Code, wir haben bereits die Datei als a.

Die Partei Javascript erlaubt:

  • Führen Sie eine Reihe von Kontrollen in den Bereichen E-Mail und Passwort (siehe auch zu prüfen, E-Mail in Javascript und PHP)
  • Senden Block (die Vorlage) und automatisch über Ajax jQuery, um die Daten, POST die Seite logon.php

layout.css

Das Layout können Sie es am besten, wie wir glauben. Daher schlage ich vor, um eine einfache, wie Sie wollen:

Plain Text
CSS:
  1. Stelle (
  2. ; font-family: Arial, Helvetica, sans-serif;
  3. font-size: 12px
  4. )
  5. div # login Tabelle (
  6. ; margin: 32px 0 0 0;
  7. )
  8. div # Fehler (
  9. margin: 8px die automatische
  10. )
  11. div # Fehler h2 (
  12. ; display: block;
  13. background: # FC3;
  14. border: 1px solid # F60;
  15. padding: 12px;
  16. font-size: 16px;
  17. color: # A50;
  18. )
  19. div # AJAX-Loader (
  20. / * Um zu ändern je nach Art der
  21. Ajax loader, die Sie heruntergeladen haben
  22. * /
  23. width: 220px;
  24. margin: 0 auto;
  25. )

logon.php

Die Seite logon.php wird direkt durch die Verwendung von Ajax Seite index.php Ansicht oben. In der Version, die hier gibt es keine Kontrolle über die "Gültigkeit" der Vergangenheit in POST, erfolgt eine einfache Prüfung von "Präsenz" durch die Funktion isset() Da jedoch die Javascript ist anfälliger für verschiedene Verletzungen, können Sie auch eine weitere Hand-Server / php. Siehe in diesem Zusammenhang Klassen Javascript und PHP, um un'indirizzo mail

Plain Text
PHP:
  1. / **
  2. * Führen Sie ein Benutzer-Login auf Wordpress und das Passwort per E-Mail
  3. *
  4. * @ Author Giovambattista Fazioli
  5. * @ @ E-Mail g.fazioli undolog.com
  6. * @ Web http://www.undolog.com
  7. * /
  9. isset ( $_POST [ "email" ] ) && isset ( $_POST [ "password" ] ) ) { if (isset ($ _POST [ 'email']) & & isset ($ _POST [ "password"])) (
  10. / / Invoke WordPress Bootstrap
  11. '../wp-config.php' ) ; @ Require_once ( '.. / wp-config.php');
  12. '../wp-includes/pluggable.php' ) ; @ Require_once ( '.. / wp-includes / pluggable.php');
  13. '../wp-includes/registration.php' ) ; @ Require_once ( '.. / wp-includes / registration.php');
  15. ; $ Error = 0;
  17. / / Verbindung zur Datenbank
  18. ( DB_HOST, DB_USER, DB_PASSWORD ) ; $ Db = @ mysql_connect (db_host, db_user, DB_PASSWORD);
  20. / / SELECT id DB
  21. $db != 0 ) mysql_select_db ( DB_NAME ) ; if ($ db! = 0) mysql_select_db (db_name);
  23. / / Get ID user_login und per E-Mail
  24. $ Q = "SELECT` id `,` user_login FROM `` `wp_users
  25. [ 'email' ] . "'" ; WHERE `user_email` = ' ". $ _POST [' E-Mail']."'";
  27. ( $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);
  28. $wp_r ) ; mysql_free_result ($ wp_r);
  30. / / Gefunden
  31. $wp_n > 0 ) { if ($ wp_n> 0) (
  32. $_POST [ 'email' ] , $_POST [ 'password' ] ) ; $ Result = wp_authenticate ($ _POST [ 'email'], $ _POST [ 'password']);
  33. [ "ID" ] , true ) ; wp_set_auth_cookie ($ row [ID], true);
  34. , $row [ "user_login" ] ) ; do_action ( 'wp_login', $ row [ "user_login"]);
  35. ; echo "0";
  36. { Else ()
  37. ; echo "-1";
  38. )
  39. { Else ()
  40. ; echo "-2";
  41. )

Dieser Code ermöglicht eine Anmeldung ähnlich der, die mit dem System Wordpress. Es ist interessant festzustellen, dass das erste, was zu tun ist, sind die Kernel Wordpress, einen Teil seiner Aufgaben. Auf diese Weise werden wir in der Tat ein "Stück" von WordPress. Nachdem Sie eine Datei über Ajax, resrituisce diese drei Werte: 0, -1 und -2, sind:

  • OK, Login erlaubt
  • Benutzername oder Passwort falsch
  • Hacking Versuch?

Verwandte Post

Tags:

11 Kommentare zu "Wordpress: Schritt für Schritt, wie Sie ein Login"

  1. getAvatar 1,0 Freitag, 24. Oktober, 2008 at 20:55
    Sniper Wolf sagte:

    Excellent guide! Herzlichen Glückwunsch für die Klarheit und Direktheit, mit der Sie Express ;)

    Antwort Aktie
  2. getAvatar 1,0 Freitag, 24. Oktober, 2008 at 21:26
    EmaWebDesign sagte:

    Neben Verbesserungen ol'utilità, sagen wir, Customize ist immer Spaß und Freude ;)

    Antwort Aktie
  3. getAvatar 1,0 Samstag, 25. Oktober, 2008 at 13:08
    Alexander sagte:

    Hi!
    Sie sind mitten in der Schaffung von meinem ersten Blog mit Hilfe von WordPress.
    Ich habe eine Menge an Wissen über linquaggi Web-Programmierung, Scripting und dell'sql.
    Jedoch noch nicht Erfahrung mit CMS, fand ich das umgekehrte Problem, um eine Login-Box, um die private Teilnehmer nur.
    Lesen des Artikels habe ich verstanden, die Funktionalität von Dateien und ich haben alles getan, um das Schreiben, Erstellen von Dateien und Ordnern im Stammverzeichnis meiner Web-Raum, in dem FTP-Datei, einschließlich der "Ajax-loader.gif" (Ich möchte, dass mein ISP ist NETSONS) .
    An dieser Stelle, um zu sehen, wie das Login in der Sidebar? Was sollte ich sonst noch tun?

    Vielen Dank im Voraus für Ihre Antworten!

    Antwort Aktie
  4. getAvatar 1,0 Sonntag, 26. Oktober, 2008 at 15:21
    Giovambattista Fazioli sagte:

    @ Sniper Wolf: Vielen Dank! : D Ist immer schön, dass jemand die Mühe zu schätzen ...

    Antwort Aktie
  5. getAvatar 1,0 Sonntag, 26. Oktober, 2008 at 15:22
    Giovambattista Fazioli sagte:

    @ EmaWebDesign: ... Ich wollte schreiben, genau die gleiche Sache in die Gründe, aber ich sehe, dass es wahrgenommen wird, ebenso, ohne ausdrücklich sagen, : D

    Antwort Aktie
  6. getAvatar 1,0 Sonntag, 26. Oktober, 2008 at 15:26
    Giovambattista Fazioli sagte:

    @ Alessandro: Anmelden, um zu sehen, die Innenseite der vorderen Ende des Blogs, ist es geeignet, die Sie spielen mit den erforderlichen Änderungen an der Gestaltung, die Inhalte der Datei "index.php", indem Sie zum Beispiel in der "Sidebar". Wichtig ist, die Logik der Maßnahme, sondern die Felder mit den INPUT (E-Mail und Passwort) können Sie im Grunde genommen, wo Sie wollen.
    Wenn Sie möchten, um sie in der "Sidebar" von WordPress, für esemopio, einfach bearbeiten Sie die Datei "sidebar.php", die sich in dem Ordner, der Ihr Thema.

    Antwort Aktie
  7. getAvatar 1,0 Montag, 27. Oktober 2008 bei 08:07
    Wordpress: Schreiben Sie eine persönliche Abmeldung | Undolog.com sagte:

    Zurück Undolog.com [...] [...]

  8. getAvatar 1,0 Montag, 10. November 2008 bei 12:17
    davide sagte:

    hallo! scusate Unwissenheit in Bezug auf .. aber ich würde es brauchen, um eine Anmeldung in meiner Website .. in Flash. Nicht zu wissen, PHP-Programmierung können Sie mir einige gerade? E 'komplexe Sache? Grazie mille!

    Antwort Aktie
  9. getAvatar 1,0 Montag, 10. November 2008 bei 13:02
    Giovambattista Fazioli sagte:

    @ Davide: Wenn Sie über "Anmeldung" Ich glaube, jetzt ist es notwendig, dass Sie irgendeine Weise die Interaktion mit dem Server, wie die Registrierung Benutzer auf eine MySQL-Datenbank. Wenn ja, sind Sie leider gezwungen, eine "Sprache" auf der Server-Seite, wie zB PHP, ASP, etc. ... Die Front-End, jedoch, dass form Anmeldeformular form Sie erkennen, ist es in Flash als in einfachen HTML. Diese letztendlich nichts weiter als eine "Senden" die Daten auf einen Server, der die eigentliche Registrierung von PHP, ASP, etc. ...
    Die Sache selbst ist nicht "komplex", aber wenn Sie nicht wissen, ein "Minimum" der Programmierung könnte zumindest schwierig.

    Antwort Aktie
  10. getAvatar 1,0 Donnerstag, 18. Dezember 2008 bei 17:24
    Luciano sagte:

    hallo ... Herzlichen Glückwunsch für die Website und das Beispiel ...
    Ich verstand nicht, eine Sache ... in Form Post logon.php die Datei, um die Abfrage und gibt eine Ergebnismenge ... aber wo ist das "calling" index.php nimmt die Werte, die logon.php sendet?
    Danke!

    Antwort Aktie
  11. getAvatar 1,0 Donnerstag, 18. Dezember 2008 bei 18:22
    Giovambattista Fazioli sagte:

    @ Luciano:

    aber wo ist das "calling" index.php nimmt die Werte, die logon.php sendet?

    Getroffen werden, aus der Form selbst, wenn der Benutzer die Daten erstellt, das heißt, wenn Sie Benutzername und Passwort.

    Antwort Aktie

Hinterlasse einen Kommentar

TAG XHTML erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Verwenden Sie <pre> Anlagen-Code