Neste tutorial vamos ver como criar um procedimento de login pessoal, também usando a funcionalidade Ajax via jQuery . ). Existem várias maneiras de personalizar o login do WordPress, por exemplo, o uso de ganchos e filtros ( add_action() , add_filter() ). Aqui vamos usar um procedimento de baixo nível, embora haja ainda interfaces para o kernel do WordPress. Além disso, vamos tentar validar um usuário através da Dupla-mail / senha.
Por que criar seu próprio login?
- Em alguns contextos pode retornar uitle ter o máximo controle na página de login, a propor um layout personalizado aos nossos usuários registrados. Você também pode aprimorar a página com informações úteis, um logo do clássico "Esqueceu a senha?"
- Para permitir o acesso através do e-mail (como no exemplo discutido aqui) em vez de
user_loginpadrão WordPress - Para ser capaz de introduzir um painel de login na barra lateral do nosso blog
- E, finalmente, ter um esqueleto - e uma idéia - uma grande Plugin

Ambiente
Em nosso tutorial / exemplo vamos trabalhar na raiz de uma pasta dentro do WordPress mylogin . . Criamos dois arquivos php dentro desta pasta: index.php e logon.php . O primeiro irá conter a nossa interface de login com todas as funções JavaScript / jQuery que precisamos. O segundo arquivo, logon.php , conterá o código para validação do usuário. e una cartella images . Em seguida, crie uma pasta css e dentro deste arquivo layout.css e pasta de images . Dentro da pasta imagens inserir um clássico Ajax loader: criá-lo on-line AjaxLoad.info . No final você deve ter:
- MyLogin
- index.php
- logon.php
- Alimentar
- Layout.css
- imagens
- ajax-loader.gif
index.php
, email e password: Este arquivo mostra a forma de acesso através de um form com dois campos input de 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 = content = "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. Load ("jquery", "1.2.6") </ script> "text/javascript" > <script Type = "text / javascript"> <! - google setOnLoadCallback. ( function () { / / Coloca o foco na primeira entrada, quando a página é / / Carregado "mylogin" ] . email . focus ( ) ; . formulários documento ["MyLogin"] e-mail focus ()..; } ); / ** * Mostrar informações de erro / aviso em nosso * Formulário de login * / str ) { showError function (str) { ) . html ( '<h2>' + str + '</h2>' ) . slideDown ( ) ; . $ ('Div # error') Html ('<h2>' + str + '</ h2>') slideDown ().; } / ** * Validação dos dados fornecidos no formulário de login. Se todos os * É correto, os dados serão enviados para o logon.php página * Através de Ajax * * @ Autor Giovambattista Fazioli * E-mail @ @ g.fazioli undolog.com * @ Web http://www.undolog.com * / checkLogin function () { document . forms [ "mylogin" ] ; var f = documento formas ["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 # erro "). ( function () { / / f . email . value == '' ) { if (f. email. =='') valor { ) ; showError ('Você não inseriu \' email '); focus ( ) ; f. email focus ().; ; return false; } ! __filter . test ( f . email . value ) ) { if (! __filter. testar (e-mail f. valor.)) { ) ; showError ('O campo de e-mail é inválido'); select ( ) ; f. email select ().; focus ( ) ; f. email focus ().; ; return false; } f . password . value == '' ) { if (f. senha. =='') valor { ) ; showError ('Você digitou a senha'); focus ( ) ; f. senha focus ().; ; return false; } ) . show ( 'slow' ) ; $ ('Div # ajax-loader') Show ('slow').; ) . css ( 'cursor' , 'wait' ) ; $ ('Body') Css ('cursor', 'esperar').; / / Envio de dados via Ajax POST logon.php 'logon.php' , { email : f . email . value , password : f . password . value } , Mensagem $ ('logon.php', {e: Email f. Valor, senha:.. Senha f.}. Value, data ) { function (dados) { ) . hide ( 'slow' ) ; . $ ('Div # ajax-loader') Hide ('slow'); ) . css ( 'cursor' , 'default' ) ; $ ('Body') Css ('cursor', 'default').; data ) { switch (dados) { : caso '0 ': / / Acesso permitido href = 'http://mioblog.com/' ; .. documento localização href = 'http://mioblog.com/'; break; : case '-1': ) ; showError ('Access Denied e-mail ou senha incorreta.'); break; : case '-2': ) ; showError ("Dados errados: tentativa de hack '); break; } } ); / / Enviar cut-off ; return false; } ); ; return false; } / / -> </ Script> rel = "stylesheet" href = "css/layout.css" type = "text/css" media = "screen, projection" /> < elo rel = "stylesheet" href = "css / layout.css" type = "text / css" media = "tela de projeção," /> </ Head> <body> "login" > Id = <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 > Id = <div "error" style = "display: none"> <h2> ...</ h2> </ div> "mylogin" name = "mylogin" method = "post" action = "logon.php" onsubmit = "return( checkLogin() )" > <form Id = nome = "mylogin" "mylogin" method = "post" action = "logon.php" onsubmit = "return (checkLogin ())"> "100%" border = "0" cellspacing = "8" cellpadding = "4" > <table Width = "100%" border = cellspacing = "0" cellpadding = "8" "4"> <tr> "right" >< label for = "email" > email :</ label ></ td > <td Align = "right"> <label para "email"> = E-mail: </ label> </ td> input type = "text" name = "email" id = "email" /></ td > <td> <input Type = name = "text" "email" id = "email" /> </ td> </ Tr> <tr> "right" >< label for = "password" > password :</ label ></ td > <td Align = "right"> <label para "password"> = Password: </ label> </ td> input type = "password" name = "password" id = "password" /></ td > <td> <input Type = name = "password" "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 = name = "submit" "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, você também pode ser um arquivo HTML normal. No entanto, no caso em que um dia queremos inserir algum trecho de código php, nós preparamos a extensão do arquivo.
A parte que você precisa de Javascript permite que você:
- Executar uma série de controlos de e-mail e campos de senha (ver também Validar e-mail em Javascript e PHP )
- Envio de bloco (em submit) automática e usa Ajax via jQuery para enviar os dados para
POSTpara a páginalogon.php
Layout.css
O layout que você pode corrigi-lo como achar melhor. Proponho uma versão fácil de personalizar como desejar:
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 {# tabela log 32px 0 0 0 ; margin: 32px 0 0 0; } div {erro # 8px auto margin: 8px Car } 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 diretamente a partir da página usando Ajax index.php visto antes. Na versão apresentada aqui não existem controlos sobre a "validade" dos dados passados com o POST, uma simples verificação é feita de "presença" através da função isset() . No entanto, uma vez que o JavaScript é mais suscetível a várias modificações, você também pode adicionar um controle de servidor adicional / php. Ver a este respeito Classes un'indirizzo Javascript e PHP para validar 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 | / ** * Funciona de login de um usuário e senha via e-mail Wordpress * * @ Autor Giovambattista Fazioli * E-mail @ @ g.fazioli undolog.com * @ Web http://www.undolog.com * / isset ( $_POST [ "email" ] ) && isset ( $_POST [ "password" ] ) ) { if ( isset ($ _POST ['email']) & & isset ($ _POST ['password'])) { / / 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 ; $ Erro = 0; / / Me conectar ao banco de dados mysql_connect ( DB_HOST , DB_USER , DB_PASSWORD ) ; $ Db = @ mysql_connect (DB_HOST, DB_USER, db_password); / / Select id DB $db != 0 ) mysql_select_db ( DB_NAME ) ; if ($ db = 0!) mysql_select_db (DB_NAME); / / Get ID e seu endereço de e-mail que você USER_LOGIN "SELECT `ID`, `user_login` FROM `wp_users` $ Q = "SELECT` id `,` USER_LOGIN `FROM` wp_users $_POST [ 'email' ] . "'" ; ONDE USER_EMAIL `` = '"$ _POST ['.']."' E-mail"; 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); / / Encontrado $wp_n > 0 ) { if ($ wp_n> 0) { wp_authenticate ( $_POST [ 'email' ] , $_POST [ 'password' ] ) ; Wp_authenticate $ resultado = ($ _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"; } |
Este código faz um login semelhante ao feito com o sistema WordPress. É interessante notar que a primeira coisa a fazer é incluir o kernel do WordPress para que você possa usar algumas de suas funções. Desta forma, estará em vigor um "pedaço" do WordPress. Sendo um arquivo processado via Ajax, este resrituisce três valores: 0, -1 e -2, respectivamente:
- ok, faça o login permitido
- nome de usuário ou senha está incorreta
- Tentativa de hacking?











Excelente guia! Parabéns pela 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
Oi!
Eu estou no meio de criar meu primeiro blog usando WordPress.
Eu tenho um pouco de conhecimento de programação web linquaggi, scripts e SQL.
No entanto, não ter experiência com CMS, encontrei-me em frente ao incómodo de ligar uma caixa de login para acessar os membros privados.
Lendo o artigo eu entendi a funcionalidade de arquivos e fiz tudo ao pé da letra, a criação de arquivos e pastas na raiz do meu espaço na web no arquivo FTP, incluindo o "ajax-loader.gif" (I estado que o meu provedor é Netsons) .
Neste ponto, como exibir o LOGIN barra lateral? O que mais devo fazer?
Obrigado antecipadamente pelas respostas!
@ Sniper Wolf: Thank you!
É sempre bom que alguém reconhece o esforço ...
@ EmaWebDesign: exatamente a mesma coisa ... Eu queria escrever nas razões, mas eu vejo que você é percebido de forma igual, sem dizer explicitamente para
@ Alexandre: o login para ver o interior da extremidade dianteira do seu blog, você suffciente você joga através, com as modificações necessárias para o layout, o conteúdo do arquivo "index.php", inserindo, por exemplo, na "sidebar". O importante é respeitar a lógica da operação, mas o FORM campo com
INPUT(e-mail e senha), basicamente você pode colocá-lo onde quiser.Se você deseja inseri-lo na "sidebar" em WordPress, por esemopio, basta editar o arquivo link "sidebar.php" na sua pasta tema.
[...] [...] Undolog.com anterior
Olá! Desculpa a ignorância sobre o assunto .. mas eu precisaria inserir um formulário de registro no meu site .. feito em flash. Sem saber de programação php você saberia me alguns conselhos? E 'coisa complexa? Obrigado!
@ 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 registro de usuários em um banco de dados MySQL. Se assim, você, infelizmente, são forçados a usar uma "linguagem" no lado do servidor, como PHP, ASP, etc ... O front-end, no entanto, que o
formde inscrição, você pode conseguir em Flash e HTML. Isto, em última instância, faz nada mais do que "enviar" dados para o servidor que realiza a gravação, usando PHP, ASP, etc ...A coisa em si não é "complexo", mas se você não sabe um programa "mínimo" poderia pelo menos ser difícil.
Olá ... parabéns pelo site e pelo exemplo ...
Eu não entendi uma coisa ... o formulário chamado logon.php postar o arquivo que faz a consulta e retorna um resultado ... mas onde está o "chamador" logon.php index.php leva os valores que lhe envia?
obrigado!
@ Luciano:
São tomadas a partir mesma forma que o usuário preenche os dados, isto é, quando você digitar o seu nome de usuário e senha.
Interessante, eu usatoi embora um pouco "mais" jQuery ...
Por exemplo, você poderia usar em vez de:
2
3
/ / E então
f. password . value ; f. senha var = valor de senha.;
uma mais "simples:
aliás jQuery por:
bem significa algo 
"LASS DO ESCREVER MAIS ...."
@ Santino Bivacqua:
Eu pensei que você, também. No entanto, o acesso aos campos de um
formé bastante simples (e rápido) sem o uso de jQuery. Não é o que há para ser otimizado, neste caso, no entanto o acesso a:é do tipo array / index, e depois mais rapidamente:
jQuery, de fato, tem de "scroll" ao redor do DOM para interceptar o primeiro '
Além disso, se você quiser aplicar algum efeito jQuery você é forçado a usar o seu monitor 
inputcorretamente. Certamente este não é um caso crítico, pois o DOM (top) pequeno, e então você pode usar um acesso fácil jQuery ou a funcionalidade básica do Javascript.Mas você está certo, é útil escrever menos
Lamentamos, mas não sei como funciona internamente jQuery, mas acho que se você usar o id, iniciando com o jQuery entender e usar
document.getElementById('id')para que jQuery não está fluindo todos os nós até encontrar o que ele necessidade é o motor do navegador javascript é responsável por fornecer os dados ... ..…. talvez seja apenas se você indicar o nome de um tipo de classe
$('.class'), porque não há equivalentegetElementByClassName.... infelizmenteEm qualquer caso, um ou outro, é só para ter uma forma única para o programa, pois eu sei que a maioria não usa 'métodos do DOM, muito mais "prolixo jQuery ... Vou te dar um exemplo, tente escrever com métodos do código DOM para remover uma linha de uma tabela, com apenas jQuery:
@ Santino Bivacqua: direito
id se você está absolutamente certo ... seria interessante teste de corrida em ... quase ... 
es muy bueno el wordpress, mas não a forma que ele encontrado bajar de this gera a Carga en los Que Servidores, aun en estamos solución um problema gera um portal Opaco de unas entretenimeto Cargas altas tan com apenas 10mil visitas UNICAS Por dia, você alguien SABE solución Como esto Por quê ayuda Espero o wordpress Tienen ni en esto solución para
Isso só acontece comigo ou com qualquer um que entra no roteiro independentemente da senha digitada?
Olá, me deparei com um blog fazendo uma pesquisa sobre o login do WordPress e devo dizer que este tutorial - Quero parabenizá-lo porque é muito bem feito - Eu posso ser muito útil, no entanto, são um pouco enferrujado em programação assim que eu queria perguntar, dado que Eu sei que para frotas
Se
Eu certificar-se de fazer logon no WordPress plataforma, privado e outro no mesmo instante.
Deixe-me explicar: Eu tenho essa plataforma privada que eu possa programar à vontade e queria fazê-lo através do login deste poderia, ao mesmo tempo, a plataforma é para executar dois log privada para WordPress (tendo o mesmo em ambos usuário e senha) .
. Olá Nicola
No começo eu pensei que a página de login para entrar na plataforma privada de um formulário oculto que me permitisse ter uma cópia dos dados para efetuar login em dizer "sutil", mesmo WordPress, mas depois fiquei impressionado com seu guia e talvez não uma maneira mais inteligente para enviar dados e certifique-se de login para WordPress através de outra página ... Eu não sei se expliquei bem e eu espero que você me responda
@ Redemption: Olá Nicola, eu sei, é claro, o seu terraço privado, mas o processo é definitivamente possível. Em teoria, todo o código que nós Server (para o WordPress) está presente neste post. O que você tem que decidir exatamente onde realizar o "dois" logins simultâneos.
Se você tem acesso total a sua plataforma, você pode digitar o código de acesso ao seu deck privado no logon.php arquivo proposto neste post, por exemplo.
@ Giovambattista Fazioli:
Obrigado pela resposta!
Devo começar a experimentar, no entanto, deram-me esperança para uma boa implementação e estou grato
.
Peço-vos uma última coisa, eu posso de alguma forma criar uma consulta do usuário na tabela user diretamente do banco de dados de wp ou existem outros relacionamentos e chaves para ser criado no db?
Como você sabe que eu tenho de alguma forma também exportar os usuários do wp terraço privado
.
Ola bom guia, mas eu percebi uma coisa fundamental Nenhum onde posso colocar todos os arquivos? pasta do wordpress? como faço?
Ótimo post ... muito obrigado!
Se eu queria salvar o login de acesso de dados do wordpress, que seriam as duas variáveis de usuário e passar eu tenho que salvar?
Olá, excelente tutorial!
Eu só tenho uma pequena dúvida: como é que você definir para que a página inicial do WordPress é o index.php na pasta e não MyLogin index.php na raiz?
Hoje eu coloquei um redirecionamento na index.php raiz do WordPress:
Há um outro método mais elegante?
obrigado