Neste tutorial veremos como criar um procedimento de login pessoal, também usando a funcionalidade Ajax usando jQuery . ). Existem vários métodos para personalizar o WordPress login, por exemplo, através do uso de gancho e filtros ( add_action() , add_filter() ). Usaremos um procedimento mais baixo nível, embora não de qualquer maneira para interfacceremo Kernel WordPress. Além disso, vamos tentar validar um usuário através da Dupla email / senha.
Por que criar o seu próprio login?
- Em alguns contextos pode retornar uitle ter o máximo controle na página de login, para propor um layout personalizado aos nossos utilizadores registados. Você também pode enriquecer a página com informações úteis, a partir de um logotipo para o clássico "Esqueceu sua senha?"
- Para permitir o acesso através de correio electrónico (como no exemplo discutido aqui), em vez de
user_loginpadrão WordPress - Para ter a oportunidade de entrar em um painel de login na barra lateral do nosso Blog
- E, finalmente, para ter um esqueleto - e uma ideia - para uma grande Plugin

Ambiente
No nosso exemplo / tutorial vamos trabalhar na raiz do WordPress em uma pasta mylogin . . Criar dois arquivos php dentro desta pasta: index.php e logon.php . A primeira conterá a interface do nosso registro, com todos os recursos de JavaScript / jQuery que precisamos. O segundo arquivo, logon.php , conterá o código para validar o usuário. e una cartella images . Em seguida, crie uma pasta css e dentro deste arquivo layout.css e uma pasta de images . Dentro da pasta imagens inserir um clássico Ajax loader: criá-lo on-line em AjaxLoad.info . No final, você deve ter:
- meulogin
- index.php
- logon.php
- css
- layout.css
- imagens
- ajax-loader.gif
index.php
, email e password: Este arquivo mostra o formulário de login através de um form com dois campos input , e-mail e senha:
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" > <HTML Xmlns = "http://www.w3.org/1999/xhtml"> <head> equiv = "Content-Type" content = "text/html; charset=utf-8" /> <meta Http-equiv = conteúdo "Content-Type" = "text / html; charset = utf-8" /> myLogin Demo </ title > <Title> MyLogin Demonstração </ 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. Carga ("jquery", "1.2.6") </ script> "text/javascript" > <Script Type = "text / javascript"> <! - google. setOnLoadCallback ( function () { / / Coloca o foco na primeira entrada, logo que a página é / / Carregado "mylogin" ] . email . focus ( ) ; documento de formulários ["meulogin"] correio focus ()...; } ); / ** * Display de erro de informação / aviso em nosso * Formulário de login * / str ) { função showError (str) { ) . html ( '<h2>' + str + '</h2>' ) . slideDown ( ) ; $ ('Div # erro') Html ('<h2>' + str + '</ h2>') slideDown ()..; } / ** * Validação dos dados fornecidos no formulário de login. Se todos * É correto, os dados serão enviados para a página logon.php * Via Ajax * * @ Author Giovan Battista Fazioli * @ @ Email g.fazioli undolog.com * @ Web http://www.undolog.com * / checkLogin função () { document . forms [ "mylogin" ] ; var f = documento de formulários ["meulogin"].; ^ ( [ \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 # erro'). SlideUp ( function () { / / f . email . value == '' ) { if (valor ex-mails. =='') { ) ; showError ('Você não inseriu \' e-mail '); focus ( ) ; . f correio focus ().; ; return false; } ! __filter . test ( f . email . value ) ) { if (! testes de filtro. __ (f. correio. valor)) { ) ; showError ('O campo email é inválido'); select ( ) ; .. f correio select (); focus ( ) ; . f correio focus ().; ; return false; } f . password . value == '' ) { if (senhas ant. valor. =='') { ) ; showError ('Você não digitou a senha'); focus ( ) ; f senhas focus ()..; ; return false; } ) . show ( 'slow' ) ; . $ ('Div # ajax-loader') Show ('slow'); ) . css ( 'cursor' , 'wait' ) ; . $ ('Body') Css ('cursor', 'esperar'); / / Enviar dados para logon.php em via Ajax POST 'logon.php' , { email : f . email . value , password : f . password . value } , . $ Post ('logon.php', {e-mail:. F Correio Valor, password:... F senhas} Value, data ) { function (data) { ) . hide ( 'slow' ) ; . $ ('Div # ajax-loader') Ocultar ('slow'); ) . css ( 'cursor' , 'default' ) ; . $ ('Body') Css ('cursor', 'default'); data ) { switch (data) { : caso '0 ': / / Acesso permitido href = 'http://mioblog.com/' ; . documento localização href = 'http://mioblog.com/ ». quebrar; : caso '-1': ) ; showError ('Acesso Negado e-mail ou senha incorreta.'); quebrar; : caso '-2': ) ; showError ('Os dados estão errados: Tentativa de hack'); quebrar; } } ); / / Cut-off apresentar ; return false; } ); ; return false; } / / -> </ Script> rel = "stylesheet" href = "css/layout.css" type = "text/css" media = "screen, projection" /> < ligação rel = "stylesheet" href = "css / layout.css" type = "text / css" media = "screen, projeção" /> </ 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 = estilo "error" = "display: none"> <h2> ... </ h2> </ div> "mylogin" name = "mylogin" method = "post" action = "logon.php" onsubmit = "return( checkLogin() )" > <Form Id = name = "mylogin" "mylogin" method = "post" action = "logon.php" onsubmit = "return (checkLogin ())"> "100%" border = "0" cellspacing = "8" cellpadding = "4" > <Table Width = border = "100%" "0" cellspacing = "8" cellpadding = "4"> <tr> "right" >< label for = "email" > email :</ label ></ td > <td Align = "right"> <label para = "email"> Email: </ label> </ td> input type = "text" name = "email" id = "email" /></ td > <td> <input Type = "text" name = "email" id = "email" /> </ td> </ Tr> <tr> "right" >< label for = "password" > password :</ label ></ td > <td Align = "right"> <label para = "password"> Senha: </ label> </ td> input type = "password" name = "password" id = "password" /></ td > <td> <input Type = "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" valor = "Submit" /> </ td> </ Tr> </ Table> "ajax-loader" style = "display:none" >< img src = "css/images/ajax-loader.gif" /></ div > <div Id = estilo "ajax-loader" = "display: none"> <img src = "css / images / ajax-loader.gif" /> </ div> </ Form> </ Div> </ Body> </ Html> |
Nota: O arquivo
index.php, como você pode ver dando uma olhada no código, ele também poderia ser um arquivo html normal. No entanto, no caso de que um dia nós queremos inserir algum trecho de código PHP, que já preparou a extensão do arquivo.
O JavaScript lado permite-lhe:
- Executar uma série de verificações sobre o e-mail e senha campos (ver também Validar email em JavaScript e PHP )
- Envio Block (o submit) automática e usa Ajax, usando jQuery para enviar dados em
POSTpara a páginalogon.php
layout.css
O layout que você pode corrigi-lo como você vê o ajuste. Proponho uma versão fácil de personalizar como quiser:
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 {# entrar 32px 0 0 0 ; margin: 32px 0 0 0; } div # {erro 8px auto margin: carro 8px } div # erro 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 { / * Para mudar, dependendo do tipo de Ajax loader que você baixou * / 220px ; width: 220px; 0 auto ; margin: 0 auto; } |
logon.php
vista in precedenza. A página logon.php é chamado directamente pelo uso de Ajax a partir da página index.php visto anteriormente. Na versão aqui apresentada, não há controles sobre a "validade" dos dados passados no POST, uma simples verificação é realizada "presença" através da função isset() . No entanto, desde o JavaScript está sujeita a diversas modificações, você também pode digitar uma verificação adicional no lado do servidor / php. Ver a este respeito Classes Javascript e PHP para validar un'indirizzo 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 | / ** * Realiza o login do usuário e senha via e-mail Wordpress * * @ Author Giovan Battista Fazioli * @ @ Email g.fazioli undolog.com * @ Web http://www.undolog.com * / isset ( $_POST [ "email" ] ) && isset ( $_POST [ "password" ] ) ) { if ( isset ($ _POST ['email']) && isset ($ _POST ['password'])) { / / Chamar inicialização 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 ; $ Erro = 0; / / I conectar ao banco de dados mysql_connect ( DB_HOST , DB_USER , DB_PASSWORD ) ; $ Db = @ mysql_connect (DB_HOST, DB_USER, DB_PASSWORD); / / I selecionar id DB $db != 0 ) mysql_select_db ( DB_NAME ) ; if ($ db = 0!) mysql_select_db (DB_NAME); / / Obter ID e user_login via e-mail "SELECT `ID`, `user_login` FROM `wp_users` $ Q = "SELECT` ID `,` user_login `FROM` wp_users ` $_POST [ 'email' ] . "'" ; ONDE `user_email` = '". $ _POST [' Email ']."' "; mysql_query ( $q ) ; $row = mysql_fetch_array ( $wp_r ) ; $wp_n = mysql_num_rows ( $wp_r ) ; $ Wp_r = mysql_query ($ q); $ linha = mysql_fetch_array ($ wp_r); $ wp_n = mysql_num_rows ($ wp_r); $wp_r ) ; mysql_free_result ($ wp_r); / / Encontrados $wp_n > 0 ) { if ($ wp_n> 0) { wp_authenticate ( $_POST [ 'email' ] , $_POST [ 'password' ] ) ; $ Resultado = wp_authenticate ($ _POST ['email'], $ _POST ['password']); ! is_wp_error ( $result ) ) { if (! is_wp_error ($ resultado)) { [ "ID" ] , true ) ; wp_set_auth_cookie ($ row ['id'], true); , $row [ "user_login" ] ) ; do_action ('wp_login', $ linha ["user_login"]); ; echo "0"; "-1" ; } Else echo "1"; { Else {} ; echo "1"; } { Else {} ; echo "-2"; } |
Isto permite que um código de registo semelhante ao realizado com o sistema WordPress. Vale ressaltar que a primeira coisa a fazer é incluir o núcleo do WordPress para que você possa usar algumas de suas funções. Desta forma, estaremos em todos os aspectos, um "pedaço" do WordPress. Sendo um arquivo processado via Ajax, este resrituisce três valores: 0, -1 e -2, respectivamente, para:
- tudo ok, acessar permitido
- nome de usuário ou senha está incorreta
- tentar Hacking?












Excelente guia! Parabéns para a clareza e rapidez com que você se expressa
Além das melhorias ou a utilidade, vamos enfrentá-lo, personalizá-lo é sempre divertido e agradável
Olá!
Eu estou no meio de criar meu primeiro blog com o ausilo do WordPress.
Eu tenho um pouco de conhecimento de programação linquaggi web, scripts e sql.
No entanto, não ter experiência com CMS, encontrei-me na frente do problema para inserir uma caixa de login para acessar os membros privados só.
Lendo o artigo entendi a funcionalidade do arquivo e executar tudo ao pé da letra, criando arquivos e pastas na raiz dos meus arquivos da web em FTP, incluindo o "ajax-loader.gif" (estado em que o meu provedor é Netsons) .
Neste ponto, como exibir o log na barra lateral? O que mais devo fazer?
Obrigado antecipadamente pelas respostas!
@ Sniper Wolf: Obrigado!
É sempre bom que alguém aprecia o esforço ...
@ EmaWebDesign: exato ... eu queria escrever a mesma coisa nas razões, mas eu vejo que você sentiu isso de qualquer maneira, mesmo sem dizê-lo explicitamente
@ Alessandro: Para visualizar o registro no front-end do seu blog, ele é adequado para você reproduzir, com as modificações necessárias para o layout, o conteúdo do arquivo "index.php", inserindo, por exemplo, no "quadro". O importante é respeitar a lógica da operação, mas com os campos do formulário
INPUT(email e senha), você pode basicamente onde você deseja inserir.Se você quiser colocá-lo no "quadro" do WordPress, para esemopio, basta editar o arquivo "sidebar.php" que você encontra na pasta do seu tema.
[...] Undolog.com anterior [...]
Olá! desculpem a ignorância .. mas eu precisaria entrar em um formulário de inscrição dentro do meu site .. feito em flash. Sem saber programação php você saberia me dar alguns conselhos? Complexo E 'isso? Thank you very much!
@ David: se você falar de "formulário de inscrição" eu penso imediatamente que você tem que interagir de alguma forma com o servidor, tais como registrar usuários em um banco de dados MySQL. Se assim for, você está, infelizmente, forçados a usar um lado "linguagem" do servidor, como PHP, ASP, etc ... O front-end, porém, que a
formde registro, você pode alcançá-lo em Flash e HTML facilmente. Isto, em última análise, não faz nada, mas em "Enviar" os dados para o servidor que executa a gravação real, através de PHP, ASP, etc ...A coisa em si não é "complexo", mas se você não conhece um "mínimo" de programação pode risultarti menos difícil.
Olá ... Parabéns pelo site e pelo exemplo ...
Eu não entendi uma coisa ... na forma chama pós logon.php o arquivo que faz a consulta e retorna um resultado ... mas onde está o "chamador" index.php leva os valores que logon.php envia-lo?
obrigado!
@ Luciano:
São tomadas a partir da forma, ao mesmo tempo que o usuário preenche os dados, ou seja, ao entrar nome de usuário e senha.
Interessante, eu teria usatoi embora um pouco "mais" jQuery ...
por exemplo, pode-se usar em vez de:
2
3
/ / E, em seguida,
f. password . value ; var password = f senhas valor..;
a mais 'simples:
incidentalmente por jQuery:
isso significa algo bem 
"Escreva LASS FAZER MAIS ...."
@ Santino Bivacqua:
é que eu tinha pensado nisso também. No entanto, o acesso aos campos de um
formé bastante simples (e rápido), mesmo sem o uso de jQuery. Não é que não está a ser optimizada, neste caso, no entanto o acesso a:é do tipo array / index, e mais rápido:
jQuery, de fato, tem de "fluxo" em torno do DOM antes de interceptar a "
Além disso, se você deseja aplicar algum efeito jQuery você é forçado a usar a sua indicação 
inputcorretamente. Certamente este não é um caso crítico, como o DOM (top) pequeno, e então você pode usar jQuery ou o fácil acesso à funcionalidade básica do Javascript.Mas você está certo, é útil para escrever menos
desculpe, mas eu não sei como ele funciona internamente jQuery, mas eu acho que se você usar o id, de partida para # jQuery entende e usa
document.getElementById('id'), então não é que jQuery é executado todos os nós até encontrar o que ele necessidade é o motor de JavaScript do navegador que se encarrega de fornecer os dados .....…. talvez ele só faz se você indicar o nome de um tipo de classe
$('.class'), pois não há equivalentegetElementByClassName.... infelizmenteEm qualquer caso, a um ou outro, é só para ter uma forma única de programação, já que eu sei que eu não use mais jQuery métodos DOM, muito mais "prolixo ... Vou te dar um exemplo, tente escrever com métodos do código DOM para remover uma linha de uma tabela com jQuery suficiente:
@ Santino Bivacqua: direito
no caso de o id você está absolutamente certo ... seria interessante testar o bit de execução ... quase ... quase 
wordpress el es muy bueno, pero no ENCONTRADO ele para formar o bajar de Carga en los Opaco Este gera Servidores, solucionando um problema aun ESTAMOS en un portal de unas entretenimeto isso gera Cargas altas com 10mil Visitas UNICAS bronzeado sozinho por día, você alguien SABE Como solucionar a ayuda Por Esto Espero Que tienen ni en wordpress solucion de Esto
Isso só acontece comigo ou com alguém registros no script, independentemente da senha digitada?
Olá, me deparei com seu blog fazendo uma pesquisa sobre o logon WordPress e devo dizer que este tutorial - Quero parabenizá-lo porque ele é feito muito bem - Acho que é muito útil, mas são um pouco enferrujado na programação, então eu queria perguntar-lhe, desde você sabe para frotas
Se
Eu posso ter certeza de loggarmi na plataforma WordPress e outro privado, ao mesmo tempo.
Deixe-me explicar: Eu tenho esta plataforma privada, que pode ser programado para o meu gosto e eu queria ter certeza de que, através do registo deste poderia, ao mesmo tempo, tanto o log executar dois plataforma privada que o WordPress (com usuário idênticas e passar em ambos) .
. Olá Nicola
No começo eu pensei para entrar na página de login da plataforma privada de uma forma oculta que me permitisse ter uma cópia dos dados loggarmi então dizemos "sorrateira" também no WordPress, mas depois fiquei impressionado com o seu guia e talvez não uma maneira mais inteligente para enviar os dados e certifique-se loggarmi para WordPress através de outra página ... Eu não sei se eu expliquei bem e eu espero que você me responda
@ Redemption: Olá Nicholas, eu não sei, claro, seu próprio terraço privado, mas o procedimento é definitivamente factível. Em teoria, todo o código que você servidor (para WordPress) está presente neste post. O que você tem que decidir é onde correr apenas os "dois" logins simultâneos.
Se você tem acesso total à sua plataforma, você pode inserir o código de acesso ao seu terraço privado no logon.php arquivo proposto neste post, por exemplo.
@ Giovan Battista Fazioli:
Obrigado pela resposta!
Eu deveria começar a testá-lo, mas você me deu uma boa esperança para a implementação e eu sou grato
.
Peço-lhe uma última coisa, eu posso de alguma forma criar uma consulta do usuário na tabela user diretamente do banco de dados do wp ou existem outros relacionamentos e chaves a ser criado dentro do db?
Como você deve ter percebido que eu tenho que de alguma forma também exportar os usuários da plataforma privada para wp
.
Ola bela guia nn mas eu percebi uma coisa essencial onde eu tenho que colocar todos os arquivos? pasta wordpress? como faço?
Grande post ... muito obrigado!
Se eu quisesse salvar minha senha de login wordpress, que seria a duas variáveis de usuário e passar que eu tenho que salvar?
Olá, muito bom tutorial!
Eu só tenho uma pequena dúvida: como você define WordPress para que a home page é o MyLogin index.php na pasta e não a raiz index.php?
Atualmente eu colocar um redirecionamento no index.php da raiz do WordPress:
Há um outro método mais elegante?
obrigado