WordPress: βήμα προς βήμα τον τρόπο δημιουργίας ενός login

Παρασκευή 24 Οκτωβρίου, 2008

Σε αυτό το tutorial θα δούμε πώς να δημιουργήσετε μια προσωπική σύνδεσής διαδικασία, χρησιμοποιώντας Αίας λειτουργικότητα μέσω jQuery. Υπάρχουν διάφοροι τρόποι για να προσαρμόσετε τη σύνδεσή του WordPress, για παράδειγμα μέσω της χρήσης των αρπαγών add_action() φίλτρα add_action() add_filter() Χρησιμοποιούμε ένα πιο χαμηλό επίπεδο, παρόλο που εξακολουθούμε να διεπαφές με τον πυρήνα WordPress. Επίσης πρέπει να φροντίζετε για την επικύρωση ενός χρήστη μέσω της διπλής email / password.

Γιατί να δημιουργήσει μια σύνδεση;

  • Σε ορισμένες περιπτώσεις μπορούν να επιστρέψουν uitle έχουν την πιο έλεγχο στην σελίδα σύνδεσης, να προτείνει μια προσαρμοσμένη διάταξη για να μας εγγεγραμμένους χρήστες. Μπορείτε επίσης να εμπλουτίσει την σελίδα με πληροφορίες, ένα λογότυπο από το κλασικό "Κωδικός Ξεχάσατε;"
  • Για να καταστεί δυνατή η πρόσβαση μέσω του ηλεκτρονικού ταχυδρομείου (όπως φαίνεται εδώ Συνθήκης) αντί user_login πρότυπο WordPress
  • Για να είναι σε θέση να εισέλθει σε μια ομάδα login στο sidebar μας Blog
  • Και, τέλος, να έχουμε ένα σκελετό - και μια ιδέα - για ένα καλό Προσθήκη : D

Περιβάλλον

Στο παράδειγμά μας / φροντιστήριο εργασίες για την ρίζα του WordPress μέσα σε φάκελο mylogin Θα δημιουργήσει δύο php αρχεία μέσα σε αυτό το φάκελο: index.php και logon.php Το πρώτο περιέχει τη διασύνδεση της σύνδεσής μας, με όλες τις λειτουργίες Javascript / jQuery το οποίο μπορούμε να σερβίρουμε. Το δεύτερο αρχείο, logon.php θα περιέχει ο κώδικας για την επικύρωση του χρήστη. Στη συνέχεια θα δημιουργήσουμε ένα φάκελο css και μέσα σε αυτό το αρχείο layout.css και ένα φάκελο images Μέσα από το φάκελο εικόνες περιλαμβάνει ένα κλασικό Ajax loader: δημιουργήστε το διαδίκτυο στα AjaxLoad.info. Στο τέλος θα πρέπει να έχετε:

  • mylogin
    • index.php
    • logon.php
    • CSS
      • layout.css
      • εικόνες
        • Αίας-loader.gif

index.php

Αυτό το αρχείο δείχνει τη μορφή της πρόσβασης form ενός εντύπου με τους δύο τομείς input το email και τον κωδικό πρόσβασης:

Απλό Κείμενο
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. <Τίτλος> 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. λειτουργία () (
  12. / / Βάλε το επίκεντρο για την πρώτη είσοδο όταν η σελίδα είναι
  13. / / Load
  14. ] .email.focus ( ) ; document.forms [ "mylogin"]. email.focus ()?
  15. )
  16. )?
  18. / **
  19. * Εμφάνιση πληροφοριών σφάλματος / προειδοποίηση για μας
  20. * Είσοδος μορφή
  21. * /
  22. str ) { showError λειτουργία (STR) (
  23. ) .html ( '<h2>' +str+ '</h2>' ) .slideDown ( ) ; $ ( 'Τμήμα # λάθους »). Html (« <h2>' + σ. + '</ h2> "). SlideDown ()?
  24. )
  26. / **
  27. * Η επικύρωση των στοιχείων που παρέχονται με τη μορφή σύνδεσης. Αν όλα
  28. * Είναι σωστή, τα δεδομένα θα αποστέλλονται στην σελίδα logon.php
  29. * Μέσω Αίας
  30. *
  31. * @ Συγγραφέας Giovambattista Fazioli
  32. * @ @ Email g.fazioli undolog.com
  33. * @ Web http://www.undolog.com
  34. * /
  35. checkLogin λειτουργία () (
  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 ( $ ( 'Τμήμα # λάθους »). SlideUp (
  40. λειτουργία () (
  41. / /
  42. f.email.value == '' ) { εάν (f.email.value =='') (
  43. email' ) ; showError ( «Δεν έχετε εισέλθει l \ 'email')?
  44. f.email.focus ()?
  45. ; επιστροφή false?
  46. )
  47. !__filter.test ( f.email.value ) ) { if (! __filter.test (f.email.value)) (
  48. ) ; showError ( «Το γήπεδο δεν είναι έγκυρη διεύθυνση ηλεκτρονικού ταχυδρομείου»)?
  49. f.email.select ()?
  50. f.email.focus ()?
  51. ; επιστροφή false?
  52. )
  53. f.password.value == '' ) { εάν (f.password.value =='') (
  54. ) ; showError ( «Εσύ δεν μπήκε ο κωδικός πρόσβασης ')?
  55. f.password.focus ()?
  56. ; επιστροφή false?
  57. )
  58. ) .show ( 'slow' ) ; $ ( 'Τμήμα # Αίας-φορτωτής »). Παρουσίαση (« αργό »)?
  59. ) .css ( 'cursor' , 'wait' ) ; $ ( «Φορέας»). Css ( «δρομέας», «περιμένουν»)?
  60. / / Αποστολή δεδομένων μέσω POST logon.php σε Ajax
  61. , { email: f.email.value, password: f.password.value } , $. Μετά ( «logon.php», (email: f.email.value, password: f.password.value),
  62. data ) { λειτουργία (στοιχεία) (
  63. ) .hide ( 'slow' ) ; $ ( 'Τμήμα # Αίας-φορτωτής »). Hide (« αργό »)?
  64. ) .css ( 'cursor' , 'default' ) ; $ ( «Φορέας»). Css ( «δρομέας», «προεπιλογή»)?
  65. data ) { διακόπτη (δεδομένων) (
  66. : case'0 ":
  67. / / Η πρόσβαση επιτρέπεται
  68. document.location.href = 'http://mioblog.com/'?
  69. σπάσει?
  70. : περίπτωση "-1":
  71. ) ; showError ( «Άρνηση πρόσβασης. ηλεκτρονικού ταχυδρομείου ή εσφαλμένο κωδικό πρόσβασης»)?
  72. σπάσει?
  73. : περίπτωση "-2":
  74. ) ; showError ( «ανακριβή στοιχεία: Προσπαθώ να Hack!")?
  75. σπάσει?
  76. )
  77. )
  78. )?
  79. / / Αποκοπής υποβάλει
  80. ; επιστροφή false?
  81. )
  82. )?
  83. ; επιστροφή 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 για "email" => email: </ label> </ td>
  99. id= "email" /></td> <td> <input type= "text" name= "email" id= "email" /> </ td>
  100. </ Tr>
  101. <tr>
  102. = "password" >password:</label></td> <td align= "right"> <label για "password" => password: </ label> </ td>
  103. id= "password" /></td> <td> <input 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. </ Τραπέζι>
  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>

Σημείωση: Το αρχείο index.php κοιτάζοντας τον κώδικα, θα μπορούσε επίσης να είναι ένα κανονικό HTML αρχείο. Ωστόσο, στην περίπτωση που μια μέρα θα ήθελα να τοποθετήσετε κάποιο κομμάτι του κώδικα php, έχουμε ήδη προετοιμάσει το αρχείο ως α.

Το κόμμα Javascript επιτρέπει:

layout.css

Η διάταξη μπορώ να το φτιάξω όπως νομίζετε ότι καλύτερο. Προτείνω ένα απλό για να προσαρμόσετε κατά βούληση:

Απλό Κείμενο
CSS:
  1. σώμα (
  2. ; font-οικογένεια: Arial, Helvetica, sans-serif?
  3. font-size: 12px
  4. )
  5. div # (login πίνακα
  6. ; περιθώριο: 32px 0 0 0?
  7. )
  8. div # λάθους (
  9. περιθώριο: 8px αυτοκίνητο
  10. )
  11. div # σφάλμα h2 (
  12. ; απεικόνιση: block?
  13. background: # FC3?
  14. σύνορα: 1px στερεό # F60?
  15. παραγέμισμα: 12px?
  16. font-size: 16px?
  17. Χρώμα: # A50?
  18. )
  19. div # Αίας-loader (
  20. / * Για να τροποποιηθεί ανάλογα με το είδος της
  21. Ajax loader που έχετε κατεβάσει
  22. * /
  23. πλάτος: 220px?
  24. περιθώριο: 0 auto?
  25. )

logon.php

Η σελίδα logon.php καλείται άμεσα με τη χρήση Ajax σελίδα index.php παραπάνω άποψη. Στο κείμενο που παρουσιάζεται εδώ δεν υπάρχουν έλεγχοι για την "ισχύ" των δεδομένων που ψηφίστηκε το POST, που έπαιξε ένα απλό έλεγχο της «παρουσίας» μέσα από την isset() Ωστόσο, δεδομένου ότι η Javascript είναι αντικείμενο διαφόρων επεμβάσεων, μπορείτε να θέσετε περαιτέρω έλεγχο του server / php. Βλέπε εν προκειμένω Classes Javascript και PHP για την επικύρωση un'indirizzo mail

Απλό Κείμενο
PHP:
  1. / **
  2. * Εκτέλεση ενός χρήστη login WordPress μέσω email και το password
  3. *
  4. * @ Συγγραφέας Giovambattista Fazioli
  5. * @ @ Email 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. / / Κινήσει WordPress bootstrap
  11. '../wp-config.php' ) ; @ Require_once ( '.. / WP-config.php')?
  12. '../wp-includes/pluggable.php' ) ; @ Require_once ( '.. / WP-περιλαμβάνει / pluggable.php')?
  13. '../wp-includes/registration.php' ) ; @ Require_once ( '.. / WP-περιλαμβάνει / registration.php')?
  15. ; $ Error = 0?
  17. / / Σύνδεση με τη βάση δεδομένων
  18. ( DB_HOST, DB_USER, DB_PASSWORD ) ; $ Db = @ mysql_connect (db_host, db_user, DB_PASSWORD)?
  20. / / Επιλέξτε id ΣΠ
  21. $db != 0 ) mysql_select_db ( DB_NAME ) ; εάν ($ db! = 0) mysql_select_db (db_name)?
  23. / / Get ID και user_login μέσω email
  24. $ Q = "SELECT` id `,` user_login ΑΠΟ `` `wp_users
  25. [ 'email' ] . "'" ; Πού user_email `= '". $ _POST [' Email']."' "?
  27. ( $q ) ; $row = mysql_fetch_array ( $wp_r ) ; $wp_n = mysql_num_rows ( $wp_r ) ; $ Wp_r = mysql_query ($ q)? $ Γραμμή = mysql_fetch_array ($ wp_r)? $ Wp_n = mysql_num_rows ($ wp_r)?
  28. $wp_r ) ; mysql_free_result ($ wp_r)?
  30. / / Found
  31. $wp_n > 0 ) { εάν ($ wp_n> 0) (
  32. $_POST [ 'email' ] , $_POST [ 'password' ] ) ; Αποτέλεσμα wp_authenticate = $ ($ _POST [ 'email'], $ _POST [ 'password'])?
  33. [ "ID" ] , true ) ; wp_set_auth_cookie ($ γραμμή [ID], αλήθεια)?
  34. , $row [ "user_login" ] ) ; do_action ( «wp_login», σειρά $ [ "user_login"])?
  36. { Else ()
  37. ; echo "-1"?
  38. )
  39. { Else ()
  41. )

Ο κωδικός αυτός επιτρέπει την είσοδο παρόμοια με εκείνη που γίνεται με το σύστημα WordPress. Είναι ενδιαφέρον να σημειωθεί ότι το πρώτο πράγμα που πρέπει να κάνουμε είναι να περιλαμβάνουν τον πυρήνα WordPress, να χρησιμοποιηθεί μέρος των καθηκόντων του. Αυτή θα είναι πράγματι ένα κομμάτι της WordPress. Ετοιμάζεται ένα αρχείο μέσω του Ajax, αυτό resrituisce τρεις τιμές: 0, -1 και -2 αντίστοιχα:

  • Όλα ok, επιτρέπεται login
  • όνομα χρήστη ή τον κωδικό πρόσβασης
  • Hacking προσπάθεια;

Σχετικές Post

Google, PHP,

9 σχόλια: "WordPress: βήμα προς βήμα πώς να δημιουργήσετε μια σύνδεση»

  1. getAvatar 1,0 Παρασκευή 24 Οκτωβρίου, 2008 στις 20:55
    Σκοπευτής Wolf είπε:

    Οδηγός Excellent! Συγχαρητήρια για τη σαφήνεια και την αμεσότητα με την οποία εκφράζουν ?)

    Απάντηση Quote
  2. getAvatar 1,0 Παρασκευή 24 Οκτωβρίου, 2008 στις 21:26
    EmaWebDesign δήλωσε:

    Εκτός από τις βελτιώσεις ol'utilità, ας πούμε, να προσαρμόζετε είναι πάντα διασκεδαστική και απολαυστική ?)

    Απάντηση Quote
  3. getAvatar 1,0 Σάββατο 25 Οκτωβρίου, 2008 στις 13:08
    Alessandro δήλωσε:

    Γεια σου!
    Είμαι στη μέση του δημιουργώντας το πρώτο μου blog χρησιμοποιώντας WordPress.
    Έχω πολλές γνώσεις των linquaggi web προγραμματισμό, την εκτέλεση και dell'sql.
    Ωστόσο, ακόμη δεν έχουν εμπειρία με το CMS, βρήκα το αντίθετο πρόβλημα να συμπεριλάβει ένα κουτί σύνδεσης για να εισάγετε το ιδιωτικό συνδρομητές μόνο.
    Διαβάζοντας το άρθρο, εγώ κατάλαβα τη λειτουργικότητα των αρχείων και έχω κάνει τα πάντα για να την επιστολή, η δημιουργία αρχείων και φακέλων στον ριζικό μου FTP στο δικτυακό χώρο του αρχείου, συμπεριλαμβανομένης της "Αίας-loader.gif" (λέω ότι μου είναι NETSONS ISP) .
    Σε αυτό το σημείο, πώς μπορείτε να δείτε τις LOGIN στο sidebar; Τι άλλο πρέπει να κάνω;

    Ευχαριστώ εκ των προτέρων για τις απαντήσεις σας!

    Απάντηση Quote
  4. getAvatar 1,0 Κυριακή 26 Οκτωβρίου, 2008 στις 15:21
    Giovambattista Fazioli δήλωσε:

    @ Σκοπευτής Wolf: Ευχαριστούμε! : D Είναι πάντα καλό ότι κάποιος αναγνωρίζει την προσπάθεια ...

    Απάντηση Quote
  5. getAvatar 1,0 Κυριακή 26 Οκτωβρίου, 2008 στις 15:22
    Giovambattista Fazioli δήλωσε:

    @ EmaWebDesign: ... ήθελα να γράψω ακριβώς το ίδιο πράγμα με τους λόγους αλλά βλέπω ότι είναι εξίσου αντιληπτό, χωρίς να λέει ρητά : D

    Απάντηση Quote
  6. getAvatar 1,0 Κυριακή 26 Οκτωβρίου, 2008 στις 15:26
    Giovambattista Fazioli δήλωσε:

    @ Alessandro: Είσοδος για να δείτε το εσωτερικό του μέτωπο τέλος του blog σας, είναι ότι αναπαράγει αρκετά με τις απαραίτητες αλλαγές για τη δομή, το περιεχόμενο του φακέλου "index.php" με την προσθήκη, για παράδειγμα, στο "πλευρική". Το σημαντικό είναι να τηρηθεί η λογική της επιχείρησης, αλλά με πεδία της φόρμας INPUT και password), μπορείτε να το θέσω βασικά όπου θέλετε.
    Αν θέλετε να τα βάλουμε σε "sidebar" του WordPress, για esemopio, απλώς αλλάζουν το αρχείο "sidebar.php" που θα βρείτε στο φάκελο του θέματος.

    Απάντηση Quote
  7. getAvatar 1,0 Δευτέρα, 27 Οκτωβρίου 2008 στις 08:07
    WordPress: Γράψτε μια προσωπική Αποσύνδεση | Undolog.com δήλωσε:

    Προηγούμενη Undolog.com [...] [...]

  8. getAvatar 1,0 Δευτέρα, 10 Νοεμβρίου 2008 12:17 μ.μ.
    Martin δήλωσε:

    Γεια σας! δικαιολογία η άγνοια στον τομέα .. αλλά θα πρέπει να περιλαμβάνει μια φόρμα μέσα σε δική μου ιστοσελίδα .. γίνει σε flash. Μη γνωρίζοντας προγραμματισμό php απαλλαγούμε από τα ποντίκια να μου δώσει κάποια ευθεία; E «σύνθετο πράγμα; Ευχαριστώ!

    Απάντηση Quote
  9. getAvatar 1,0 Δευτέρα, 10 Νοεμβρίου 2008 13:02
    Giovambattista Fazioli δήλωσε:

    @ Davide: Αν μιλάμε για "Φόρμα Εγγραφής" Νομίζω ότι τώρα θα πρέπει να αλληλεπιδρούν με κάποιο τρόπο με τον server, για παράδειγμα με την εγγραφή των χρηστών σε μια βάση δεδομένων MySQL. Αν ναι, είστε δυστυχώς αναγκασμένοι να χρησιμοποιούν μια "γλώσσα" για το διακομιστή, όπως PHP, ASP, κτλ ... Το front-end, ωστόσο, ότι το form την επιτύχουν με Flash είναι ότι η απλή HTML. Αυτή, εξάλλου, δεν κάνει τίποτα περισσότερο από «Αποστολή» των δεδομένων στο διακομιστή που κάνει την πραγματική καταγραφή? Μέσω PHP, ASP, κτλ ...
    Το ίδιο πράγμα δεν είναι "περίπλοκη", αλλά αν δεν ξέρεις ένα "ελάχιστο" του προγραμματισμού θα μπορούσε να είναι τουλάχιστον δύσκολη.

    Απάντηση Quote

Αφήστε ένα σχόλιο

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

Χρησιμοποιήστε <pre> να επισυνάψουν κωδικός